Sitenize yerleştirin

Yüklendikten sonra bir demo, depolama alanınızda bir klasördür. Göstermenin dört yolu var: birini seçin ve kodunu kopyalayın. Örnek adresi kendi adresinizle değiştirin; uygulamadaki yükleme sonucu gerçek adresi ve kopyalamaya hazır kodları gösterir.

Dört kullanım yolu

Paylaşım bağlantısı

Herkese gönderin. Tam bir sayfa açar: demo, açıklaması ve adım listesi.

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

Gömülü oynatıcı

Oynatıcıyı zaten olan bir sayfaya yerleştirin.

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

Önce kapak, sonra oynatıcı

Önce kapak ve oynat düğmesi görünür; demo yalnızca tıklanınca yüklenir, sayfanız hızlı kalır.

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

Açılır düğme

Tek satır script: köşede bir “View demo” düğmesi demoyu sayfanın üstünde açar.

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

Klasörde neler var

index.html: Tam sayfa — paylaşım bağlantısının açtığı
player.html: Yalnızca oynatıcı, kutusuna uyar — iframe için
poster.jpg: Demonun ilk karesi, kapak veya bağlantı önizlemesi için
demo.json: Demonun kendisi: adımlar, metinler ve ayarlar
player.js: Oynatıcı kodu, iki sayfa da kullanır
assets/: Ekran görüntüleri, video klipler ve seslendirme
embed.js: Açılır düğme scripti

Yapay zekânıza bırakın

Siteniz bir yapay zekâ asistanıyla (Claude, Cursor, ChatGPT…) yapıldıysa bunu kopyalayın, boşlukları doldurup ona verin.

Web siteme etkileşimli bir ürün demosu yerleştir.

Sitem şununla yapıldı: ____ (ör. Next.js, WordPress, Webflow)
Nereye gelecek: ____ (ör. ana sayfada, hero bölümünün altına)

Demo, MakeMeDemo ile yapılmış, barındırılan bir klasör. Önce poster.jpg'yi bir oynat düğmesiyle göster; yalnızca tıklandığında onu player.html iframe'iyle değiştir (genişlik %100, en-boy oranı 16:10, kenarlıksız, tam ekrana izin verilir), böylece sayfa demoyu baştan yüklemesin. Dosyalara bulundukları yerden bağlantı ver — projeme kopyalama. Klasör:

https://your-site.com/demos/my-demo/
  index.html   Tam sayfa — paylaşım bağlantısının açtığı
  player.html  Yalnızca oynatıcı, kutusuna uyar — iframe için
  poster.jpg   Demonun ilk karesi, kapak veya bağlantı önizlemesi için
  demo.json    Demonun kendisi: adımlar, metinler ve ayarlar
  player.js    Oynatıcı kodu, iki sayfa da kullanır
  assets/      Ekran görüntüleri, video klipler ve seslendirme
  embed.js     Açılır düğme scripti