MakeMeDemo
Baixar

Incorporar no seu site

Depois de enviada, uma demo é uma pasta no seu armazenamento. Há quatro formas de mostrá-la: escolha uma e copie o código. Troque o endereço de exemplo pelo seu; o resultado do envio no app mostra o endereço real, com estes códigos prontos para copiar.

Quatro formas de usar

Link de compartilhamento

Envie para qualquer pessoa. Abre uma página completa: a demo, a descrição e a lista de passos.

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

Player incorporado

Coloque o player dentro de uma página que você já tem.

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

Capa primeiro, depois o player

Mostra a capa com um botão de play e só carrega a demo ao clicar, então sua página continua 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ão pop-up

Uma linha de script: um botão “View demo” no canto abre a demo sobre a página.

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

O que tem na pasta

index.html
A página completa — o que o link abre
player.html
Só o player, ajustado à caixa onde é colocado — para iframes
poster.jpg
O primeiro quadro da demo, para capa ou prévia de link
demo.json
A demo em si: passos, textos e configurações
player.js
O código do player, usado pelas duas páginas
assets/
Capturas de tela, clipes de vídeo e narração
embed.js
O script do botão pop-up

Deixe sua IA fazer

Se o seu site foi feito com um assistente de IA (Claude, Cursor, ChatGPT…), copie isto, preencha as lacunas e entregue a ele.

Incorpore uma demo interativa de produto no meu site.

Meu site é feito com: ____ (ex.: Next.js, WordPress, Webflow)
Onde deve ficar: ____ (ex.: na página inicial, abaixo do hero)

A demo é uma pasta hospedada feita com o MakeMeDemo. Mostre primeiro poster.jpg com um botão de play; só ao clicar, troque por um iframe de player.html (largura 100%, proporção 16:10, sem borda, tela cheia permitida), para a página não carregar a demo de início. Faça link para os arquivos onde estão — não os copie para o meu projeto. A pasta:

https://your-site.com/demos/my-demo/
  index.html   A página completa — o que o link abre
  player.html  Só o player, ajustado à caixa onde é colocado — para iframes
  poster.jpg   O primeiro quadro da demo, para capa ou prévia de link
  demo.json    A demo em si: passos, textos e configurações
  player.js    O código do player, usado pelas duas páginas
  assets/      Capturas de tela, clipes de vídeo e narração
  embed.js     O script do botão pop-up