Nhúng vào trang web
Sau khi tải lên, một demo là một thư mục trong kho lưu trữ của bạn. Có bốn cách để hiển thị — chọn một và sao chép mã. Hãy thay địa chỉ mẫu bằng địa chỉ của bạn: kết quả tải lên trong ứng dụng có địa chỉ thật, kèm các đoạn mã sẵn để sao chép.
Bốn cách dùng
Liên kết chia sẻ
Gửi cho bất kỳ ai. Mở ra một trang đầy đủ: demo, mô tả và danh sách bước.
https://your-site.com/demos/my-demo/index.html
Trình phát nhúng
Đặt trình phát vào trang bạn đã có.
<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>
Ảnh bìa trước, trình phát sau
Hiện ảnh bìa với nút phát và chỉ tải demo khi được nhấp, nên trang vẫn nhanh.
<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>Nút bật lên
Một dòng script: nút “View demo” ở góc mở demo ngay trên trang của bạn.
<script src="https://your-site.com/demos/my-demo/embed.js" defer></script>
Trong thư mục có gì
- index.html
- Trang đầy đủ — liên kết chia sẻ mở trang này
- player.html
- Chỉ trình phát, tự khớp với khung chứa — dùng cho iframe
- poster.jpg
- Khung hình đầu tiên, làm ảnh bìa hoặc xem trước liên kết
- demo.json
- Chính demo: các bước, văn bản và cài đặt
- player.js
- Mã của trình phát, cả hai trang đều dùng
- assets/
- Ảnh chụp màn hình, đoạn video và lồng tiếng
- embed.js
- Script của nút bật lên
Để AI làm giúp
Nếu trang web của bạn được làm bằng trợ lý AI (Claude, Cursor, ChatGPT…), hãy sao chép đoạn này, điền chỗ trống rồi đưa cho nó.
Hãy nhúng một demo sản phẩm tương tác vào trang web của tôi. Trang của tôi làm bằng: ____ (vd. Next.js, WordPress, Webflow) Đặt ở đâu: ____ (vd. trang chủ, dưới phần hero) Demo là một thư mục đã được lưu trữ, làm bằng MakeMeDemo. Trước tiên hiện poster.jpg với nút phát; chỉ khi được nhấp mới thay bằng iframe của player.html (rộng 100%, tỉ lệ 16:10, không viền, cho phép toàn màn hình), để trang không tải demo ngay từ đầu. Liên kết tới file ở vị trí hiện tại — đừng sao chép vào dự án của tôi. Thư mục: https://your-site.com/demos/my-demo/ index.html Trang đầy đủ — liên kết chia sẻ mở trang này player.html Chỉ trình phát, tự khớp với khung chứa — dùng cho iframe poster.jpg Khung hình đầu tiên, làm ảnh bìa hoặc xem trước liên kết demo.json Chính demo: các bước, văn bản và cài đặt player.js Mã của trình phát, cả hai trang đều dùng assets/ Ảnh chụp màn hình, đoạn video và lồng tiếng embed.js Script của nút bật lên