Встроить на сайт

После загрузки демо — это папка в вашем хранилище. Показать его можно четырьмя способами: выберите один и скопируйте код. Замените адрес из примера своим: в результате загрузки в приложении есть настоящий адрес и готовые коды.

Четыре способа

Ссылка

Отправьте кому угодно. Откроется полная страница: демо, описание и список шагов.

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

Встроенный плеер

Разместите плеер на уже существующей странице.

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

Сначала обложка, потом плеер

Показывает обложку с кнопкой воспроизведения и загружает демо только по клику — страница остаётся быстрой.

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

Всплывающая кнопка

Одна строка скрипта: в углу появляется кнопка «View demo», которая открывает демо поверх страницы.

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

Что в папке

index.html: Полная страница — её открывает ссылка
player.html: Только плеер, подстраивается под рамку — для iframe
poster.jpg: Первый кадр демо, для обложки или превью ссылки
demo.json: Само демо: шаги, тексты и настройки
player.js: Код плеера, его используют обе страницы
assets/: Скриншоты, видеофрагменты и озвучка
embed.js: Скрипт всплывающей кнопки

Поручите это ИИ

Если ваш сайт сделан с ИИ-помощником (Claude, Cursor, ChatGPT…), скопируйте это, заполните пропуски и передайте ему.

Встрой на мой сайт интерактивное демо продукта.

Мой сайт сделан на: ____ (например, Next.js, WordPress, Webflow)
Где разместить: ____ (например, на главной, под первым экраном)

Демо — это размещённая папка, созданная в MakeMeDemo. Сначала покажи poster.jpg с кнопкой воспроизведения; только по клику замени его на iframe с player.html (ширина 100%, соотношение 16:10, без рамки, полноэкранный режим разрешён), чтобы страница не загружала демо сразу. Ссылайся на файлы там, где они лежат, — не копируй их в мой проект. Папка:

https://your-site.com/demos/my-demo/
  index.html   Полная страница — её открывает ссылка
  player.html  Только плеер, подстраивается под рамку — для iframe
  poster.jpg   Первый кадр демо, для обложки или превью ссылки
  demo.json    Само демо: шаги, тексты и настройки
  player.js    Код плеера, его используют обе страницы
  assets/      Скриншоты, видеофрагменты и озвучка
  embed.js     Скрипт всплывающей кнопки