MakeMeDemo
Scarica

Incorporare nel tuo sito

Una volta caricata, una demo è una cartella nel tuo spazio di archiviazione. Ci sono quattro modi per mostrarla: scegline uno e copia il codice. Sostituisci l’indirizzo di esempio con il tuo: il risultato del caricamento nell’app mostra quello vero, con questi codici pronti da copiare.

Quattro modi di usarla

Link di condivisione

Mandalo a chiunque. Apre una pagina completa: la demo, la descrizione e l’elenco dei passaggi.

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

Player incorporato

Metti il player dentro una pagina che hai già.

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

Prima la copertina, poi il player

Mostra la copertina con un pulsante play e carica la demo solo al clic, così la pagina resta veloce.

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

Pulsante popup

Una riga di script: un pulsante “View demo” nell’angolo apre la demo sopra la pagina.

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

Cosa c’è nella cartella

index.html
La pagina completa: quella che apre il link
player.html
Solo il player, adattato al riquadro in cui è inserito; per gli iframe
poster.jpg
Il primo fotogramma della demo, per copertina o anteprima del link
demo.json
La demo vera e propria: passaggi, testi e impostazioni
player.js
Il codice del player, usato da entrambe le pagine
assets/
Screenshot, clip video e voce narrante
embed.js
Lo script del pulsante popup

Lascia fare alla tua IA

Se il tuo sito è stato fatto con un assistente IA (Claude, Cursor, ChatGPT…), copia questo, compila gli spazi e passalo.

Incorpora una demo interattiva del prodotto nel mio sito.

Il mio sito è fatto con: ____ (es. Next.js, WordPress, Webflow)
Dove va messa: ____ (es. in home page, sotto l’hero)

La demo è una cartella ospitata creata con MakeMeDemo. Mostra prima poster.jpg con un pulsante play; solo al clic, sostituiscilo con un iframe di player.html (larghezza 100%, proporzioni 16:10, senza bordo, schermo intero consentito), così la pagina non carica subito la demo. Collega i file dove si trovano: non copiarli nel mio progetto. La cartella:

https://your-site.com/demos/my-demo/
  index.html   La pagina completa: quella che apre il link
  player.html  Solo il player, adattato al riquadro in cui è inserito; per gli iframe
  poster.jpg   Il primo fotogramma della demo, per copertina o anteprima del link
  demo.json    La demo vera e propria: passaggi, testi e impostazioni
  player.js    Il codice del player, usato da entrambe le pagine
  assets/      Screenshot, clip video e voce narrante
  embed.js     Lo script del pulsante popup