Mango360 — interactive 360° virtual toursMango360
Back to the academy
Track 4. Publishing & Embedding

Embed Codes and Iframe Options

Embed a tour in any website with the iframe snippet and control playback with the autoplay, scene, ui and lang parameters.

6 min readLesson 2 of 4

You will place a live tour on a website with a single iframe snippet, and you will learn the four URL parameters that control how the embedded tour starts and how much interface it shows.

Get the snippet

Open the share dialog of the published tour and copy the embed code. The snippet is a standard iframe with the tour identifier already written into the source. Paste it into the HTML of the page, usually in the section that should hold the viewer, and keep the fullscreen permission so a visitor with a headset can switch the tour to VR mode.

  1. Open the share dialog of the published tour and copy the embed code.
  2. Paste the snippet into the page template where the viewer belongs.
  3. Save the page and open it in a private window to check the tour.
  4. Test the tour on a phone with a slow connection before going live.

Tune the parameters

  • autoplay=1 — start the tour automatically when the frame appears.
  • scene=3 — open the viewer on the third scene of the tour.
  • ui=minimal — hide the toolbar and keep only the navigation arrows.
  • lang=ru — start the interface in Russian, whatever the browser language is.

Only published versions can be embedded. A draft identifier in the source produces an empty frame and a message that the tour is not available.

The full snippet

<iframe
  src="https://studio.mango360.app/embed/your-tour-id?autoplay=1&scene=3&ui=minimal&lang=ru"
  width="100%"
  height="480"
  frameborder="0"
  allow="fullscreen; autoplay"
  allowfullscreen
  title="Virtual tour"
></iframe>