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, or an AI demo agent, and every embed works responsively across desktop and mobile.
How do I embed a Supademo on my website?
Open your demo in Supademo and click Share in the top-right corner.
Select the Embed tab, choose Inline Embed, and click Copy code.
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:
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:
Onboarding users inside your product
Demo triggers from a button or event in your app
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):
How to embed an HTML demo:
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 for the exact clicks in each tool, and the website embed guide 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.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.
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.
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.
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.
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.
Last updated
Was this helpful?