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 pages with 360° tours of homes, offices, or rentals so buyers explore rooms and layouts without an in-person visit.
• Interior design portfolios: Create case studies with 360° tours of finished spaces, letting prospective clients walk through designs and material choices from any device.
• Hotel booking websites: Add overview pages where travelers preview guest rooms and amenities through virtual tours before they book a stay.
• Retail showroom experiences: Build product pages with virtual store tours so customers browse a physical location and its inventory before visiting.

Each build embeds a published tour through a Code Embed element, so the same setup carries across property, portfolio, and booking pages. For a related embed pattern, see how to embed a Booking.com widget in Webflow.