अपनी साइट पर एम्बेड करें
अपलोड के बाद डेमो आपकी स्टोरेज में एक फ़ोल्डर होता है। इसे दिखाने के चार तरीके हैं — कोई एक चुनें और उसका कोड कॉपी करें। उदाहरण वाला पता अपने पते से बदलें: ऐप के अपलोड परिणाम में असली पता और कॉपी करने लायक कोड मौजूद हैं।
इस्तेमाल के चार तरीके
शेयर लिंक
किसी को भी भेजें। पूरा पेज खुलता है: डेमो, उसका विवरण और चरणों की सूची।
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 को प्ले बटन के साथ दिखाओ; क्लिक होने पर ही उसे player.html के iframe से बदलो (चौड़ाई 100%, अनुपात 16:10, बिना बॉर्डर, फ़ुलस्क्रीन की अनुमति), ताकि पेज शुरू में डेमो लोड न करे। फ़ाइलों को उनकी जगह से ही लिंक करो — मेरे प्रोजेक्ट में कॉपी मत करो। फ़ोल्डर: https://your-site.com/demos/my-demo/ index.html पूरा पेज — शेयर लिंक यही खोलता है player.html सिर्फ़ प्लेयर, अपने बॉक्स के हिसाब से — iframe के लिए poster.jpg डेमो का पहला फ़्रेम, कवर या लिंक प्रीव्यू के लिए demo.json डेमो ख़ुद: चरण, टेक्स्ट और सेटिंग्स player.js प्लेयर का कोड, दोनों पेज इसे इस्तेमाल करते हैं assets/ स्क्रीनशॉट, वीडियो क्लिप और वॉइसओवर embed.js पॉपअप बटन की स्क्रिप्ट