RoomTour

How to embed a virtual tour on your website (code included)

· 2 min read

A virtual tour sells more on your own website than as a link people may never click. Embedding it means visitors can look around the property without leaving your page. It takes one copy and one paste, as long as you use the right code.

The embed code

Any tour that can be embedded gives you an <iframe>. This is the version we recommend, already responsive (it fills the width and keeps a 16:9 shape):

<div style="position:relative;width:100%;aspect-ratio:16/9">
  <iframe src="https://roomtourapp.com/embed/your-tour"
    title="360° virtual tour"
    allow="fullscreen; gyroscope; accelerometer; magnetometer; xr-spatial-tracking"
    allowfullscreen loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"></iframe>
</div>

What each part does:

  • aspect-ratio:16/9 on the box keeps the tour's shape on any screen. Without it many themes squash the iframe to 150 pixels high.
  • allow="…gyroscope; accelerometer…" lets visitors look around by moving their phone. Without it, the browser blocks the sensors inside the iframe.
  • allowfullscreen lets the fullscreen button work.
  • loading="lazy" means the tour only loads when the visitor scrolls to it, so your page stays fast.
  • title is read out by screen readers. Describe the property.

With RoomTour you don't have to write it: the tour's page in the web dashboard has the code ready to copy, with your tour's address.

Where to paste it

  • WordPress (block editor): add a Custom HTML block and paste the code. In the classic editor, switch to the Text tab first.
  • Wix: Add → Embed code → Embed HTML, paste the code and stretch the box to the width of the section.
  • Squarespace: add a Code block and paste the code.
  • Webflow: drag an Embed element onto the page and paste the code.
  • Plain HTML: paste it wherever the tour should appear.

Property portals

Portals don't let you paste embed code: they have a field for the virtual tour link. Use the tour's short link there, not the embed code. Our step-by-step guide covers how to make a virtual tour with your phone from capture to publishing.

Common problems

  1. The tour shows as a thin strip. The theme ignores the iframe's height. Use the wrapper with aspect-ratio above.
  2. Looking around by moving the phone doesn't work. The allow attribute is missing or your site builder strips it. Paste the full code.
  3. The page is slow. Check that loading="lazy" is still there and that there is only one tour per page.
  4. Two logos. If your website already carries your brand, use the tour's embed mode, which hides the tour provider's logo. RoomTour's /embed/ addresses do this.

Frequently asked questions

How do I embed a virtual tour on my website?

Copy the tour's embed code (an iframe) from your tour provider and paste it into an HTML or embed block on the page. Use a responsive wrapper so it keeps its shape on phones.

What does a virtual tour embed code look like?

It is an iframe pointing at the tour, with permissions for fullscreen and the phone's motion sensors so visitors can look around by moving their phone. The responsive version wraps it in a box with a fixed aspect ratio.

Will an embedded tour slow down my website?

Not if it loads lazily: with loading="lazy" the tour only starts loading when the visitor scrolls to it. Avoid putting several tours on the same page.

Can I embed a virtual tour on a property portal?

Portals usually don't accept embed code. They have a field for a virtual tour link instead: paste the tour's link there.

More articles