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 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
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. The Virtual Tour builder documentation details the creation process, including photo upload requirements 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 preserves 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.
Firebase Studio
Connect Firebase Studio with Webflow by deploying Firebase Studio applications as standalone web apps that embed in or link from Webflow, or by integrating Firebase backend services like Authentication, Firestore, and Cloud Functions directly into Webflow pages through custom code or tools like Wized.Retry
Google Sheets
Connect Google Sheets with Webflow to manage CMS content through familiar spreadsheet interfaces, capture form submissions, and synchronize inventory data.
Givebutter
Connect Givebutter with Webflow to collect donations using embedded widgets or build custom workflows through the API.
BigQuery
Connect BigQuery's data warehouse capabilities with your Webflow site using integration platforms or custom server-side middleware to centralize form submissions, analyze user behavior, and build custom analytics dashboards.
Dropbox
Integrating Dropbox with Webflow requires either automation platforms for no-code workflows or direct API implementation for custom functionality. No official Webflow Marketplace app exists.
Cloudinary
Integrate Cloudinary with Webflow to manage and deliver images at scale. This combination lets content teams upload and organize media in Cloudinary while Webflow sites automatically serve device-optimized, responsive assets based on viewport size and browser capabilities without manual resizing or format conversion.
YouTube
Add YouTube videos to Webflow sites using native embed elements or custom iframe code. Control playback settings and configure responsive layouts directly in Webflow. This integration maintains aspect ratio across breakpoints.
Hugeicons
Connect Hugeicons with Webflow to get scalable, professional icons to your projects with direct access to 40,000+ SVG assets.
Vectary 3D & AR
Connect Vectary's browser-based 3D and AR platform with Webflow to create interactive product visualizations, AR experiences, and immersive web content without complex coding.
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.
