MakeMeDemo
Télécharger

Intégrer à votre site

Une fois envoyée, une démo est un dossier sur votre stockage. Il y a quatre façons de la montrer : choisissez-en une et copiez son code. Remplacez l’adresse d’exemple par la vôtre : le résultat de l’envoi dans l’app donne la vraie, avec ces codes prêts à copier.

Quatre façons de l’utiliser

Lien de partage

À envoyer à n’importe qui. Il ouvre une page complète : la démo, sa description et sa liste d’étapes.

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

Lecteur intégré

Placez le lecteur dans une page que vous avez déjà.

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

La couverture d’abord, puis le lecteur

Affiche la couverture avec un bouton lecture et ne charge la démo qu’au clic : votre page reste rapide.

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

Bouton pop-up

Une ligne de script : un bouton « View demo » dans le coin ouvre la démo par-dessus votre page.

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

Contenu du dossier

index.html
La page complète — ce qu’ouvre le lien
player.html
Le lecteur seul, adapté à son cadre — pour les iframes
poster.jpg
La première image de la démo, pour une couverture ou un aperçu de lien
demo.json
La démo elle-même : étapes, textes et réglages
player.js
Le code du lecteur, utilisé par les deux pages
assets/
Captures d’écran, extraits vidéo et voix off
embed.js
Le script du bouton pop-up

Laissez votre IA s’en charger

Si votre site a été fait avec un assistant IA (Claude, Cursor, ChatGPT…), copiez ceci, remplissez les blancs et transmettez-le.

Intègre une démo produit interactive dans mon site.

Mon site est fait avec : ____ (ex. Next.js, WordPress, Webflow)
Où la placer : ____ (ex. sur la page d’accueil, sous le hero)

La démo est un dossier hébergé, créé avec MakeMeDemo. Affiche d’abord poster.jpg avec un bouton lecture ; seulement au clic, remplace-le par un iframe de player.html (largeur 100 %, ratio 16:10, sans bordure, plein écran autorisé), pour que la page ne charge pas la démo d’emblée. Fais un lien vers les fichiers là où ils sont — ne les copie pas dans mon projet. Le dossier :

https://your-site.com/demos/my-demo/
  index.html   La page complète — ce qu’ouvre le lien
  player.html  Le lecteur seul, adapté à son cadre — pour les iframes
  poster.jpg   La première image de la démo, pour une couverture ou un aperçu de lien
  demo.json    La démo elle-même : étapes, textes et réglages
  player.js    Le code du lecteur, utilisé par les deux pages
  assets/      Captures d’écran, extraits vidéo et voix off
  embed.js     Le script du bouton pop-up