The embed element

One script tag and one element. No package, no build step, no version to pin.

<script src="https://www.rendemo.com/embed.js" async></script>
<rendemo-demo demo="<demo-id | workspace/slug>"></rendemo-demo>

Both demo forms resolve to a real, publicly-servable, framable route: a UUID resolves to /d/<id>, and workspace/slug resolves to /site/<workspace>/<slug>. Either form works inside the <iframe> the element creates on your site.

Three attributes are observed — demo, open and user — meaning changing them after mount takes effect. Everything else is read once, at connect.

poster="auto" (the default) shows a static still while the iframe is deferred — the element costs no iframe and no JS runtime beyond embed.js until someone clicks to start the demo.

• Source. A JPEG written to storage at publish time, from the capture’s first usable keyframe screenshot. It is generated best-effort — a failed screenshot never fails the publish. A demo without a usable frame simply has no poster: the <img> 404s, the element removes it on error, and the start button falls back to its own gradient background.
• Access. Gated identically to the demo it depicts — published, not password-protected, not expired. It never leaks a still of a protected or expired demo.
• ratio="auto" depends on it. The poster’s intrinsic width and height, once loaded, set the host’s aspect-ratio in inline mode — no extra request, since the poster was already fetched. Combining poster="off" with ratio="auto" inline leaves nothing to derive a size from, so the element falls back to an explicit aspect-ratio: 1.6 (16:10) rather than no size at all. In modal mode the panel always gets a numeric ratio, falling back to the same 1.6.

Load timeout

Inline mode only: once the visitor clicks the start button, the element waits up to 9 seconds for the framed demo to post ready. If it does not arrive — a deleted, expired or unpublished demo, or just a slow load — the element replaces its content with the same “This interactive demo could not be loaded” / “Open it in a new tab” fallback an unresolvable demo attribute gets, instead of leaving the visitor at “Preparing the interactive demo” forever. Modal mode has no equivalent timeout: opening the modal mounts the iframe directly, with nothing bounding how long it waits for ready.

The element listens for messages from the framed demo (origin- and source-checked) and re-emits the matching ones as DOM CustomEvents. Five names, and only these five — this is the whole contract surface, and it does not grow casually.

const demo = document.querySelector("rendemo-demo");

demo.addEventListener("rendemo:ready", () => analytics.track("demo_ready"));

demo.addEventListener("rendemo:step", (e) => {
  console.log(`step ${e.detail.n}/${e.detail.total}: ${e.detail.id}`);
});

demo.addEventListener("rendemo:complete", () => {
  // e.g. reveal a "Talk to sales" CTA once the visitor has seen the whole demo
  document.querySelector("#post-demo-cta").hidden = false;
});

demo.addEventListener("rendemo:lead", (e) => {
  analytics.track("demo_lead_captured", { where: e.detail.where });
});

A tour dispatches the same four of these it can (rendemo:ready, rendemo:step, rendemo:complete, rendemo:close) with tour-shaped details — see running a tour. A tour renders no in-card form, so rendemo:lead never fires for one.

Ask the MCP. rendemo_get_embed({ projectId, framework, mode }) returns everything needed to install a published demo — it fails with a clear message if the project has no demo yet, or the demo is not published:

• scriptTag and scriptLocation (where the tag goes for that framework),
• the snippet to drop where the demo should appear,
• wrapper source for next-app-router / next-pages / react / vue / svelte — empty for html, since there is nothing to wrap,
• the resolved url and posterUrl, and events — the same five names above, sourced from one place so the docs and the tool cannot drift.

framework defaults to next-app-router; mode defaults to inline.

mode="modal" builds a real dialog, not just a styled <div>:

• role="dialog", aria-modal="true", aria-label="Interactive product demo" on the dialog root.
• Focus trap via two visually-hidden, tab-focusable sentinel nodes bracketing the panel — not display:none, which would drop them from the tab order entirely. They catch focus leaving in either direction, including focus that walked out of the cross-document iframe, whose contents fire no event the parent could see. On open, focus lands on the close button, which is what keeps the very first Shift+Tab from escaping.
• Escape closes from the host document and from inside the demo: a small bridge script injected into every served demo page forwards Escape keydowns to the parent.
• Scroll lock — document.body.style.overflow is set to hidden while open and restored to its prior value on close.
• Focus restoration — whatever had focus before the modal opened is refocused when it closes.

The host owns open. Listen for rendemo:close and clear the attribute — the element deliberately does not close itself.

The other two are stated where they belong: modal mode has no load timeout, and rendemo:ready’s detail is not a contract.