Spin And Wheel

अपनी वेबसाइट पर स्पिन व्हील एम्बेड करें

एक मिनट से भी कम में अपनी वेबसाइट, ब्लॉग या क्लास पेज पर काम करने वाला स्पिन व्हील लगाएँ: व्हील चुनें, अपनी एंट्री लिखें और HTML की दो लाइनें पेस्ट करें। विजेट फ्री है, किसी अकाउंट की ज़रूरत नहीं, और यह आपके विज़िटर्स को न कोई विज्ञापन दिखाता है, न ट्रैकिंग कुकी लगाता है।

एम्बेड कोड पाएँ

व्हील की अपनी लिस्ट रखने के लिए खाली छोड़ दें। एंट्री कोड के अंदर ही सेव रहती हैं, किसी सर्वर पर नहीं।

आकार

Notion, Google Sites के "By URL" और ऐसे दूसरे एडिटर के लिए जो HTML की जगह लिंक माँगते हैं।

लाइव प्रीव्यू

3 स्टेप में वेबसाइट पर स्पिन व्हील कैसे एम्बेड करें

  1. व्हील चुनें और एंट्री जोड़ें। इस पेज के जनरेटर में नामों का व्हील (Wheel of Names), हाँ या नहीं व्हील, नंबर, अक्षर, Twister या फ़ूड व्हील चुनें और हर लाइन में एक एंट्री लिखें — या व्हील की अपनी एंट्री रखने के लिए लिस्ट खाली छोड़ दें।
  2. साइज़ चुनें और कोड कॉपी करें। छोटा 400 px, मध्यम 520 px और बड़ा 640 px ऊँचा है, और चौड़ाई इसी सीमा तक 100% रहती है। कोड एक स्टैंडर्ड HTML <iframe> और एक लिंक वाली लाइन है।
  3. कोड को HTML ब्लॉक में पेस्ट करें और पब्लिश करें। इस ब्लॉक का नाम WordPress में Custom HTML, Wix में Embed HTML, Squarespace में Code, Shopify में Custom Liquid और Webflow में Code Embed है। जो एडिटर सिर्फ़ लिंक लेते हैं (Notion, Google Sites का "By URL"), उनमें एम्बेड लिंक डालें।

यह मध्यम साइज़ में तीन एंट्री — आरव, प्रिया और रोहन — वाले नामों के व्हील का पूरा कोड है:

<iframe src="https://spinandwheel.com/hi/?mode=embed&amp;entries=%E0%A4%86%E0%A4%B0%E0%A4%B5,%E0%A4%AA%E0%A5%8D%E0%A4%B0%E0%A4%BF%E0%A4%AF%E0%A4%BE,%E0%A4%B0%E0%A5%8B%E0%A4%B9%E0%A4%A8" title="Wheel of Names" width="100%" height="520" style="max-width:520px;border:0" loading="lazy" allow="fullscreen; clipboard-write"></iframe>
<p><a href="https://spinandwheel.com/hi/">Wheel of Names – Spin and Wheel</a></p>

एंट्री src पते में होती हैं (entries=, या लंबी लिस्ट के लिए कंप्रेस किया हुआ w=) और mode=embed सिर्फ़ व्हील दिखाता है। दूसरी लाइन व्हील के पेज का एक सामान्य लिंक है।

कोड कहाँ पेस्ट करें

कोड एक स्टैंडर्ड HTML <iframe> और एक लिंक है, इसलिए यह HTML स्वीकार करने वाली हर साइट पर चलता है। सबसे आम एडिटर के लिए स्टेप ये हैं।

WordPress

ब्लॉक एडिटर में Custom HTML ब्लॉक जोड़ें (/html टाइप करें), कोड पेस्ट करें और Preview पर क्लिक करें। सेल्फ़-होस्टेड WordPress डिफ़ॉल्ट रूप से iframe की अनुमति देता है; WordPress.com पर इसके लिए पेड प्लान की ज़रूरत पड़ सकती है।

Wix

Wix Editor में Add Elements (+) → Embed Code → Embed HTML पर क्लिक करें, Code चुनें, कोड पेस्ट करके Update दबाएँ, फिर बॉक्स को लगभग 520 px ऊँचा खींचें। Wix कस्टम HTML को अपने फ़्रेम के अंदर दिखाता है, इसलिए व्हील काम करता है लेकिन उसके नीचे का लिंक उसी फ़्रेम के अंदर खुलता है।

