Embed a Demo on Your Website

Embed a Supademo interactive demo on your website by copying the iframe code from the Share modal and pasting it into any web page, CMS, or HTML block.

To embed a Supademo on your website, copy the inline embed code from your demo's Share modal and paste it into any page or CMS block that accepts HTML. The embedded Supademo renders as a responsive iframe that visitors can click through directly on your page — viewers never need a Supademo account, and embedding is available on every plan, including Free.

This guide walks through the exact steps, explains how the responsive embed code works, gives quick instructions for popular website builders, and helps you choose between inline, popup, and in-app embeds.

How do I embed a Supademo on my website?

Embedding a Supademo takes two actions: copy the code from the Share modal, then paste it wherever your site accepts HTML. Follow these steps:

1. In Supademo, open the demo you want to embed and click Share.

2. In the Share modal, open the Embed section.

3. Under Inline Embed, click Copy Code. Supademo copies an iframe snippet pre-filled with your demo's embed URL, title, and aspect ratio.

4. In your website editor or CMS, paste the snippet into an HTML-capable block or directly into the page source. Platform-specific steps are in the sections below.

5. Publish the page, then load it in a browser and click through the demo to confirm it plays.

Always copy the snippet from Share → Embed rather than hand-building the URL. Supademo fills in the exact embed src for your demo — including your custom domain if you have one configured — plus the correct aspect ratio for your recording.

The same flow works for multi-demo Showcases: open the Showcase, click Share, and copy its inline embed code. Demo embedding works on every plan; Showcase embedding requires the Scale plan or above.

How the responsive embed code works

The Supademo embed code is responsive by default: a wrapper <div> controls the size, and the iframe inside stretches to fill it. Understanding the two parts helps you adjust sizing without breaking the layout.

The wrapper <div> does the sizing work:

• width: 100% makes the embed fill whatever container you place it in — a full page, a column, or a card.

• aspect-ratio keeps the height proportional to the width. Supademo sets this value from the first step of your demo, so the frame matches the shape of your recorded screen with no letterboxing.

• max-height: 80vh (and 80svh for mobile browsers with collapsing toolbars) stops the embed from growing taller than 80% of the viewport on large screens.

• padding: 40px 0 adds breathing room above and below the demo.

The <iframe> is positioned absolutely to fill the wrapper, so you should not set a fixed width or height on the iframe itself. To resize the embed, adjust the wrapper: for example, add max-width: 900px; margin: 0 auto; to the wrapper's style to center a narrower embed.

Two attributes on the iframe matter for behavior: loading="lazy" tells the browser to defer loading the demo until the visitor scrolls near it, and allowfullscreen lets viewers expand the demo to full screen.

Embedded Supademos also support dynamic variables through URL parameters, so you can personalize text inside the demo per visitor. See Variables in Embeds for the parameter format.

How to embed in popular website builders

The steps below cover five common website platforms; the general method is always the same — paste the Supademo inline embed code into the platform's HTML or embed element. For knowledge bases and other tools such as Notion, Intercom, Zendesk, and Confluence, see the full platform directory.

WordPress (Custom HTML block)

1. Copy the inline embed code from your demo's Share → Embed section.

2. In the WordPress block editor, click + where you want the demo and add a Custom HTML block.

3. Paste the snippet into the block.

4. Use the block's Preview toggle to check the render, then click Update or Publish.

Webflow (Embed element)

1. Copy the inline embed code from Supademo.

2. In the Webflow Designer, open the Add panel and drag an Embed element onto the page.

3. Paste the snippet into the HTML embed code editor and click Save & Close.

4. Publish your site — custom code renders fully on the published site.

Framer (Embed component)

1. Copy the inline embed code from Supademo.

2. In Framer, open the Insert menu, search for the Embed component, and drop it where the demo should appear.

3. In the component's properties panel, set the embed type to HTML and paste the snippet.

4. Resize the component's frame on the canvas, then Publish.

HubSpot CMS

1. Copy the inline embed code from Supademo.

2. In the HubSpot page editor, add an Embed module to the page (search "embed" in the module panel).

3. Paste the snippet into the module's code field.

4. Preview the page, then Publish.

Squarespace (Code block)

1. Copy the inline embed code from Supademo.

2. Edit the page, click an insert point (+), and add a Code block.

3. Paste the snippet and leave the block's language set to HTML.

4. Save and publish the page.

Should you use an inline, popup, or in-app embed?

Supademo offers three ways to put a demo in front of viewers, and the right one depends on where the demo lives and how visitors should discover it.

Embed type	What it does	Best for
Inline embed (this page)	Renders the demo directly on the page in a responsive iframe	Landing pages, blog posts, docs, and feature pages where the demo is part of the content
Popup embed	A button or link opens the demo in a full-screen overlay	"Take a tour" CTAs, navigation links, and pages where the demo supports the content
In-app product tours	Launches demos inside your own product via the Supademo SDK or a Demo Hub	User onboarding, feature announcements, and contextual help inside your app

Choose an inline embed when you want the demo visible immediately, with no click required — it makes the demo the centerpiece of the page. Choose a popup when the page has its own job to do and the demo is an optional deep dive. Choose in-app tours when the audience is your logged-in users rather than website visitors.

Whichever type you pick, you can capture leads from viewers with a lead capture form and react to viewer progress with the Embed Events API.

Frequently asked questions

How do I embed an interactive product demo on my website?

Create the demo in Supademo, click Share → Embed, and copy the Inline Embed code. Paste that code into any HTML-capable block on your website — a WordPress Custom HTML block, a Webflow Embed element, a Framer Embed component, or the raw page source — then publish. The demo renders on the page and visitors can click through it immediately.

Why is my embedded demo not loading?

The most common causes are platform and browser restrictions rather than the demo itself:

1. The platform stripped the iframe. Rich-text fields often remove iframes on save — use the platform's dedicated HTML, code, or embed element instead.

2. A Content Security Policy is blocking the frame. If your site sends a Content-Security-Policy header, its frame-src directive must allow https://app.supademo.com (or your Supademo custom domain).

3. The demo is not publicly viewable. Check the demo's sharing settings so visitors outside your workspace can open it.

For the full checklist, see Embed not loading.

Do embedded demos work on mobile?

Yes. The embed wrapper uses width: 100% with a fixed aspect ratio, so the demo scales down to the width of a phone screen, and the 80svh max-height accounts for mobile browser toolbars. Interactive hotspots respond to taps. Because a desktop-sized recording can feel small on a narrow screen, test your page at mobile breakpoints — for text-heavy demos, a popup embed or a direct link can give small-screen visitors a larger viewing surface.

Does embedding affect my page speed?

The embed code is built to minimize page-speed impact. The iframe ships with loading="lazy", so the browser defers loading the demo until the visitor scrolls near it — an embed below the fold adds essentially nothing to your initial page load. The demo also runs inside an iframe, isolated from your page's own scripts and styles. If you place the embed above the fold, the demo loads with the page like any other above-the-fold media.

Do viewers need a Supademo account to watch an embedded demo?

No. Anyone who can open your web page can view and click through the embedded demo — no login, signup, or Supademo account is ever required of viewers.

Can I get the embed code programmatically?

Yes. Supademo's REST API includes an endpoint that returns a demo's embed code, which is useful when generating pages at scale.