कैलकुलेटर विजेट क्या है
एक कैलकुलेटर विजेट एक पूर्ण Calculate.Studio कैलकुलेटर का छोटा, स्वयं-निहित संस्करण है जो आपके अपने पेज के अंदर चलता है। तकनीकी रूप से यह एक iframe है -- एक HTML एलिमेंट जो एक पेज को दूसरे पेज के अंदर एम्बेड करता है -- जो कैलकुलेटर के हल्के एम्बेड संस्करण की ओर इशारा करता है, साथ ही उसके नीचे एक-पंक्ति की क्रेडिट पैराग्राफ। iframe हर आधुनिक ब्राउज़र द्वारा समर्थित एक मानक HTML एलिमेंट है, इसलिए इंस्टॉल करने के लिए कुछ नहीं है और आपकी साइट के अपने कोड से टकराने वाला कुछ भी नहीं है।
यह विजेट वही कैलकुलेटर है जो Calculate.Studio पर चलता है: वही जांचे-परखे फॉर्मूले, वही तुरंत क्लाइंट-साइड परिणाम, और स्वास्थ्य व वित्त टूल्स के लिए वही डिस्क्लेमर। आपके विज़िटर अपनी संख्याएं टाइप करते हैं और अपने पेज को छोड़े बिना तुरंत परिणाम देखते हैं। क्योंकि गणना विज़िटर के ब्राउज़र में होती है न कि किसी सर्वर पर, यह विजेट भारी ट्रैफिक में भी तेज़ बना रहता है, और किसी भी विज़िटर का डेटा कहीं नहीं भेजा जाता।
साइट पर मौजूद सभी 210 कैलकुलेटरों में से हर एक को एम्बेड किया जा सकता है। calculate.studio/en/widgets पर गैलरी सबसे अधिक मांगे जाने वाले कैलकुलेटरों को दिखाती है -- BMI, मॉर्गेज, लोन, प्रतिशत, चक्रवृद्धि ब्याज, आयु, कैलोरी और GPA उनमें शामिल हैं -- और हर अलग कैलकुलेटर पेज पर शेयर बटनों के बगल में एक Embed बटन होता है जो उस विशिष्ट टूल का स्निपेट दिखाता है।
इसे कैसे इंस्टॉल करें -- सामान्य तरीका
इंस्टॉलेशन एक ही कॉपी-एंड-पेस्ट है। स्निपेट में दो हिस्से होते हैं: कैलकुलेटर दिखाने वाला iframe, और एक छोटी क्रेडिट पैराग्राफ जो पूरे कैलकुलेटर और Calculate.Studio से लिंक करती है। उस क्रेडिट लाइन को बरकरार रखना मुफ्त उपयोग की एकमात्र शर्त है -- यही वह चीज़ है जो इस प्रोग्राम को सबके लिए मुफ्त बनाए रखती है।
- calculate.studio/en/widgets खोलें, या कोई भी कैलकुलेटर पेज खोलकर </> Embed बटन पर क्लिक करें।
- Copy code पर क्लिक करें। स्निपेट आपके क्लिपबोर्ड में कॉपी हो जाएगी।
- अपने वेबसाइट एडिटर में, उस पेज के HTML (जिसे कभी-कभी "code" या "source" व्यू कहा जाता है) पर स्विच करें जहां आप कैलकुलेटर चाहते हैं।
- स्निपेट को वहां पेस्ट करें जहां कैलकुलेटर दिखना चाहिए, फिर सेव करके पब्लिश करें।
- पेज का पूर्वावलोकन करें। कैलकुलेटर तुरंत लोड होकर गणना करने लगना चाहिए -- नमूना संख्याओं से एक बार इसे टेस्ट करें।
प्लेटफ़ॉर्म-विशिष्ट निर्देश
अधिकांश वेबसाइट बिल्डर एक समर्पित ब्लॉक या एलिमेंट के ज़रिए कच्चा HTML स्वीकार करते हैं, इसलिए वही स्निपेट हर जगह काम करती है। नाम प्लेटफ़ॉर्म के अनुसार अलग-अलग हैं:
| प्लेटफ़ॉर्म | स्निपेट कहां पेस्ट करें |
|---|---|
| WordPress (ब्लॉक एडिटर) | एक "Custom HTML" ब्लॉक जोड़ें और स्निपेट उसमें पेस्ट करें। |
| WordPress (क्लासिक एडिटर) | एडिटर टैब को "Visual" से "Text" पर स्विच करें और पेस्ट करें। |
| Wix | एक "Embed HTML" एलिमेंट जोड़ें (Add → Embed code → Embed HTML) और पेस्ट करें। |
| Squarespace | पेज सेक्शन में एक "Code" ब्लॉक जोड़ें और पेस्ट करें। |
| Shopify | पेज या ब्लॉग-पोस्ट एडिटर में, <> (Show HTML) बटन पर क्लिक करें और पेस्ट करें। |
| Webflow | एक "Embed" कंपोनेंट जोड़ें और पेस्ट करें। |
| सादी HTML साइट | स्निपेट को सीधे पेज के HTML में वहां पेस्ट करें जहां कैलकुलेटर रेंडर होना चाहिए। |
आकार, स्टाइलिंग और परफ़ॉर्मेंस
स्निपेट एक व्यावहारिक डिफ़ॉल्ट के साथ आती है: पूरी चौड़ाई (width="100%"), उस कैलकुलेटर के इनपुट्स की संख्या से मेल खाती एक निश्चित ऊंचाई, और एक हल्का गोल बॉर्डर। अगर आपकी थीम को लंबे या छोटे फ्रेम की ज़रूरत है तो आप ऊंचाई का मान बदल सकते हैं, और अपने डिज़ाइन से मेल खाने के लिए बॉर्डर स्टाइलिंग को एडिट या हटा सकते हैं। चौड़ाई डिफ़ॉल्ट रूप से रिस्पॉन्सिव है, इसलिए यह विजेट बिना किसी अतिरिक्त काम के फोन पर भी काम करता है।
इस iframe में loading="lazy" शामिल है, जो एक मानक ब्राउज़र एट्रिब्यूट है जो विजेट का लोडिंग तब तक टाल देता है जब तक विज़िटर उसके पास स्क्रॉल न करे। इसका मतलब है कि एक कैलकुलेटर एम्बेड करने से आपके पेज के शुरुआती लोड टाइम में लगभग कुछ भी नहीं जुड़ता -- ब्राउज़र विजेट तभी फ़ेच करता है जब वह दिखने ही वाला हो।
एम्बेड पेजों को खुद noindex के साथ चिह्नित किया गया है और उनमें पूरे कैलकुलेटर पेज की ओर एक कैनोनिकल लिंक है, जो एम्बेड और डुप्लिकेट कंटेंट पर Google के मार्गदर्शन का पालन करता है। इसलिए विजेट एम्बेड करने से आपकी या हमारी साइट के लिए डुप्लिकेट-कंटेंट समस्याएं पैदा नहीं हो सकतीं।
एक ही नियम: क्रेडिट लिंक बनाए रखें
यह विजेट प्रोग्राम बिना साइनअप के मुफ्त है क्योंकि इसकी एक ही शर्त है: iframe के नीचे की छोटी क्रेडिट पैराग्राफ -- वह पंक्ति जो "[कैलकुलेटर का नाम] by Calculate.Studio" पढ़ती है -- अपनी जगह पर बनी रहनी चाहिए। यह 12-पिक्सेल टेक्स्ट है जो विजेट के नीचे चुपचाप बैठा रहता है और आपके कंटेंट से प्रतिस्पर्धा नहीं करता।
आप iframe का आकार बदलने, उसका बॉर्डर रीस्टाइल करने और विजेट को अपनी साइट पर कहीं भी रखने के लिए स्वतंत्र हैं, जिसमें कमर्शियल साइटें, ब्लॉग और क्लाइंट प्रोजेक्ट शामिल हैं। अगर आपको ऐसा कैलकुलेटर चाहिए जो फ़ीचर्ड गैलरी में नहीं है, तो साइट के हर कैलकुलेटर पेज का अपना Embed बटन है, इसलिए सभी 210 टूल्स उपलब्ध हैं।
विजेट के रूप में कौन-से कैलकुलेटर सबसे अच्छा काम करते हैं?
आपकी साइट के लिए सबसे अच्छा विजेट वही है जिसे खोजने के लिए आपके पाठकों को अन्यथा आपका पेज छोड़ना पड़ता। फिटनेस और वेलनेस ब्लॉग आमतौर पर BMI, कैलोरी या TDEE कैलकुलेटर एम्बेड करते हैं। रियल-एस्टेट और पर्सनल-फाइनेंस साइटें मॉर्गेज, लोन और चक्रवृद्धि-ब्याज कैलकुलेटर एम्बेड करती हैं। स्टूडेंट और एजुकेशन साइटें GPA और प्रतिशत कैलकुलेटर एम्बेड करती हैं, और सामान्य-रुचि वाले ब्लॉग अक्सर एवरग्रीन पोस्ट में आयु कैलकुलेटर जोड़ते हैं।
क्योंकि हर विजेट कैलकुलेटर का एक संक्षिप्त संस्करण दिखाता है जिसमें पूर्ण संस्करण -- जिसमें व्याख्या तालिकाएं, हल किए गए उदाहरण और स्रोत शामिल हैं -- का लिंक होता है, आपके पाठकों को आपके पेज पर तुरंत जवाब मिलता है और चाहने पर गहरे संदर्भ का रास्ता भी।
अक्सर पूछे जाने वाले सवाल
क्या कैलकुलेटर विजेट वाकई मुफ्त है?
हां। इसमें कोई साइनअप, कोई API key, कोई उपयोग सीमा और कोई लागत नहीं है। एकमात्र शर्त यह है कि विजेट के नीचे की छोटी क्रेडिट लाइन, जो Calculate.Studio से लिंक करती है, अपनी जगह पर बनी रहे।
क्या यह विजेट मेरी वेबसाइट को धीमा कर देगा?
नहीं। iframe ब्राउज़र की नेटिव लेज़ी लोडिंग का उपयोग करता है, इसलिए यह तभी फ़ेच होता है जब कोई विज़िटर उसके पास स्क्रॉल करता है, और गणना पूरी तरह विज़िटर के ब्राउज़र में चलती है। यह आपके शुरुआती पेज लोड में लगभग कुछ भी नहीं जोड़ता।
क्या मैं किसी कमर्शियल या क्लाइंट वेबसाइट पर कैलकुलेटर एम्बेड कर सकता हूं?
हां। ये विजेट कमर्शियल साइटों, ब्लॉग और क्लाइंट प्रोजेक्ट पर बिना किसी लागत के इस्तेमाल किए जा सकते हैं, बशर्ते विजेट के नीचे की क्रेडिट लिंक बरकरार रहे।
क्या मैं विजेट का आकार या बॉर्डर बदल सकता हूं?
हां। आप अपनी साइट से मेल खाने के लिए iframe की ऊंचाई और बॉर्डर स्टाइलिंग एडिट कर सकते हैं। चौड़ाई पहले से ही रिस्पॉन्सिव है (100%), इसलिए यह फोन और संकरे कॉलम के अनुसार अपने आप ढल जाती है।
क्या विजेट एम्बेड करने से SEO के लिए डुप्लिकेट-कंटेंट समस्या होती है?
नहीं। एम्बेड पेजों को noindex के साथ चिह्नित किया गया है और उनमें पूरे कैलकुलेटर पेज की ओर एक कैनोनिकल लिंक है, जो Google के दस्तावेज़ित मार्गदर्शन का पालन करता है, इसलिए सर्च इंजन विजेट को आपकी साइट पर डुप्लिकेट कंटेंट नहीं मानते।
संदर्भ
- MDN Web Docs — <iframe>: The Inline Frame element. Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
- MDN Web Docs — Lazy loading (loading attribute). Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
- Google Search Central — Consolidate duplicate URLs with canonicals. Google. https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
- Google Search Central — Block search indexing with noindex. Google. https://developers.google.com/search/docs/crawling-indexing/block-indexing
- WHATWG HTML Living Standard — The iframe element. https://html.spec.whatwg.org/multipage/iframe-embed-object.html