Demo Makerby Dplooy Make a demo

How to embed an interactive demoPut a click-through product tour on any page of your website

Put the demo online once, then paste two lines wherever you want it to appear. It fits the width it's given, works on phones, and your page's styles can't break it.

Make a demo How to make one
An embedded demo looks like this: the same player, sized to the column it sits in.

How to embed an interactive demo, step by step

  1. Export the demo

    In the editor, press Export and download the ZIP. It holds the demo page, embed.js and your screenshots.

  2. Put it online

    Upload the ZIP to a web host. On Dplooy, drop it on the dashboard and choose ZIP to site. Note the address you get, such as your-demo.dplooy.com.

  3. Copy the embed code

    Back in the export dialog, type that address under Embed on your website and press Copy. The code now points at your demo.

  4. Paste it into your page

    Add an HTML or code block where the demo should appear and paste the two lines. The table below shows where that is in each site builder.

  5. Publish and check it on a phone

    Publish the page, open it, and click through the demo once on a computer and once on a phone.

The embed code

Two lines: a place for the demo, and the script that draws it there. Replace the address with your demo's.

<div data-demo-maker="https://your-demo.dplooy.com/"></div>
<script src="https://your-demo.dplooy.com/embed.js" async></script>
  • The div is where the demo appears. It takes the full width of whatever it sits in — put it in a narrower column for a smaller demo.
  • The script holds the demo and loads the screenshots from your demo's address. async means it never slows your page down.
  • Several demos on one page work: paste each demo's two lines; each div shows the demo whose address it names.
  • The demo draws inside its own sealed box (a shadow root), so your site's CSS can't restyle it and its styles can't leak out.

Where to paste it in WordPress, Webflow, Squarespace and more

Platform Where to paste the code Good to know
WordPress Add a Custom HTML block Use Preview to see it; some hosted plans remove scripts
Webflow Add a Code Embed element Scripts run on the published site, not in the Designer
Squarespace Add a Code Block Scripts may need a higher plan
Wix Add an Embed HTML element Make the element tall enough for the demo
Framer Add an Embed component set to HTML Set the component's height to fit
Your own HTML Anywhere inside <body> No setup needed

Some places don't run scripts at all — Notion pages, most email newsletters, many forums. Link to the demo's address instead, or put it behind a button such as "Try the demo". The demo page works on its own, with your title at the top.

If the embedded demo doesn't show

  • Nothing appears. Open the demo's address on its own. If it doesn't load, the demo isn't online yet or the address in the code has a typo.
  • It works on its own but not on your page. Your site builder removed the script. Look for a code block that allows scripts, or share a link.
  • An old version shows. Browsers keep embed.js for a while after you upload a new one; reload after an hour, or check in a private window.

Embedding demos: questions

What people ask when they add a demo to their site.

Can I embed an interactive demo on my website for free?

Yes. Demo Maker is free, and the embed code comes with every export. You need a place to host the demo and a page that accepts HTML.

Does the embedded demo slow down my page?

Barely. The script loads with async, so your page shows first, and the screenshots load one step ahead as the viewer clicks.

Can I use an iframe instead?

Only if your host lets its pages show inside frames on other sites, and many hosts don't. The two-line embed code works wherever scripts are allowed, so use that.

Will the demo look right on phones?

Yes. It fits the width it's given, and on narrow screens the hint moves under the screenshot.

How do I update an embedded demo?

Export the new version and upload it to the same address. The embed code stays the same, so every page that shows the demo updates.

More about interactive demos

Make a demo worth embedding

Free, no sign-up, nothing uploaded.

Make a demo