MakeMeDemo
Herunterladen

Auf der eigenen Website einbetten

Nach dem Hochladen ist eine Demo ein Ordner in deinem Speicher. Es gibt vier Wege, sie zu zeigen – wähle einen und kopiere den Code. Ersetze die Beispieladresse durch deine eigene: Das Upload-Ergebnis in der App zeigt die richtige, mit diesen Codes zum Kopieren.

Vier Möglichkeiten

Link zum Teilen

An jeden schicken. Öffnet eine ganze Seite: die Demo, ihre Beschreibung und die Schrittliste.

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

Eingebetteter Player

Den Player in eine vorhandene Seite setzen.

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

Erst Titelbild, dann Player

Zeigt das Titelbild mit Play-Button und lädt die Demo erst beim Klick – deine Seite bleibt schnell.

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

Popup-Button

Eine Zeile Script: Ein „View demo“-Button in der Ecke öffnet die Demo über deiner Seite.

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

Was im Ordner liegt

index.html
Die ganze Seite – das öffnet der Link
player.html
Nur der Player, passt sich seinem Rahmen an – für iframes
poster.jpg
Das erste Bild der Demo, als Titelbild oder Link-Vorschau
demo.json
Die Demo selbst: Schritte, Texte und Einstellungen
player.js
Der Code des Players, von beiden Seiten genutzt
assets/
Screenshots, Videoclips und Sprecherstimme
embed.js
Das Script für den Popup-Button

Lass deine KI das machen

Wurde deine Website mit einem KI-Assistenten (Claude, Cursor, ChatGPT …) gebaut? Kopiere das, fülle die Lücken aus und gib es weiter.

Bette eine interaktive Produktdemo in meine Website ein.

Meine Website ist gebaut mit: ____ (z. B. Next.js, WordPress, Webflow)
Wo sie hin soll: ____ (z. B. auf der Startseite unter dem Hero)

Die Demo ist ein gehosteter Ordner, erstellt mit MakeMeDemo. Zeige zuerst poster.jpg mit einem Play-Button; erst beim Klick ersetze ihn durch ein iframe von player.html (Breite 100 %, Seitenverhältnis 16:10, ohne Rahmen, Vollbild erlaubt), damit die Seite die Demo nicht vorab lädt. Verlinke die Dateien an ihrem Ort – kopiere sie nicht in mein Projekt. Der Ordner:

https://your-site.com/demos/my-demo/
  index.html   Die ganze Seite – das öffnet der Link
  player.html  Nur der Player, passt sich seinem Rahmen an – für iframes
  poster.jpg   Das erste Bild der Demo, als Titelbild oder Link-Vorschau
  demo.json    Die Demo selbst: Schritte, Texte und Einstellungen
  player.js    Der Code des Players, von beiden Seiten genutzt
  assets/      Screenshots, Videoclips und Sprecherstimme
  embed.js     Das Script für den Popup-Button