A good virtual tour on your website lets a buyer walk through an apartment that is still a construction site, compare two hotel rooms before booking, or turn a machine over to see where the cables connect. On a property, hospitality or product website, it can settle questions photos never quite answer.
It can also add megabytes to a page, trap keyboard users, make some visitors queasy and hide room sizes where Google and screen readers may never find them. The technology is rarely the problem. How it is chosen and embedded usually is.
The short answer
Add a virtual tour, 3D viewer or interactive floor plan when it answers a buyer’s question that photos and text can’t: how an unbuilt space will feel, which unit to choose, or how a product fits together.
- Start with the lightest option that answers it. A video walk-through or interactive floor plan often beats a full 3D scene.
- Embed an existing tool rather than building a viewer from scratch.
- Load it only on request, behind a poster image and a clear button.
- Write everything important on the page too. The tour adds to the text; it never replaces it.
Virtual tour website options, from light to heavy
Further down the table, cost and page weight rise and fewer visitors can use the result fully.
| Option | Best for | Weight and effort |
|---|---|---|
| Video walk-through | A guided story in a set order | Low; plays on any device |
| Embedded 360 tour | Units, hotel rooms, venues | Low to medium; hosted by a tour platform |
| Interactive floor plan or unit picker | Developments with many units | Medium; can be plain HTML and SVG |
| 3D product viewer | Products where shape or fittings matter | Medium; needs a clean 3D model |
| Configurator | Products with many combinations | High; a software project in itself |
| Custom WebGL or WebXR experience | Launches, sales galleries, events | Highest; bespoke development |
Video walk-throughs
Underrated. A video works everywhere, needs no instructions and lets you set the route: lobby to balcony, the view at dusk, the machine running. The trade-off: visitors can’t choose where to look.
Embedded 360 tours
Stitched panoramas or scanned spaces, hosted on a tour platform and embedded in an iframe. Visitors look around and step between hotspots; scanned tours often add a doll’s-house view of the whole floor. For unfinished buildings, 360 renders can come from the architect’s 3D model, labelled as artist’s impressions and matching the plans buyers sign against.
Interactive floor plans and unit pickers
Often the most useful option, and one of the lightest: a building elevation or site plan where each unit is clickable, shows its status and leads to its plan, size and price. Built in HTML and SVG rather than a canvas, it stays readable by search engines and screen readers. Show availability in words, not just colour: status shown by colour alone fails WCAG. Our guide to property developer websites that win buyer enquiries covers what each unit page needs.
3D product viewers
A model in the glTF format (GLB is its single-file version), shown in a component such as Google’s open-source model-viewer or on a hosted 3D platform. Visitors rotate and zoom and, on supported phones, place the product in their room with augmented reality. The catch: engineering CAD files are far too detailed for a browser and need converting, simplifying and compressing first (Draco for geometry and KTX2 for textures are common choices).
Configurators
Visitors choose finishes and options and watch the product, often with its price, update. Every variation must be modelled and priced, with rules for what fits together, usually on a licensed platform or custom-built. It pays only when customers genuinely struggle to picture their choices.
Custom WebGL and WebXR experiences
Bespoke 3D worlds built with WebGL, the browser technology behind most 3D on the web (and increasingly its newer counterpart, WebGPU), with immersive headset versions through the WebXR Device API. Striking at a launch, but the heaviest option, and WebXR support varies by browser and device. Treat a headset experience as an extra, never the only way in.
Where tours and 3D earn their place
List the questions buyers ask your sales team, then find the lightest answer to each.
| The buyer’s question | Lightest good answer | When to go heavier |
|---|---|---|
| “How big is the living room?” | Floor plan with dimensions | 360 tour of the show unit |
| “Which high-floor units are left?” | Unit picker with current status | Rarely needed |
| “What will this room feel like?” | Wide photos and a short video | 360 tour |
| “Where are the ports and fixings?” | Annotated photos from every side | 3D viewer |
| “How will it look in our colour?” | Swatches with real photos | Configurator |
| “Will it fit in our space?” | Dimensioned drawing | Augmented reality view |
The strongest cases are spaces not yet built, where off-plan buyers commit on plans and renders; spaces people choose between, such as room types on a hotel direct booking website; and products where shape decides the sale, from machinery to complex assemblies (see e-commerce product page design for the rest).
Tours rarely earn their place as a spinning object in a homepage hero, for services with nothing physical to show, or when nobody will update them after the finishes change. An out-of-date tour is worse than none.
The trade-offs nobody shows in the demo
Demos run on fast laptops. Many visitors use a mid-range phone on mobile data.
Page weight and Core Web Vitals
Tour scripts, panoramas and models can outweigh everything else on the page. Loaded straight away, they compete with your hero image for bandwidth (delaying Largest Contentful Paint) and keep the phone busy, so taps feel sluggish (Interaction to Next Paint). An embed without reserved space pushes content around (Cumulative Layout Shift). Google rates LCP within 2.5 seconds, INP within 200 milliseconds and CLS of 0.1 or less as good, at the 75th percentile of real visits; Core Web Vitals explained covers each.
Check it yourself. In the Network panel of Chrome DevTools, reload the page and filter by the tour provider’s domain to see what it downloads before anyone touches it. Then check which third-party resources PageSpeed Insights flags on mobile.
Content search engines and screen readers can’t read
Text drawn in a 3D canvas is just pixels, unreadable to search engines, AI tools and screen readers unless the viewer adds an accessible layer. Text inside a third-party iframe lives on the provider’s page, and Google may not credit it to yours. Room names, dimensions and hotspot labels that exist only inside the tour are, at best, hard to find.
Keyboard, touch and motion
- Keyboard. You should be able to Tab into the tour, operate it and Tab out; a keyboard trap fails WCAG 2.2 at Level A.
- Dragging and pinching. Drag-to-rotate needs a non-dragging alternative such as rotate buttons (Dragging Movements, Level AA, new in 2.2), and pinch-to-zoom needs a single-tap one such as zoom buttons (Pointer Gestures, Level A). Hotspots should be at least 24 by 24 CSS pixels or well spaced (Target Size, Level AA). On phones, watch for viewers that capture every swipe so visitors can’t scroll past.
- Motion. Auto-rotation and swooping transitions can make people with vestibular disorders dizzy. Anything that starts moving by itself and lasts more than five seconds alongside other content needs a way to pause, stop or hide it (WCAG Level A). Honour
prefers-reduced-motionwith no auto-spin and jump cuts instead of fly-throughs; micro-interactions and motion design covers the wider principles.
Ownership and running costs
Tour platforms are usually subscriptions. Ask what happens to embeds if you stop paying, whether you can export files, whether hotspot labels can appear in the languages your customers use, and whether the embed sets cookies your consent banner must cover.
How to embed a virtual tour without slowing the page
Show a picture first, and load the heavy part only when someone asks for it, whether it’s a tour, a 3D viewer or a video.
- Start with a poster image, compressed and sized so nothing shifts. Near the top of the page it may be your LCP element, so don’t lazy-load it; image optimisation covers the details.
- Put a real button on it, labelled with what happens, such as “Start the 360° tour” or “View in 3D”.
- Load the tour on click, inserting the iframe or viewer script only then, with a descriptive
titleon the iframe for screen readers. If it must load without a click, keep it below the fold withloading="lazy", so the browser fetches it only as it nears the screen. - Keep the essentials above it. Price, availability and the enquiry button come first. Add full-screen and close controls, returning focus to the button on close.
- Load scripts only where they’re used. A WordPress tour plugin that loads its viewer on every page slows pages that never show a tour; see third-party scripts and website speed.
- Measure it. Record a GA4 event when someone starts the tour and compare enquiry rates, remembering keen buyers are likelier to open it anyway. GA4 conversion tracking walks through the set-up.
A text alternative for every tour
Write the tour down. Everything it shows should also be on the page as text and images with alt text, because that is what search engines, AI assistants, screen reader users and people on slow connections receive.
- Property unit: room dimensions, orientation and view, ceiling height, finishes, and the key floor plan measurements in text.
- Hotel room: size, beds, view and accessibility details such as step-free access, which a panorama can’t reliably convey.
- Product: dimensions, weight, materials, connections and photos from each side.
Caption walk-through videos and mark them up with VideoObject structured data, which Google supports for video.
Should we add this? A checklist
If you can’t tick the first box, spend the budget on photography, floor plans and clearer copy instead.
Frequently asked questions
Does a virtual tour help SEO?
Not directly. Search engines can’t read text drawn inside a canvas, and content in a third-party iframe may not be credited to your page, so the search value lies in the text, images and structured data around the tour. What a tour can do is help visitors make up their minds.
How do we add a virtual tour to a WordPress site?
Most tour platforms provide an iframe embed code for a Custom HTML block or your page builder’s code element. Wrap it in a click-to-load pattern with a poster image, and avoid plugins that load the viewer on every page.
Is a 360 product spin or a 3D model better?
A 360 spin is a sequence of photos, so it is photographically true but shows only the angles you shot. A 3D model takes more work up front, but one model can serve a viewer, a configurator, augmented reality and product renders.
What to do next
Choose the lightest option that answers a real buyer question, load it on request, make it work for everyone and back it with text. As with much of the future of websites, rich experiences are easier to build than ever, and just as easy to overdo.
Planning a new property, hospitality or product website? Our website design and development work starts with what buyers need to see on each page, including where a tour or floor plan belongs and how it loads. Already have a site? A free website audit gives you a baseline for your key pages before you add anything heavy.