Embed on your site

Once uploaded, a demo is a folder on your storage. There are four ways to put it in front of people — pick one and copy its code. Replace the example address with your own: the upload result in the app shows the real one, with these codes ready to copy.

Four ways to use it

Share link

Send it to anyone. It opens a full page: the demo, its description and its step list.

https://your-site.com/demos/my-demo/index.html

Embedded player

Put the player inside a page you already have.

<iframe
  src="https://your-site.com/demos/my-demo/player.html"
  width="100%"
  style="aspect-ratio: 16 / 10; border: 0; border-radius: 12px"
  loading="lazy" allowfullscreen>
</iframe>

Cover first, then player

Shows the demo's cover with a play button and loads the demo only when clicked, so your page stays fast.

<div id="mmd-demo" style="position:relative;max-width:960px;aspect-ratio:16 / 10;
  border-radius:12px;overflow:hidden;cursor:pointer">
  <img src="https://your-site.com/demos/my-demo/poster.jpg" alt=""
    style="width:100%;height:100%;object-fit:cover;display:block">
  <span style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);
    box-shadow:0 4px 20px rgba(0,0,0,.2)"></span>
</div>
<script>
document.getElementById('mmd-demo').addEventListener('click', function () {
  this.innerHTML = '<iframe src="https://your-site.com/demos/my-demo/player.html" allowfullscreen' +
    ' style="width:100%;height:100%;border:0"></iframe>';
}, { once: true });
</script>

Popup button

One line of script: a “View demo” button in the corner opens the demo over your page.

<script src="https://your-site.com/demos/my-demo/embed.js" defer></script>

What's in the folder

index.html: The full page — what the share link opens
player.html: The player alone, fitted to the box it's put in — for iframes
poster.jpg: The demo's first frame, for a cover or a link preview
demo.json: The demo itself: steps, text and settings
player.js: The player's code, used by both pages
assets/: Screenshots, video clips and voiceover
embed.js: The popup button script

Let your AI do it

If your site was built with an AI assistant (Claude, Cursor, ChatGPT…), copy this, fill in the blanks and hand it over.

Embed an interactive product demo in my website.

My site is built with: ____ (e.g. Next.js, WordPress, Webflow)
Where it should go: ____ (e.g. on the home page, under the hero)

The demo is a hosted folder made with MakeMeDemo. First show poster.jpg with a play button; only when it is clicked, replace it with an iframe of player.html (width 100%, aspect ratio 16:10, no border, fullscreen allowed), so the page doesn't load the demo up front. Link to the files where they are — don't copy them into my project. The folder:

https://your-site.com/demos/my-demo/
  index.html   The full page — what the share link opens
  player.html  The player alone, fitted to the box it's put in — for iframes
  poster.jpg   The demo's first frame, for a cover or a link preview
  demo.json    The demo itself: steps, text and settings
  player.js    The player's code, used by both pages
  assets/      Screenshots, video clips and voiceover
  embed.js     The popup button script