MakeMeDemo
Descargar

Insertar en tu web

Una vez subida, una demo es una carpeta en tu almacenamiento. Hay cuatro formas de mostrarla: elige una y copia su código. Cambia la dirección de ejemplo por la tuya; el resultado de la subida en la app muestra la real, con estos códigos listos para copiar.

Cuatro formas de usarla

Enlace para compartir

Envíalo a quien quieras. Abre una página completa: la demo, su descripción y su lista de pasos.

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

Reproductor insertado

Coloca el reproductor dentro de una página que ya tienes.

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

Portada primero, luego el reproductor

Muestra la portada con un botón de play y carga la demo solo al hacer clic, así tu página sigue siendo rápida.

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

Botón emergente

Una línea de script: un botón “View demo” en la esquina abre la demo sobre tu página.

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

Qué hay en la carpeta

index.html
La página completa: lo que abre el enlace
player.html
Solo el reproductor, ajustado a su contenedor; para iframes
poster.jpg
El primer fotograma, para portada o vista previa del enlace
demo.json
La demo en sí: pasos, textos y ajustes
player.js
El código del reproductor, que usan ambas páginas
assets/
Capturas, clips de vídeo y locución
embed.js
El script del botón emergente

Deja que tu IA lo haga

Si tu web la hiciste con un asistente de IA (Claude, Cursor, ChatGPT…), copia esto, rellena los huecos y pásaselo.

Inserta una demo interactiva de producto en mi web.

Mi web está hecha con: ____ (p. ej. Next.js, WordPress, Webflow)
Dónde debe ir: ____ (p. ej. en la portada, bajo el hero)

La demo es una carpeta alojada creada con MakeMeDemo. Muestra primero poster.jpg con un botón de play; solo al hacer clic, sustitúyelo por un iframe de player.html (ancho 100%, proporción 16:10, sin borde, pantalla completa permitida), para que la página no cargue la demo de entrada. Enlaza los archivos donde están; no los copies a mi proyecto. La carpeta:

https://your-site.com/demos/my-demo/
  index.html   La página completa: lo que abre el enlace
  player.html  Solo el reproductor, ajustado a su contenedor; para iframes
  poster.jpg   El primer fotograma, para portada o vista previa del enlace
  demo.json    La demo en sí: pasos, textos y ajustes
  player.js    El código del reproductor, que usan ambas páginas
  assets/      Capturas, clips de vídeo y locución
  embed.js     El script del botón emergente