Developers

Embed an event plan

Put the event plan your planner shared with you on any page: a proposal, your website, your client portal. It stays read-only, updates when the planner publishes changes, and asks for the passcode inside the frame when the plan has one.

On a website: the script

Copy the snippet from the plan's Embed panel, or write it yourself. The frame grows to the plan's height, so it reads as part of your page rather than a box that scrolls, and when a visitor picks a section in the plan's menu the script scrolls your page to it.

<script async src="https://app.xomo.io/embed/v1.js"></script>
<div data-xomo-plan="YOUR_LINK_TOKEN"></div>

data-xomo-plan	The link token from the end of the plan's link. Required.
data-section	Show one section alone: details, rooms, walkthroughs, inventory, seating or documents.
data-diagram	The room the Rooms section opens on.
data-view	3d opens the room in 3D, when the planner allows it.
data-header	0 hides the title strip.
data-origin	Where the plan lives, when the script can't tell from its own address (a module script, or a tag added after the page loaded).

In a proposal tool: the iframe

Most proposal tools strip scripts, so use the iframe. One section (a single room, the details or the documents) fits a fixed-height frame best. The same section, diagram, view and header options go in its address.

<iframe
  src="https://app.xomo.io/embed/plan/YOUR_LINK_TOKEN?section=rooms&header=0"
  width="800" height="500" style="border:0;" title="Event plan"
  loading="lazy" allow="fullscreen" allowfullscreen></iframe>

From JavaScript

window.Xomo.plan(element, options) does what the attribute does, and returns a handle to move the plan along.

const plan = window.Xomo.plan(document.getElementById("plan"), {
  token: "YOUR_LINK_TOKEN",
  section: "rooms",
  onEvent: (event) => console.log(event.type, event),
});

plan.navigate("seating");   // show another section
plan.destroy();             // remove the frame and stop listening

Events

The element receives a custom event for each thing the plan reports. The script only listens to the plan's own frame.

document.getElementById("plan").addEventListener("xomo:section", (event) => {
  console.log("now showing", event.detail.section, event.detail.diagram);
});

xomo:ready	The plan has loaded in the frame.
xomo:resize	The plan's height changed; the script has already resized the frame. detail.height is in pixels.
xomo:section	The visitor moved to another section or room. detail.section, detail.diagram.
xomo:locked	The plan is waiting for its passcode.
xomo:unlocked	The passcode was accepted.
xomo:error	No plan to show: detail.code is not-found, unavailable or rate-limited.

Good to know

The v1 in the script's address is its version: within it, new options and events may be added, nothing is taken away.
Never put a plan's passcode in your page. Viewers type it inside the frame, and it lasts for their browser tab.
If the planner turns a link off, the frame shows that the plan isn't available, and you get xomo:error.