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.
AI Image Enhancer
Connect AI Image Enhancer by OLAI to your Webflow site to upgrade image quality and generate custom visuals without leaving your workspace.
Vimeo
Connect Vimeo's professional video hosting platform with Webflow to create engaging websites with high-quality video content, custom players, and seamless CMS integration. Display portfolio reels, educational content, or background videos while maintaining complete control over playback and design.
Videezy Webflow Integration
Connect Videezy (HD stock video library) with Webflow to create engaging backgrounds, hero sections, and dynamic galleries using free and premium footage — no complex production required.
Unsplash
Seamlessly integrate Unsplash's library of over 5 million high-quality, royalty-free images directly into your Webflow Designer. Search, filter, and insert professional photography without leaving your design environment, accelerating content creation while maintaining visual excellence.
Uploadcare File Uploader
Connect Uploadcare's powerful file handling capabilities with Webflow to enable advanced file uploads, image optimization, and content delivery for your websites. This integration allows site visitors to upload files directly through your Webflow forms, automatically processes images for optimal delivery, and stores files securely in the cloud — all without complex backend infrastructure.
SVGator
Add SVGator animations to Webflow sites for scalable vector motion graphics with interactive triggers.
Pixabay
Connect Pixabay's library of 5.3+ million royalty-free images, videos, and audio files to your Webflow site. Build visually rich websites without licensing fees while maintaining complete design control and copyright compliance.
Pngtree
Connect Pngtree – a library of millions of royalty-free PNGs, vectors, and design templates – with Webflow to streamline your design workflow by accessing transparent graphics, infographics, and marketing assets without leaving the platform
Pexels
Add millions of free, high-quality stock photos and videos to your Webflow sites instantly. Search and embed professional media content without leaving Webflow, while maintaining proper attribution and optimizing for performance.
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.
