A hosted virtual tour is a web page, which means putting it on your own site is an iframe. The code is trivial; the three things that break are the height, the mobile behaviour, and the permissions the viewer needs to use a phone’s motion sensors.

Link to itOpens in a new tabNothing to size or maintainWorks in emails and messagesThe visitor leaves your pageRight for portals and mailshotsEmbed itSits inside the property pageThe visitor stays on your siteReads as part of the listingNeeds a height and permissionsRight for your own property pages
Both from the same URL, so this is not a decision you have to make once. Embed on your own property pages, link everywhere you do not control the page.

The embed

Paste this where the tour should appear, replacing the URL with your tour link:

<div style="position:relative;width:100%;aspect-ratio:16/9">
  <iframe
    src="https://spatia.build/tour/YOUR-TOUR-ID"
    title="Virtual tour"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
    loading="lazy"
    allowfullscreen
    allow="fullscreen; accelerometer; gyroscope; magnetometer"
  ></iframe>
</div>

The three things that go wrong

Height. An iframe has no intrinsic height, so a percentage height collapses to nothing and the tour appears as a thin strip. The wrapper above solves it with aspect-ratio, which keeps the shape at every width without any JavaScript. A fixed pixel height is the common mistake: it looks right on the desktop it was tested on and wrong everywhere else.

Motion permissions. The allow attribute is what lets a phone pan the tour by being moved. Without it the tour still works by dragging, but the single most impressive thing it does silently stops happening on mobile.

Fullscreen. Include allowfullscreen. On a phone, fullscreen is how most people will actually view it.

Common platforms

  • WordPress. Use a Custom HTML block, not the visual editor, which strips iframes. Some security plugins strip them too, so check the published page rather than the preview.
  • Squarespace and Wix. Use the embed or custom code block. Both wrap it in their own container, so keep the aspect-ratio wrapper.
  • Agency CRM property pages. Most have a media or virtual tour URL field that handles the embed for you. Check whether it wants the URL or the full iframe, since pasting the wrong one is the usual cause of a blank panel.

Do not lazy-load it above the fold

loading="lazy" is right for a tour further down a property page and wrong for one at the top, where it delays the most engaging element on the page. Drop the attribute if the tour is the first thing a visitor sees.

Where the tour comes from

Any hosted tour will embed this way. What differs between platforms is what happens afterwards: several bill per tour per month, so an embed on a property page from two years ago is either still on the invoice or is now a blank panel.

Spatia includes hosting in the one-off cost of the tour, so an embed keeps working and the bill does not grow with the back catalogue. Tours are built from the photographs already taken for the listing, which is why putting one on every property page is realistic rather than a project. The routes compared by effort are here.

For the portals rather than your own site, Rightmove and Zoopla each take the plain URL rather than an embed.