Virtual Tours

How to integrate Virtual Tours with Webflow

Add Virtual Tours from viar.live to your Webflow site to create immersive property showcases, portfolio presentations, and interactive product displays. Embed tours with the Webflow Code Embed element using iframe code from viar.live. This method requires no coding expertise and displays tours responsively across devices.

Because viar.live has no documented public API or webhook support, direct CMS collection automation is not available. You can store tour URLs in CMS fields and use dynamic embeds to display different tours per collection item, but you'll need to manually add each tour URL.

Embed tours with Webflow's Code Embed element

Webflow's Code Embed element accepts custom HTML iframe code from Virtual Tours. Create your tour in Virtual Tours, copy the embed code, and paste it into a Code Embed element on your Webflow page. This approach gives you direct control over dimensions, positioning, and styling.

To implement the embed, follow these steps:

1. Publish your tour in Virtual Tours and copy the embed code
2. Add a Code Embed element to your Webflow page from the Add panel
3. Paste the iframe code: <iframe width="800" height="500" src="https://viar.live/embed/tour/[TOUR_ID]" allowfullscreen style="border: none;"></iframe>
4. Adjust dimensions using the iframe width/height attributes or Webflow's Style panel
5. Publish your Webflow site to make the tour live

Standard iframes don't automatically adapt to viewport size in Webflow. To configure responsive iframes, use an aspect ratio wrapper technique by creating a container div with percentage-based padding-bottom (56.25% for 16:9 ratio, for example) to maintain proper scaling across devices.

1. Wrap your Code Embed element in a div to create a responsive container
2. Set the wrapper div padding-bottom to your desired aspect ratio (56.25% for 16:9)
3. Position the iframe absolutely within the wrapper
4. Set iframe width and height to 100%

This aspect-ratio wrapper technique is a common web development pattern that works well in Webflow for responsive iframe behavior.

Virtual Tours include built-in mobile optimization for responsive viewing across devices. To create device-specific displays in Webflow, use Webflow's breakpoint system. Hide desktop-optimized embeds at mobile breakpoints and show simplified versions for smaller screens when needed.

What you can build

Integrating Virtual Tours with Webflow creates immersive experiences that let visitors explore spaces remotely before making decisions.

• Real estate listing sites: Build property showcase pages with interactive 360° virtual tours of homes, commercial spaces, or rental units where potential buyers explore rooms, check layouts, and view property details without scheduling in-person visits
• Interior design portfolios: Create project case studies featuring interactive 360° tours of completed spaces where prospective clients navigate through designs, examine material choices, and experience spatial flow from any device
• Hotel booking websites: Add property overview pages displaying guest rooms and amenities through virtual tours that help travelers make booking decisions
• Retail showroom experiences: Build product display pages featuring virtual store tours where customers browse and explore physical retail locations and inventory displays before visiting in person