Osadź na swojej stronie

Po wysłaniu demo jest folderem w Twoim magazynie. Można je pokazać na cztery sposoby — wybierz jeden i skopiuj kod. Zamień przykładowy adres na swój: wynik wysyłki w aplikacji pokazuje prawdziwy, razem z gotowymi do skopiowania kodami.

Cztery sposoby

Link do udostępnienia

Wyślij komukolwiek. Otwiera pełną stronę: demo, opis i listę kroków.

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

Osadzony odtwarzacz

Umieść odtwarzacz na stronie, którą już masz.

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

Najpierw okładka, potem odtwarzacz

Pokazuje okładkę z przyciskiem odtwarzania i ładuje demo dopiero po kliknięciu, więc strona pozostaje szybka.

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

Przycisk wyskakujący

Jedna linia skryptu: przycisk „View demo” w rogu otwiera demo nad Twoją stroną.

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

Co jest w folderze

index.html: Pełna strona — to otwiera link
player.html: Sam odtwarzacz, dopasowany do ramki — dla iframe
poster.jpg: Pierwsza klatka demo, na okładkę lub podgląd linku
demo.json: Samo demo: kroki, teksty i ustawienia
player.js: Kod odtwarzacza, używany przez obie strony
assets/: Zrzuty ekranu, klipy wideo i lektor
embed.js: Skrypt przycisku wyskakującego

Zleć to swojej AI

Jeśli Twoja strona powstała z asystentem AI (Claude, Cursor, ChatGPT…), skopiuj to, uzupełnij luki i przekaż dalej.

Osadź na mojej stronie interaktywne demo produktu.

Moja strona jest zrobiona w: ____ (np. Next.js, WordPress, Webflow)
Gdzie ma się znaleźć: ____ (np. na stronie głównej, pod sekcją hero)

Demo to hostowany folder zrobiony w MakeMeDemo. Najpierw pokaż poster.jpg z przyciskiem odtwarzania; dopiero po kliknięciu zamień go na iframe z player.html (szerokość 100%, proporcje 16:10, bez ramki, pełny ekran dozwolony), żeby strona nie ładowała demo od razu. Linkuj do plików tam, gdzie są — nie kopiuj ich do mojego projektu. Folder:

https://your-site.com/demos/my-demo/
  index.html   Pełna strona — to otwiera link
  player.html  Sam odtwarzacz, dopasowany do ramki — dla iframe
  poster.jpg   Pierwsza klatka demo, na okładkę lub podgląd linku
  demo.json    Samo demo: kroki, teksty i ustawienia
  player.js    Kod odtwarzacza, używany przez obie strony
  assets/      Zrzuty ekranu, klipy wideo i lektor
  embed.js     Skrypt przycisku wyskakującego