How to embed interactive demo on website pages, landing pages and help centers

Four steps to embed a demo

To embed an interactive demo on a website, copy the embed code from the tool that hosts the demo and paste it into a page block that accepts HTML. It takes four steps, and pasting into an HTML block needs no developer. The labels in parentheses are Supademo's, from its help center.

1. Open the demo's share options and find its embed code (Share, then the Embed section).
2. Copy the inline embed code (Inline Embed, then Copy Code).
3. Paste the snippet into an HTML-capable block or straight into the page source.
4. Publish the page, load it in a browser and click through the demo to confirm it plays.

Check the demo's sharing settings, so visitors outside your workspace can open it. Supademo says its viewers need no account and its embed is responsive by default.

WordPress, Webflow and other CMS blocks

Each platform has its own block for HTML. Supademo's docs name these.

Do not paste the code into a rich-text field: Supademo says rich-text editors often escape pasted HTML instead of rendering it. If the frame stays blank, your site's Content-Security-Policy frame-src rule must allow Supademo's app domain or your Supademo custom domain. Ad blockers, firewalls and content filters can also block the frame.

Page speed, mobile layout and accessibility

Resize the wrapper around the embed, not the iframe: Supademo says not to set a fixed width or height on the iframe itself. Test the page at mobile breakpoints. For text-heavy demos, Supademo suggests a popup embed or a direct link on small screens.

On speed, Supademo says its embed is lazy-loaded: the browser waits until a visitor scrolls near the demo, so a demo lower on the page does not slow the first load. Supademo adds that a demo placed above the fold loads with the page, like other above-the-fold media. MDN says screen readers use the iframe's title attribute, and without one users must enter the frame to learn what it holds, so check that your pasted iframe has a title.

Landing pages, pop-ups and help centers

For a landing page, Supademo's use-case guide recommends an inline embed above the fold and a popup embed on secondary pages. A popup embed takes two pasted snippets, one script tag and one trigger button. It works on every plan, Free included.

For a help center, paste the iframe code into Zendesk's source or embed option. Intercom and Notion turn a pasted share link into an embedded demo, with Notion offering Create embed after the paste.

Two jobs do need a developer. Tying the demo's tracking to a cookie-consent banner takes a small code snippet on the parent site, as Supademo states (this is not legal advice), and a demo inside the live product may take technical work. Email clients render no iframes, so an email gets a linked GIF or thumbnail.

Which plan you need to embed a demo

Supademo's embed code works on every plan, Free included, while embedding a Showcase needs Scale at $38 a month per creator, billed yearly, as read on October 24, 2026. A Showcase bundles demos, PDFs, videos and booking embeds under one link, and a creator is a seat for someone who records and edits demos. The best interactive demo software for marketing compares the alternatives.

Stay on Free if single demos on a few pages are the whole job: Free allows five demos and adds a Made with Supademo watermark that cannot be removed. Move to Scale for Showcase embeds, lead forms or a watermark-free embed. A 14-day Scale trial, with no card, tries Showcase embeds and lead forms; the watermark stays.

To build the demo itself, see how to create an interactive demo of a product, and for formats, interactive demo examples.