Virtual Tours
Connect Virtual Tours to your Webflow site and display interactive 360° tours on any page.
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:
- Publish your tour in Virtual Tours and copy the embed code
- Add a Code Embed element to your Webflow page from the Add panel
- Paste the iframe code:
<iframe width="800" height="500" src="https://viar.live/embed/tour/[TOUR_ID]" allowfullscreen style="border: none;"></iframe> - Adjust dimensions using the iframe width/height attributes or Webflow's Style panel
- 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.
- Wrap your Code Embed element in a div to create a responsive container
- Set the wrapper div padding-bottom to your desired aspect ratio (56.25% for 16:9)
- Position the iframe absolutely within the wrapper
- 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.
Frequently asked questions
Complete these steps in Virtual Tours before embedding:
- Upload your panoramic photos or videos
- Connect individual panoramas into a cohesive tour
- Add interactive elements like hotspots and navigation points
- Publish the tour
Once published, Virtual Tours generates your embed code. ViarLive's create a virtual tour guide covers the creation process, including photo upload and hotspot configuration.
Virtual Tours include mobile optimization that adapts to smartphones, tablets, and desktop screens. For iframe embeds in Webflow, set explicit dimensions in your embed code or use Webflow's Style panel to apply responsive sizing rules. The aspect ratio wrapper technique creates truly responsive iframes by wrapping your Code Embed element in a div with percentage-based padding that keeps the aspect ratio across breakpoints. Virtual Tours' mobile optimization automatically handles touch navigation and VR headset compatibility.
No. Webflow does not provide support for troubleshooting custom code added through the Code Embed element. For troubleshooting, verify your HTML syntax with properly matched opening and closing tags, check for conflicting JavaScript libraries, and confirm your tour ID accuracy in your code. Contact viar.live support directly for platform-specific issues like broken tour links or display problems.
Embedded content and third-party integrations can impact load times on Webflow sites. Test your specific implementation with real traffic patterns and monitor Core Web Vitals (Largest Contentful Paint, First Input Delay, Cumulative Layout Shift) to measure actual performance impact on your site.
Description
Virtual Tours by viar.live is a cloud-based platform for creating interactive 360° experiences without technical expertise or expensive equipment. Users upload panoramic photos, connect scenes with clickable hotspots, and publish tours that work on any device.
This integration page is provided for informational and convenience purposes only.
Vectary
Connect Vectary with Webflow to embed interactive 3D models and app-free AR experiences on any page.
Icon Drop
Connect Icon Drop with Webflow to search, insert, and manage 20,000+ open-source SVG icons directly inside the Designer, no code or external tools required.
Remove Background
Connect Remove Background with Webflow to remove image backgrounds on the canvas without uploading files to external servers.
SVG Import
Connect SVG Import, a free app that converts pasted SVG code into editable DOM elements, with Webflow to add path-level control to SVGs on the canvas.
Icons8 Graphics
Connect Icons8 Graphics, a design asset platform, with Webflow to access 500,000+ icons, vector illustrations, and stock photos through drag-and-drop, SVG embeds, icon fonts, or API-driven CMS population.
Logo To Use
Modulo
Connect Modulo with Webflow to add pre-built, customizable UI components directly to your canvas and bind them to CMS data.
Stockpress
Connect Stockpress, a digital asset management platform, with Webflow to browse, search, and place brand assets directly in Webflow without switching platforms.
Stockpress
Connect Stockpress, a digital asset management platform, with Webflow to browse, search, and place brand assets directly in Webflow without switching platforms.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
