How to Embed a Virtual Tour in Webflow, Step by Step

You can embed a virtual tour in Webflow by pasting the tour's iframe code into a Code Embed element, placing it inside a Div Block, and publishing the site. The whole job takes about ten minutes. Getting it to look right on a phone takes a little more care, and that is what most of this guide covers.

We built Simple Virtual Tour so that publishing a tour produces a link and an embed snippet you can drop into any site builder. Webflow is one of the easiest builders to do this in, because it lets you place custom HTML exactly where you want it in the layout.

TL;DR

• Add a Code Embed element from the Add panel, paste your tour's iframe code, then save and publish.
• Wrap the embed in a Div Block with a 16:9 padding trick so the tour keeps its shape on every screen size.
• Scope the embed to the page and layout area where the tour appears, not to site-wide code.
• If the tour shows a blank box, check the browser console for "Refused to display" messages. They usually point to framing or security restrictions.
• Webflow support does not troubleshoot custom code, so test on the published site and keep a clean snippet.

Table of Contents

• What you need before you start
• Step 1: Get the embed code for your tour
• Step 2: Add a Code Embed element in Webflow
• Step 3: Make the tour responsive
• Step 4: Preview, publish and test
• Placing the tour where it works hardest
• When the tour does not load
• Privacy, access and accessibility
• Our perspective: own the tour, embed it anywhere
• Create your tour with Simple Virtual Tour
• FAQ
• Sources

What you need before you start

Three things make the process smooth.

1. A published virtual tour with a shareable URL. The tour must be hosted somewhere that allows embedding. With Simple Virtual Tour, whether you use the cloud version or host it yourself, each tour has its own address you can place in an iframe.
2. A Webflow site with the page already built. Create the section where the tour will live first, so you can see how it fits with your headings and text.
3. A paid Webflow site plan if you want to publish to a custom domain. Custom code limits are described in Webflow's update on character limits, which applies to paid sites and workspaces.

You do not need to be a developer. If you can copy and paste, and change a few values in the Style panel, you can do this.

Step 1: Get the embed code for your tour

An iframe is a small window on your page that displays another web page. For a virtual tour, the other page is the tour viewer. A typical snippet looks like this:

<iframe
  src="https://your-tour-address.example/tour"
  title="Virtual tour of our showroom"
  allow="fullscreen; gyroscope; accelerometer; xr-spatial-tracking"
  allowfullscreen
  loading="lazy"
  style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;">
</iframe>

Replace the src value with your own tour URL. A few details are worth keeping:

• title describes the tour for screen reader users. Write something specific, such as "Virtual tour of the 3-bedroom model unit", rather than "tour".
• allow="fullscreen" and allowfullscreen let visitors expand the tour, which matters for 360° content on small screens.
• gyroscope and accelerometer let phone visitors look around by moving the device, where the browser supports it.
• loading="lazy" tells the browser to load the tour only when the visitor scrolls near it. This helps if the tour sits below the fold.

For a longer look at the snippet itself, including responsive settings, see our guide on how to embed a virtual tour on a website.

Step 2: Add a Code Embed element in Webflow

Webflow's Code Embed element is made for this. It holds HTML snippets, iframes and small scripts, and you place it in the layout like any other element. Webflow University's walkthrough of the Code Embed element shows where to find it.

1. Open the page in the Designer.
2. Open the Add panel (the plus icon on the left).
3. Find Code Embed in the advanced section and drag it onto the page, inside the Container or Section where the tour should appear.
4. Double-click the element to open the code editor.
5. Paste your iframe snippet and click Save & Close.

The same pattern appears in Webflow's own guide to embedding a third-party widget, which uses the Code Embed element for an external widget.

If you want a practice run first, Webflow University's Code Embed exercise walks through adding small pieces of code at different levels of your site.

How much code can you paste?

A tour iframe is tiny, usually a few hundred characters. Webflow now allows up to 50,000 characters of custom code in Code Embed elements, page settings and CMS Rich Text fields, so the limit will not get in your way.

Step 3: Make the tour responsive

Pasting the iframe alone often produces a tour with a fixed width. On a phone it either overflows the screen or leaves an awkward gap. The usual fix is an aspect-ratio wrapper, described on Webflow's virtual tours integration page.

1. Add a Div Block and place your Code Embed inside it.
2. Give the Div Block a class, for example tour-wrapper.
3. In the Style panel, set the wrapper to position: relative, width: 100%, and a top padding of 56.25%. That percentage gives a 16:9 shape.
4. Make sure the iframe inside uses position: absolute, width: 100% and height: 100%, as in the snippet above.
5. Set a maximum width on the wrapper if you do not want the tour to fill a very wide screen.

Choosing a ratio

There is no single right answer. A wide tour suits a full-width section. A taller one gives phone visitors more of the panorama to look at. You can set different padding on the Tablet and Mobile breakpoints in Webflow, which is a good way to give small screens a taller frame without changing the desktop design.

For more on phone behavior, including tap targets and loading, we wrote a separate virtual tour mobile optimization guide.

Step 4: Preview, publish and test

Be aware that Webflow's Designer canvas can show custom code differently from the live site. Webflow's Custom Code help section covers previewing and the difference between the canvas and the published page. The reliable test is simple:

1. Click Publish to your staging domain (the webflow.io address) first.
2. Open the page on your desktop browser and check that the tour loads and responds to dragging.
3. Open it on a real phone. Test portrait and landscape, and try the fullscreen button.
4. Check that scrolling the page past the tour still works. If a touch on the tour traps the scroll, increase the space around the embed so visitors have somewhere to swipe.
5. Publish to your live domain.

Placing the tour where it works hardest

The tour should sit where a visitor already wants to see the space. A few patterns that work:

