Sematkan di situs Anda

Setelah diunggah, demo adalah sebuah folder di penyimpanan Anda. Ada empat cara menampilkannya — pilih satu dan salin kodenya. Ganti alamat contoh dengan milik Anda: hasil unggahan di aplikasi menampilkan alamat aslinya, lengkap dengan kode siap salin.

Empat cara pakai

Tautan berbagi

Kirim ke siapa saja. Membuka halaman lengkap: demo, deskripsi, dan daftar langkahnya.

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

Pemutar tersemat

Taruh pemutar di dalam halaman yang sudah Anda punya.

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

Sampul dulu, lalu pemutar

Menampilkan sampul dengan tombol putar dan baru memuat demo saat diklik, jadi halaman tetap cepat.

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

Tombol popup

Satu baris skrip: tombol “View demo” di pojok membuka demo di atas halaman Anda.

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

Isi folder

index.html: Halaman lengkap — yang dibuka tautan berbagi
player.html: Hanya pemutar, menyesuaikan kotaknya — untuk iframe
poster.jpg: Frame pertama demo, untuk sampul atau pratinjau tautan
demo.json: Demo itu sendiri: langkah, teks, dan pengaturan
player.js: Kode pemutar, dipakai kedua halaman
assets/: Tangkapan layar, klip video, dan sulih suara
embed.js: Skrip tombol popup

Serahkan ke AI Anda

Jika situs Anda dibuat dengan asisten AI (Claude, Cursor, ChatGPT…), salin ini, isi bagian kosong, lalu berikan ke AI itu.

Sematkan demo produk interaktif di situs web saya.

Situs saya dibuat dengan: ____ (mis. Next.js, WordPress, Webflow)
Letaknya: ____ (mis. di beranda, di bawah hero)

Demo ini adalah folder yang sudah di-hosting, dibuat dengan MakeMeDemo. Tampilkan dulu poster.jpg dengan tombol putar; baru saat diklik, ganti dengan iframe player.html (lebar 100%, rasio 16:10, tanpa bingkai, layar penuh diizinkan), agar halaman tidak memuat demo sejak awal. Tautkan file di lokasi aslinya — jangan salin ke proyek saya. Foldernya:

https://your-site.com/demos/my-demo/
  index.html   Halaman lengkap — yang dibuka tautan berbagi
  player.html  Hanya pemutar, menyesuaikan kotaknya — untuk iframe
  poster.jpg   Frame pertama demo, untuk sampul atau pratinjau tautan
  demo.json    Demo itu sendiri: langkah, teks, dan pengaturan
  player.js    Kode pemutar, dipakai kedua halaman
  assets/      Tangkapan layar, klip video, dan sulih suara
  embed.js     Skrip tombol popup