ฝังในเว็บไซต์ของคุณ

หลังอัปโหลด เดโมคือโฟลเดอร์หนึ่งในที่เก็บข้อมูลของคุณ มีสี่วิธีในการแสดง เลือกหนึ่งวิธีแล้วคัดลอกโค้ด อย่าลืมเปลี่ยนที่อยู่ตัวอย่างเป็นของคุณ ผลการอัปโหลดในแอปมีที่อยู่จริงและโค้ดพร้อมคัดลอก

สี่วิธีใช้งาน

ลิงก์แชร์

ส่งให้ใครก็ได้ เปิดเป็นหน้าเต็ม: เดโม คำอธิบาย และรายการขั้นตอน

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: สคริปต์ของปุ่มป๊อปอัป

ให้ AI ทำให้

ถ้าเว็บไซต์ของคุณสร้างด้วยผู้ช่วย AI (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     สคริปต์ของปุ่มป๊อปอัป