Insluiten op je site

Na het uploaden is een demo een map in je opslag. Er zijn vier manieren om hem te tonen: kies er een en kopieer de code. Vervang het voorbeeldadres door je eigen adres; het uploadresultaat in de app toont het echte, met deze codes klaar om te kopiëren.

Vier manieren

Deellink

Stuur hem naar wie je wilt. Opent een volledige pagina: de demo, de beschrijving en de stappenlijst.

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

Ingesloten speler

Zet de speler in een pagina die je al hebt.

<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>

Eerst de cover, dan de speler

Toont de cover met een afspeelknop en laadt de demo pas bij een klik, zodat je pagina snel blijft.

<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>

Pop-upknop

Eén regel script: een “View demo”-knop in de hoek opent de demo boven je pagina.

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

Wat er in de map staat

index.html: De volledige pagina — die opent de deellink
player.html: Alleen de speler, past zich aan zijn kader aan — voor iframes
poster.jpg: Het eerste beeld van de demo, als cover of linkvoorbeeld
demo.json: De demo zelf: stappen, teksten en instellingen
player.js: De code van de speler, gebruikt door beide pagina's
assets/: Screenshots, videoclips en voice-over
embed.js: Het script voor de pop-upknop

Laat je AI het doen

Is je site gemaakt met een AI-assistent (Claude, Cursor, ChatGPT…)? Kopieer dit, vul de open plekken in en geef het door.

Sluit een interactieve productdemo in op mijn website.

Mijn site is gemaakt met: ____ (bijv. Next.js, WordPress, Webflow)
Waar hij moet komen: ____ (bijv. op de homepage, onder de hero)

De demo is een gehoste map, gemaakt met MakeMeDemo. Toon eerst poster.jpg met een afspeelknop; vervang die pas bij een klik door een iframe van player.html (breedte 100%, verhouding 16:10, zonder rand, volledig scherm toegestaan), zodat de pagina de demo niet meteen laadt. Link naar de bestanden waar ze staan — kopieer ze niet naar mijn project. De map:

https://your-site.com/demos/my-demo/
  index.html   De volledige pagina — die opent de deellink
  player.html  Alleen de speler, past zich aan zijn kader aan — voor iframes
  poster.jpg   Het eerste beeld van de demo, als cover of linkvoorbeeld
  demo.json    De demo zelf: stappen, teksten en instellingen
  player.js    De code van de speler, gebruikt door beide pagina's
  assets/      Screenshots, videoclips en voice-over
  embed.js     Het script voor de pop-upknop