How do I embed a tour on my website?
Copy the iframe snippet, paste it into WordPress, Tilda, Webflow, Bitrix or plain HTML, and steer the player with URL parameters.
Every published tour comes with an embed code. Paste it into the page where the tour should appear, set the width and height to match your layout, and the player loads in an iframe.
Get the code
- Open the project and choose Project → Publish.
- Switch to the Embed tab and copy the snippet.
- Paste it into the page source or into a custom HTML block of your CMS.
Control the player with parameters
The player accepts query parameters. Use autoplay=1 to start the tour without a click, scene to open a specific scene, ui=minimal to hide the interface, and lang to set the interface language. Parameters can be combined, and the value of scene must match the scene name shown in the project, otherwise the player opens the first scene of the tour. The player fills the frame it is given, so set a fixed height on desktop and let it scale on small screens; 620 pixels is a good starting point.
<iframe
src="https://studio.mango360.app/embed/TOUR_ID?autoplay=1&scene=hall&ui=minimal&lang=en"
width="100%"
height="620"
frameborder="0"
allow="accelerometer; gyroscope; xr-spatial-tracking; fullscreen"
allowfullscreen
></iframe>Talk to the player from your site
The embed also exposes a postMessage API, so a button on your page can open a scene or read the current one. Listen for scene changes and send your own commands using the same message format, and keep the listener on your own domain while checking the origin of incoming messages, because the frame can be embedded by any site that has the link.
The embed only works for a published tour. If the frame stays empty, open the URL in a new tab: if the tour loads there, the problem is on your page rather than in the tour. A tour that is not published shows a not-found page inside the frame.
Still need help?
Can't find what you're looking for? Our support team is here to help.