Squarespace

पेज एडिट करें, Add Block → Code पर क्लिक करें, ब्लॉक को HTML पर ही रहने दें, कोड पेस्ट करें और पेज सेव करें। व्हील पब्लिश किए गए पेज पर दिखता है; एडिटर में Code ब्लॉक उसकी जगह प्लेसहोल्डर दिखा सकता है।

Shopify

Online Store → Themes → Customize पर जाएँ, Add section → Custom Liquid चुनें, कोड को Liquid code फ़ील्ड में पेस्ट करें और सेव करें। Dawn जैसी फ्री थीम में Custom Liquid सेक्शन होता है।

Webflow

Add पैनल से Code Embed एलिमेंट को पेज पर खींचें, कोड पेस्ट करें, Save & Close पर क्लिक करें और साइट पब्लिश करें। कस्टम कोड एम्बेड के लिए Webflow का पेड साइट प्लान ज़रूरी हो सकता है।

Blogger

पोस्ट खोलें, पेंसिल मेन्यू से एडिटर को Compose view से HTML view पर बदलें, जहाँ व्हील दिखाना है वहाँ कोड पेस्ट करें और पब्लिश करें। साइडबार में व्हील के लिए Layout → Add a Gadget → HTML/JavaScript इस्तेमाल करें।

Google Sites

Insert → Embed चुनें। "Embed code" में पूरा कोड पेस्ट करें, या "By URL" में एम्बेड लिंक पेस्ट करें। Google Sites हर एम्बेड को अपने फ़्रेम के अंदर दिखाता है, इसलिए व्हील काम करता है लेकिन उसके नीचे का लिंक उसी फ़्रेम के अंदर खुलता है।

Notion

/embed टाइप करें, एम्बेड लिंक (HTML कोड नहीं) पेस्ट करें और Embed link दबाएँ। ब्लॉक के कोने को खींचकर उसे लगभग 520 px ऊँचा करें ताकि पूरा व्हील दिखे।

Canvas, Moodle और दूसरे LMS

पेज को HTML एडिटर में खोलें (Canvas: </> बटन; Moodle: Atto या TinyMCE एडिटर का HTML बटन) और कोड पेस्ट करें। अगर सेव करने के बाद व्हील गायब हो जाए, तो एडमिनिस्ट्रेटर ने दूसरी साइटों के iframe ब्लॉक किए हैं; उनसे spinandwheel.com को अनुमति देने को कहें।

कोई भी HTML पेज

कोड को पेज के <body> में पेस्ट करें। iframe अपनी साइज़ सीमा तक 100% चौड़ा होता है और loading="lazy" के साथ लोड होता है, इसलिए पेज का ऊपरी हिस्सा धीमा नहीं होता।

एम्बेड किया गया व्हील कैसे काम करता है

विजेट असली Spin and Wheel पेज ही है, एक हल्के एम्बेड मोड (?mode=embed) में: इसमें सिर्फ़ व्हील और एक छोटा "Spin and Wheel में खोलें" लिंक दिखता है। विज़िटर बीच वाले बटन से व्हील घुमाते हैं, विजेता को एक कार्ड में देखते हैं, और दोबारा घुमा सकते हैं या विजेता को लिस्ट से हटा सकते हैं। व्हील उसे मिले बॉक्स — चौड़ाई और ऊँचाई — के हिसाब से अपना साइज़ बदल लेता है, 320 px के फ़ोन से लेकर डेस्कटॉप साइडबार तक।

आपकी एंट्री iframe के पते में जाती हैं: छोटी लिस्ट entries= के रूप में, लंबी लिस्ट कंप्रेस होकर (deflate-raw, base64url) w= के रूप में। कुछ भी किसी सर्वर पर अपलोड या सेव नहीं होता, और आपके विज़िटर्स के ब्राउज़र स्टोरेज में कुछ नहीं लिखा जाता, इसलिए हर विज़िटर आपकी लिस्ट से शुरू करता है। "कस्टमाइज़ करें" पैनल में चुनी गई कलर थीम, स्पिन टाइम और साउंड सेटिंग भी इसी तरह (cfg=) साथ जाती हैं।

हर स्पिन में Web Crypto API का crypto.getRandomValues इस्तेमाल होता है, बिल्कुल spinandwheel.com की तरह, इसलिए N एंट्री में से हर एक का मौका 1/N होता है। एम्बेड कोई विज्ञापन नहीं दिखाता, कोई ट्रैकिंग कुकी नहीं लगाता और कोई service worker इंस्टॉल नहीं करता; यह सिर्फ़ गिनता है कि इसे कितनी बार लोड किया और घुमाया गया, गुमनाम रूप से और बिना कुकी के।

