API and Embed Automation

You will connect a hosted page to an embedded tour and react to what the visitor does. The viewer sends three events to the parent page and accepts two commands, which is enough to build a tour that follows the content of the page and to automate publishing from your own tools.

Listen to the viewer

The embedded viewer posts a message to its parent window when the tour is ready, when the visitor changes scene and when a hotspot is clicked. Subscribe to the messages, check the type field and read the payload. The tourReady event tells you when the first frame is on screen and the viewer can be measured.

• tourReady — the tour has loaded and the first scene is visible.
• sceneChanged — the visitor moved to another scene, with the scene id.
• hotspotClicked — a hotspot was activated, with its identifier.

Send commands

1. Keep a reference to the iframe element of the tour in the code of your page.
2. Send the commands only after the tourReady event has arrived.
3. goToScene opens the scene with the given id, so the visitor can follow the text on the page.
4. setUiMode switches the interface between the full and the minimal view.

Put it together

const frame = document.querySelector("iframe");

frame.addEventListener("message", (event) => {
  const { type, payload } = event.data ?? {};
  if (type === "tourReady") console.log("tour is ready", payload);
  if (type === "sceneChanged") console.log("scene", payload.scene);
  if (type === "hotspotClicked") console.log("hotspot", payload.hotspotId);
});

frame.contentWindow.postMessage({ type: "goToScene", payload: { scene: 4 } }, "*");
frame.contentWindow.postMessage({ type: "setUiMode", payload: { mode: "minimal" } }, "*");