> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/share/embed.md).

# Embed Interactive Demo

How to embed a Supademo interactive product demo on your website, in your app, or in tools like Notion and Webflow — where to find your embed code, plus embed types and FAQs.

Embedding lets you place a Supademo interactive demo directly on your website, inside your product, or in tools like Notion, Confluence, Framer, GitBook, WordPress, and Webflow. Visitors click through the demo where they already are — no new tab, no login, on any plan (embedding is available on Supademo's Free plan and above).

You can embed a single demo, a multi-demo [Showcase](https://docs.supademo.com/hubs), or an [AI demo agent](https://docs.supademo.com/ai-features), and every embed works responsively across desktop and mobile.

## How do I embed a Supademo on my website?

1. Open your demo in Supademo and click **Share** in the top-right corner.
2. Select the **Embed** tab, choose **Inline Embed**, and click **Copy code**.
3. Paste the code into any page or CMS block that accepts HTML.

The copied code is a responsive iframe wrapped in a sizing container that matches your demo's aspect ratio. Always copy it straight from the Share modal rather than hand-writing it — Supademo fills in the correct demo URL and sizing for you, and the embed loads lazily so it doesn't slow down your page.

Here's the full flow as an interactive walkthrough:

{% @supademo/embed url="<https://app.supademo.com/demo/zyz1rJMWCv8WsxNLX69kp>" demoId="zyz1rJMWCv8WsxNLX69kp" %}

## Which embed type should I use?

Supademo supports several embed types. Choose based on where your viewer is and how much space the demo should take:

| Embed type                                                                  | Best for                                  | How it appears                                   |
| --------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------ |
| [Inline embed](https://docs.supademo.com/embed/website-embed)               | Landing pages, docs, blog posts           | Demo plays directly in the page                  |
| [Popup embed](https://docs.supademo.com/embed/popup-embed)                  | Buttons and CTAs ("See it in action")     | Demo opens in a modal over the page              |
| [In-app product tour](https://docs.supademo.com/embed/in-app-product-tours) | Onboarding users inside your product      | Demo triggers from a button or event in your app |
| [Demo Hub widget](https://docs.supademo.com/hubs)                           | Persistent in-app help and demo libraries | Launcher icon opens a drawer of demos            |
| Showcase embed                                                              | Multiple related demos on one page        | A gallery or playlist plays inline               |

A quick rule of thumb: marketing pages use inline or popup embeds, product onboarding uses in-app tours or the Demo Hub widget, and resource centers use Showcase embeds.

How to embed a multi-demo Showcase (available on Scale plans and above):

{% @supademo/embed url="<https://app.supademo.com/demo/YKi9xK7JGnvaBj5DCANwD>" demoId="YKi9xK7JGnvaBj5DCANwD" %}

How to embed an HTML demo:

{% @supademo/embed url="<https://app.supademo.com/demo/cmaccvf1u02vpxt0ifnax9n0s>" demoId="cmaccvf1u02vpxt0ifnax9n0s" %}

## Can I embed a demo in Notion, Webflow, or WordPress?

Yes. Supademo embeds work in any platform that accepts an iframe or a plain share link, including Notion, Confluence, GitBook, Framer, Webflow, WordPress, Squarespace, HubSpot pages, and Zendesk. In link-unfurling tools like Notion, pasting the demo's share link and choosing **Embed** is enough — no code required.

See [step-by-step instructions for popular platforms](https://docs.supademo.com/embed/instructions-for-popular-apps) for the exact clicks in each tool, and the [website embed guide](https://docs.supademo.com/embed/website-embed) for CMS-specific code placement.

## Customize and track an embedded demo

* **Personalize with variables.** Pass viewer details (like `{{name}}` or `{{company}}`) into the embed URL to personalize titles, hotspots, and content — see [variables in embeds](https://docs.supademo.com/customize/personalize/variables-and-tokens/variables-in-embeds).
* **Capture leads inside the embed.** Add a form chapter or email gate so the demo captures leads right on your page — see [capture leads from a demo](https://docs.supademo.com/capture-leads).
* **React to demo events.** Embedded demos emit events through a postMessage API, so your page can respond when a viewer starts, advances, or completes a demo — see the [Embed Events API](https://docs.supademo.com/embed/embed-events-api).
* **Measure results.** Every embedded view is tracked in Supademo analytics, including per-step drop-off and source attribution.

## Why is my embedded demo not loading?

The most common causes are a CMS block that strips iframes (some email builders and restricted CMS plans do), an ad blocker in the viewer's browser, or a typo introduced by editing the snippet after copying it. Re-copy the code from the Share modal and paste it into an HTML/embed block unmodified. For a full walkthrough, see [troubleshooting embedded demos](https://docs.supademo.com/troubleshooting/embed-not-loading).

## FAQ

### How do I embed a product demo on my website?

Create a demo in Supademo, click **Share → Embed**, copy the inline embed code, and paste it into any HTML block on your site. The demo plays directly in the page and viewers don't need an account to interact with it.

### Do viewers need to log in to watch an embedded demo?

No. Embedded Supademos are loginless for viewers. You can optionally add an email gate, password, or SSO requirement if you want to control access — see [share permissions](https://docs.supademo.com/share-link/share-permissions).

### Is the embedded demo responsive on mobile?

Yes. The embed code uses a responsive container that scales with the page width and preserves your demo's aspect ratio, and demos support a mobile-optimized hotspot view.

### Does embedding a demo slow down my page?

No. The embed only loads when a visitor scrolls near it, so it doesn't affect your page's initial load.

### Which plan do I need to embed demos?

Embedding individual demos is available on every plan, including Free. Embedding multi-demo Showcases requires a Scale plan or above.