व्हील के नीचे की लाइन spinandwheel.com पर व्हील के पेज का एक सामान्य लिंक है। यह वैकल्पिक है — आप इसे बदल या हटा सकते हैं — लेकिन इसे रखने से दूसरे टीचर्स और क्रिएटर्स को यह टूल ढूँढने में मदद मिलती है। व्हील में होने वाले सुधार आपके एम्बेड तक अपने-आप पहुँचते हैं; एंट्री बदलने के लिए नया कोड बनाएँ और पुराने कोड की जगह लगाएँ।

FAQ

एम्बेड विजेट के बारे में सवाल-जवाब

क्या मैं अपनी वेबसाइट पर Wheel of Names (नामों का व्हील) फ्री में एम्बेड कर सकता हूँ?
हाँ। Wheel of Names और Spin and Wheel का हर दूसरा व्हील HTML की दो लाइनों से निजी, स्कूल और कमर्शियल साइटों पर फ्री में एम्बेड किया जा सकता है। न अकाउंट चाहिए, न API key, और इस्तेमाल की कोई सीमा नहीं — बस कोड कॉपी करें और पेस्ट करें।

क्या विजेट विज्ञापन दिखाता है या मेरे विज़िटर्स को ट्रैक करता है?
नहीं। एम्बेड किया गया व्हील कोई विज्ञापन नहीं दिखाता, कोई ट्रैकिंग कुकी नहीं लगाता और आपके विज़िटर्स के ब्राउज़र में कोई एंट्री या सेटिंग सेव नहीं करता। यह लोड और स्पिन को गुमनाम रूप से, बिना कुकी के गिनता है, ताकि हम देख सकें कि एम्बेड इस्तेमाल हो रहे हैं।

क्या विज़िटर एम्बेड किए गए व्हील की एंट्री बदल सकते हैं?
विज़िटर आपकी चुनी हुई एंट्री के साथ व्हील घुमाते हैं और अगले स्पिन के लिए विजेता को हटा सकते हैं। पूरी लिस्ट एडिट करने के लिए वे "Spin and Wheel में खोलें" पर क्लिक करते हैं, जिससे आपकी एंट्री के साथ पूरा व्हील नए टैब में खुलता है।

बाद में एंट्री कैसे बदलें?
इस पेज पर नई एंट्री के साथ नया कोड बनाएँ और अपनी साइट पर पुराने कोड की जगह लगा दें। एंट्री कोड का ही हिस्सा हैं, इसलिए जब तक आप पुराना एम्बेड नहीं बदलते, उसकी लिस्ट वैसी ही रहती है।

क्या एम्बेड किया गया व्हील रैंडम और निष्पक्ष है?
हाँ। विजेता crypto.getRandomValues (Web Crypto API) से चुना जाता है, इसलिए हर स्पिन पर N एंट्री में से हर एक का मौका ठीक 1/N होता है, बिल्कुल spinandwheel.com की तरह।

मुझे कौन-सा साइज़ चुनना चाहिए?
मध्यम (520 px ऊँचा) ज़्यादातर ब्लॉग पोस्ट में फ़िट होता है। साइडबार और पतले कॉलम के लिए छोटा (400 px) चुनें, और फ़ुल-विड्थ पेज या प्रोजेक्टर के लिए बड़ा (640 px)। चौड़ाई इसी सीमा तक 100% रहती है, और व्हील हमेशा बॉक्स के अंदर फ़िट रहता है।

क्या एम्बेड किया गया व्हील फ़ोन पर चलता है?
हाँ। iframe 100% चौड़ा है, व्हील उपलब्ध चौड़ाई और ऊँचाई के हिसाब से स्केल होता है, और 700 px से कम पर विजेता बड़े बटनों वाली नीचे की शीट में दिखता है।

क्या मैं लाइवस्ट्रीम के लिए OBS में व्हील एम्बेड कर सकता हूँ?
OBS Studio के लिए इस विजेट की जगह खास स्ट्रीम लिंक इस्तेमाल करें: एक ट्रांसपेरेंट डिस्प्ले ओवरले और एक कंट्रोल डॉक। OBS सेटअप गाइड दोनों के बारे में बताती है।