Start free

Embedding

Every published demo has a share link (/d/:slug) and two ways to embed it on a page you control.

The script snippet (default)

Paste a <div data-mado> and one script tag. The loader finds every [data-mado] on the page, so multiple demos on one page only need the script once. It mounts lazily (an IntersectionObserver), reserves its final box before the demo loads so nothing shifts, and never sets a cookie.

<div data-mado="your-demo-slug"></div>
<script async src="https://mado.show/p/loader.js"></script>

Optional attributes on the same element:

  • data-aspect="9:19.5" — the capture's aspect ratio, if you want to reserve the box before the loader has a chance to read it from the document.
  • data-poster="…" — an image painted before the player loads.
  • data-step="s7" — open on a specific step (see deep-linking below).
  • data-inline="true" — mount the player as a web component directly in your page's DOM instead of a sandboxed iframe.
  • data-autoplay="true" — the demo plays itself (watch mode) once it scrolls into view, and pauses when it scrolls out or the tab is hidden. Any tap, key or scroll on it hands control to the visitor. Off by default; the Watch button in the player is always there. On a share link or the iframe URL, the same thing is ?play=1.

The iframe fallback

Some CMS and docs editors strip <script> tags. This form needs none — it's a plain sandboxed iframe reserving the same aspect-ratio box the loader would.

<div style="position:relative;aspect-ratio:9/19.5;overflow:hidden;border-radius:12px">
  <iframe src="https://mado.show/e/your-demo-slug" title="Interactive demo" loading="lazy"
    allow="clipboard-write; fullscreen"
    sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"></iframe>
</div>

Deep-linking a step

Every step is addressable. Append ?s=s7 to a share link, or set data-step / the iframe's query string, to open a demo on that exact step instead of the start. This is what lets a help-center article link straight to the relevant part of a walkthrough.

By platform

The two forms above cover every host. Here is exactly where to paste them in the tools people ask about most.

Notion

  1. Type `/embed` on a line and choose the Embed block.
  2. Paste your share link (`https://mado.show/d/your-demo-slug`) or the raw iframe target (`https://mado.show/e/your-demo-slug`) and confirm.
  3. Notion sandboxes third-party embeds itself, so the iframe form is the only one that works here — there is nowhere to paste a `<script>` tag.

Webflow

  1. Add an Embed element from the Add panel (Components → Embed) wherever the demo should sit.
  2. Paste the script snippet below into it and publish the page.
  3. Webflow renders Embed elements as-is, script tag included, so either snippet works — the script version keeps the lazy-load and no-layout-shift behavior.
<div data-mado="your-demo-slug"></div>
<script async src="https://mado.show/p/loader.js"></script>

Framer

  1. Drag in an Embed component from Insert → Embed.
  2. Switch it to “HTML” mode and paste the script snippet, or leave it in “URL” mode and paste `https://mado.show/e/your-demo-slug` directly.
  3. Framer’s URL mode wraps the address in its own iframe automatically — no snippet needed at all in that mode.

WordPress

  1. Add a Custom HTML block (Gutenberg) or an HTML box (Classic Editor / Elementor) and paste a snippet below.
  2. Self-hosted WordPress and Business-plan WordPress.com sites allow the script snippet in a Custom HTML block. Free and Personal WordPress.com plans strip `<script>` tags — use the iframe snippet there instead.

Works on every plan

<div style="position:relative;aspect-ratio:9/19.5;overflow:hidden;border-radius:12px">
  <iframe src="https://mado.show/e/your-demo-slug" title="Interactive demo" loading="lazy"
    allow="clipboard-write; fullscreen"
    sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"></iframe>
</div>

Ghost

  1. Add an HTML card (type `/html` in the editor) and paste a snippet below.
  2. Ghost renders card HTML as written, so either snippet works.
<div data-mado="your-demo-slug"></div>
<script async src="https://mado.show/p/loader.js"></script>

Plain HTML

  1. Paste the script snippet anywhere in your page’s markup — no build step, no framework.
  2. If your CMS or CSP strips inline `<script>` tags, use the iframe fallback instead.
<div data-mado="your-demo-slug"></div>
<script async src="https://mado.show/p/loader.js"></script>

Every share page's Embed panel (/d/:slug) already has your demo's slug baked into both snippets — copy from there and paste it straight into whichever of these you're using.