How to Embed a 360 Virtual Tour on Your Website
Embedding a 360 tour is five steps: decide where on the page it earns its place, embed it behind a click-to-load poster image rather than auto-loading it, size the container responsively, test on a phone on a real connection, and then check that the page still loads fast enough. The technical part is one line of code; the four steps around it are where tours go wrong.
In our experience, complaints about an embedded tour usually turn out to be about the page, not the tour.
Run 360 virtual tours through these stages in order and the common failures do not happen.
| Stage | Decision made | Artifact produced |
|---|---|---|
| Stage one: decide where it goes | The single page and position where the tour lives | A wireframe or annotated screenshot showing it, agreed before anyone touches code |
| Stage two: embed behind a poster, not on load | Click-to-load rather than autoload | The poster image and its caption |
| Stage three: size the container | The aspect ratio and its mobile behavior | The container styling, applied once and reused everywhere a tour appears |
| Stage four: test on a phone, on cellular | Whether it ships | A short pass or fail note per device tested, kept with the page |
| Stage five: recheck page speed | Whether the embed stays as built | The before and after measurement, recorded rather than remembered |
Stage one: decide where it goes
A tour placed below the contact form and three content blocks gets seen by almost nobody. Put it where the decision is being made, which on a listing page is usually directly under the hero and the key figures.
Decision made at this stage: the single page and position where the tour lives. Artifact produced: a wireframe or annotated screenshot showing it, agreed before anyone touches code.
Stage two: embed behind a poster, not on load
A tour that loads automatically pulls a large payload on every page view, including from people who never intended to use it. That is the leading cause of a slow listing page.
Use a still image from the tour as a poster with a clear play control, and load the tour only when someone clicks. Decision made: click-to-load rather than autoload. Artifact produced: the poster image and its caption.
Stage three: size the container
Set an aspect ratio on the container rather than a fixed pixel height. A fixed height that works on a laptop produces a letterbox strip on a phone and a stretched panorama on a wide monitor.
Decision made: the aspect ratio and its mobile behavior. Artifact produced: the container styling, applied once and reused everywhere a tour appears.
Stage four: test on a phone, on cellular
Not on a desktop browser resized narrow. On an actual handset, off office wifi. Check that dragging to look around does not fight the page scroll, that the fullscreen control works, and that the tour is usable in portrait.
Decision made: whether it ships. Artifact produced: a short pass or fail note per device tested, kept with the page.
Stage five: recheck page speed
Measure the page before and after. With click-to-load the difference should be small; if it is not, something is loading that should not be.
Decision made: whether the embed stays as built. Artifact produced: the before and after measurement, recorded rather than remembered.
You still need a standalone link
An embed serves the website. It does not serve the agent replying to an enquiry from a phone, the tenant rep forwarding it to a committee, or the social post that needs a preview image. Those need a direct URL to the tour itself.
Ask for both at delivery, check that the standalone link opens without an account or an app, and confirm it produces a sensible title and preview image when pasted into an email or a message. A link that previews as a blank gray box gets clicked far less often, and that is a five minute fix at build time and an annoying one afterward.
The stage nearly everyone skips
Deciding who checks the embed after the next website change. Theme updates, plugin changes and redesigns break embeds silently, and a broken tour looks worse than no tour.
Name a person and a cadence, quarterly is enough, and put the check on their calendar. This costs nothing and prevents the way we most often see a tour quietly stop working.
Not sure where it belongs on your page? Send us the URL and we will mark up where it should sit.
How to start
Open the page the tour is meant to support and decide the position before you ask anyone for embed code.
Related reading: 360 tours versus interactive floor plans covers what belongs on a listing page, build-to-rent leasing covers self-serve use, office leasing covers commercial listings, and what a package includes covers what you receive.
Send us your page URL and we will deliver an embed built for it.