Add VR mode to a tour: headsets and Cardboard viewers
Show a VR button in your tour and see what it starts: a headset session or a split-screen phone view. VR is gaze-only, with no controllers.
Guide5 min read Updated
The short answer
VR mode is a button that you add to a tour in its Design tab, and it is off by default. A visitor who presses it gets an immersive VR session when their browser can start one, and otherwise a split-screen view made for a phone in a viewer.
VR is gaze-only: a visitor looks at a spot for 1.5 seconds to use it. There are no controllers, no laser pointing and no teleporting, on a Meta Quest or on any other headset. We have not tried VR on a headset or in a Cardboard viewer: this page describes what the player sends and shows, read from its code.
What a visitor sees
| Detail | Immersive session | Split-screen view |
|---|---|---|
| When | The browser says it can start one, and does | Anything else, such as no headset or a refused session |
| The picture | The page draws the room into the session | Two copies of the room side by side, one for each eye, on a black page |
| Looking around | The session's own tracking | The phone's motion, if the browser sends it (the player does not ask permission to read it), otherwise a drag |
| Leaving | No exit button of the player's own: the view closes when the session ends | A button ✕ Exit VR, top right |
In both views:
- Each link hotspot is a cyan circle. A thin white ring marks the middle of the view: hold it on a circle for 1.5 seconds to go to that room.
- A tour with more than one scene also shows
◀ PREVandNEXT ▶buttons, below the point you faced when the room opened. They go to the previous and the next scene in the tour's order and wrap around at the ends. - Nothing else is drawn: info, video, audio and Surface Media hotspots, the floor plan and the menus are not in VR. There is no setting for stereoscopic photos.
Add the VR button
The owner and, by default, an Admin collaborator can do this. The Design tab is not open to Editors or Viewers.
- Open the tour's Design tab. Under Component Modules click Top Nav Bar - Dropdown.
- Click Arrange & Toggle Top Icons to open the list, and tick VR Mode Toggle. Keep Show Title Bar ticked, or with the bar off leave Just Icons ticked (in the Advanced view): the icon then floats at the top right. Both the Basic and the Advanced view show the list.
- Click Save & Render. The preview shows a goggles icon with the tooltip
Enter VR, which you can press there or on the Preview tab.
The same button is in two more places:
| Module | What to tick | Default |
|---|---|---|
| Icon Bar | Enable Icon Bar, then VR Mode Toggle under Arrange & Toggle Elements | The bar is off. Its toggle is ticked |
| Top Nav Bar - Multi Menu | VR Mode Toggle under Arrange & Toggle Icons | Off |
On a screen 768 pixels wide or narrower the Mobile Navigation settings apply. They show only in the Advanced view. Tick VR Goggles Button under Top Bar Features, as well as the Top Nav Bar - Dropdown's VR Mode Toggle. The VR Goggles Button under Bottom Bar Features draws an icon that does not start VR.
If the page has none of the Top Nav Bar - Dropdown, Icon Bar or Top Nav Bar - Multi Menu buttons, and the visitor's browser says it can start an immersive session, the player adds a floating Enter VR button at the bottom of the page. It is not added in the editor or on the Preview tab.
Who sees the button
- Free plan. A tour in a free theme, the Default Theme, shows visitors your design on its public page and in embeds. A tour in a Pro theme that has never been hosted shows the free Default look, and a free download is the Standard design: neither has a VR button. A paid plan, or a Vault that hosts the tour or has hosted it, gives visitors your design in any theme. The editor, the Preview tab and the Design page always show your design. The floating
Enter VRbutton does not depend on the plan. - Refresh. Save & Render refreshes the stored copy that visitors get, unless Draft Workflows is on: then nothing reaches visitors until you click Publish Changes. See My changes do not show for visitors.
- Layout and Explore. The buttons belong to the player's default tour layout; the bare
marzipanolayout has none. The Explore page loads the player only after a visitor clicks the play button on its picture. - Embeds. The code from the Publish tab has an
allowlist that includesxr-spatial-tracking, as the Explore page's frame has (code copied from the Publish tab earlier has none: copy it again). We have not tested what that changes: see Fix embed problems.
Troubleshooting
There is no VR button. Check that VR Mode Toggle is ticked, that Show Title Bar is ticked (or Just Icons, with the bar off), and that you clicked Save & Render. If the tour wears a Pro theme, has never been hosted and the account is on a Free plan, visitors get the free Default look, which has none.
The button does nothing on a phone. It is probably the VR Goggles Button under Bottom Bar Features. Use the one under Top Bar Features, or the Top Nav Bar - Multi Menu's icon.
I see two copies of the room and no ✕ Exit VR button. The player hides that button before it asks the browser for an immersive session. If the browser then refuses, the split-screen view opens without it. Reload the page to leave.
The split-screen view does not follow my phone's movement. Drag with a finger instead. The player only listens for motion data and never asks for permission to read it.
Next steps
Was this article helpful?