MakeMeDemo
Завантажити

Вбудувати на сайт

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

Чотири способи

Посилання

Надішліть будь-кому. Відкриється повна сторінка: демо, опис і список кроків.

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     Скрипт спливної кнопки