• Property or room pages: put the tour directly under the main photo gallery, with the price and key details nearby. We cover this in more depth in our embedded property tour website guide.
• Event venues: place it beside the capacity and layout information. See our guide to embedding a venue tour on an event website.
• Hotels, restaurants and showrooms: use a dedicated "Look around" section above the booking or contact form.
• Portfolios: give each project its own page and its own tour rather than stacking many iframes on one page.

If you manage many listings or rooms, a Webflow CMS collection can help. Webflow supports dynamic data in custom code embeds, pulling values from CMS fields into your code. In principle you can store each tour URL in a CMS field and have one template serve every page. Test this on one item before rolling it out.

Keep the embed scoped to the page

Webflow lets you add custom code at the layout level, the page level and the site level, and placement decides what the code affects. An iframe belongs in the layout, inside a Code Embed on the page that shows the tour. Any helper script or style should be limited to that page as well, instead of running across the whole site. That keeps the rest of your pages light.

Page speed also depends on how Google finds and understands your tour pages. If you want help with the search side on Webflow, a tool for automating SEO on a Webflow site can handle keyword research, content planning and technical audits while you focus on the tours. For the tour's own load time, see our notes on virtual tour performance optimization.

When the tour does not load

Webflow's help center says that custom code may conflict with Webflow's underlying functionality, and its support team cannot troubleshoot custom code. According to Webflow's virtual tours integration page, problems are handled through the Webflow Community and the tour provider's own support. That makes a short checklist useful.

Curly quotes are a common culprit when code is copied from a document or email. Paste into a plain text editor first, then into Webflow.

Privacy, access and accessibility

A few choices are worth making before launch.

Private tours. If a tour is for a client only, such as an unlisted property or a project in progress, restrict access rather than relying on an unpublished link. We explain the options in when and why to restrict access to a virtual tour and in our guide for agents who need private tours.

Visitor data. If your site serves US visitors and collects any data around the tour, read our piece on virtual tour data privacy for US operators.

Keyboard and screen reader use. Give the iframe a meaningful title, and offer the key facts about the space in regular text on the page too. Hotspot design matters as well. Concept3D's accessibility recommendations for tours note that hotspots can be reached by keyboard in 360° tours, which is a useful benchmark when you choose tour software.

Branding. If you want the tour viewer to match your Webflow design, see our guide to custom CSS for virtual tours that survive updates.

Our perspective: own the tour, embed it anywhere

We see the same pattern with the people who use Simple Virtual Tour. They have a good website, in Webflow or elsewhere, and they want the tour to feel like part of it rather than a link to someone else's page. An iframe achieves that, but only if the tour behind it is under your control.

That is why we offer two ways to run Simple Virtual Tour. You can use the cloud-hosted version on a monthly plan, or buy the self-hosted software once and run it on your own server with full source code ownership. With self-hosting you decide where the tour lives, which domain it sits on and who can see it. That is useful for agencies, photographers and anyone building tours for clients, and for organizations that care where their data is stored.

Our advice for Webflow users is practical. Start with one tour on one page, get the responsive wrapper right, test it on two or three real phones, and only then roll the pattern out across your site. Most embedding problems come from skipping the test, not from the code.

— Andrea

Create your tour with Simple Virtual Tour

If you do not yet have a tour to embed, you can begin with the Free Forever plan and move up when you need more. Paid cloud plans run from XS (Starter) at 2.99 € per month to XL (Enterprise) at 49.99 € per month, with S (Creator) at 5.99 €, M (Professional) at 9.99 € and L (Business) at 19.99 € in between. If you prefer to host the software yourself, CORE is a one-off $79, with optional plugins such as the Google Street View plugin at $59 and the A.I. Tools plugin at $39. You can compare everything on the Simple Virtual Tour plans page, or go straight to buy now.

FAQ

Can I embed a virtual tour in Webflow without a paid plan?

You can build and test the page on a free Webflow site, but the custom code limits and publishing options depend on your plan. Check Webflow's update on custom code limits, which refers to paid sites and workspaces. If your tour is for a business, a paid site on your own domain is the sensible setup.

Why does my virtual tour look blank in the Webflow Designer?

The Designer canvas does not always show custom code the way the live page does. Publish to your staging domain and view the page there. If the tour is still blank, open the browser console and look for a "Refused to display" message, which usually means the tour host is blocking framing.

How do I make the embedded tour fit on mobile?

Place the Code Embed in a Div Block set to position: relative, width: 100% and a top padding of 56.25% for a 16:9 frame. Then set the iframe to position: absolute with 100% width and height. You can use a larger padding value on the Mobile breakpoint if you want a taller view on phones.

Does Webflow support help if my embed fails?

No. Webflow's help center states that its support team cannot troubleshoot custom code. Use the Webflow Community and your tour provider's support, and test with a minimal snippet to isolate the problem.

Can I use one template for many tours?

Yes, in principle. Store each tour's URL in a CMS field and bind it to the embed with dynamic data in custom code embeds. Try it with one item first, and check that the result works on the published site.

Sources

• Increased custom code character limit | Webflow Updates
• Integrate Virtual Tours with Webflow | Webflow
• Custom code embed | Webflow Help Center
• Custom Code | Webflow Help Center
• Use dynamic data in custom code embeds | Webflow Help Center
• Code Embed element | Webflow University
• Try it: use the Code Embed element | Webflow University
• Where you can add custom code | Webflow University
• How to embed a Booking.com widget in Webflow | Webflow Blog
• Tour Builder Web Accessibility Recommendations | Concept3D Help

Recommended

• How to Embed a Virtual Tour on a Website: Responsive Guide
• Embedded Property Tour Website: Your 2026 Guide
• How to Create a Real Estate Virtual Tour: Step-by-Step Guide