Embed a virtual tour on any website

An embedded tour is the cheapest distribution channel a virtual tour has: it lives inside a page that already has traffic, a brand and a call to action. The implementation is one iframe tag, and almost everything that goes wrong afterwards comes down to four or five settings. This guide covers the embed itself, the parameters that control how a tour starts, the message API for driving the viewer from your own code, and the domain allow-list that decides where the embed is allowed to run.

The one-line embed

<iframe
  src="https://studio.mango360.app/view/9f2c4a7b"
  width="100%"
  height="620"
  frameborder="0"
  allow="fullscreen; xr-spatial-tracking"
  allowfullscreen
  style="border:0"
  title="Virtual tour"></iframe>

The height is the parameter most teams get wrong. A 360° viewer needs vertical room: 560–720 px on desktop, and on mobile roughly 70 % of the viewport height with the width set to 100 %. Do not set a fixed height below 480 px, because the scene gets cropped and the zoom controls are pushed off screen.

Query parameters worth knowing

• autoplay=1 starts the tour in guided mode as soon as it loads, without waiting for a click
• scene= names the id of the scene the tour opens on, for a specific room or floor
• ui=minimal hides the toolbar and leaves only the navigation and zoom controls
• lang=ru or lang=en sets the interface language and the default text of the tour
• brand=0 removes the platform badge when your plan allows white-label branding

Drive the viewer with postMessage

The viewer accepts postMessage commands, so your page can open the tour on a specific scene, change the interface or react to visitor actions without reaching into the iframe. The receiving side always checks the event origin before trusting a payload, and the tour id is required on every command.

const frame = document.querySelector("iframe");
frame.contentWindow.postMessage(
  { type: "mango360:goto", tourId: "9f2c4a7b", scene: "lobby" },
  "https://studio.mango360.app"
);

Messages are the mechanism to use when the tour should react to the rest of the page: opening a room when a guest picks it in a booking widget, or closing the viewer when a payment step completes.

Stop the embed from being blocked

1. Add every domain that embeds the tour to the allow-list in the project settings; an embed from an unlisted domain is refused
2. Keep the iframe tall enough that the viewer never falls back to a mobile layout inside a desktop column
3. Use loading="lazy" only when the tour sits far below the fold; a lazy iframe in a hero section delays the first open
4. Check the Content Security Policy of the host page: frame-src has to include the viewer domain

For a branded experience that is not embedded at all, the Business plan adds a custom domain, a logo, accent colours and single sign-on, so the tour lives on your own host and your team controls who is allowed to publish it.