अपनी वेबसाइट में एक फ्री WhatsApp चैट विजेट कैसे जोड़ें (कोड की ज़रूरत नहीं)

किसी भी वेबसाइट में कुछ मिनटों में एक फ्री WhatsApp चैट विजेट जोड़ें। सीधे wa.me लिंक का तरीका, और एक जनरेटर जो आपको तैयार, कस्टमाइज़ेबल, कोड-फ्री स्निपेट देता है।

एक वेबसाइट में WhatsApp चैट विजेट जोड़ने के दो सच्चे तरीके हैं, बिना किसी को पैसे दिए: एक सीधा wa.me लिंक पेस्ट करें और इसे अपने आप से स्टाइल करें, या एक जनरेटर का इस्तेमाल करें जो आपको एक तैयार, कस्टमाइज़ेबल स्निपेट देता है। दोनों ही बिल्कुल फ्री होते हैं और दोनों को कुछ मिनटों में पूरा किया जा सकता है। लेकिन दोनों आपको छह महीने बाद बिल्कुल अलग जगहों पर छोड़ते हैं।

यह दोनों तरीकों से गुज़रता है, सीधे लिंक से शुरू करते हुए ताकि आप जान सकें कि जब आप इसे छोड़ते हैं तो आप क्या नहीं ले रहे हैं।

विधि 1: सीधा wa.me लिंक

सबसे न्यूनतम संस्करण एक पंक्ति HTML है:

<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>

15551234567 को अपने नंबर से बदलें, पूरे अंतर्राष्ट्रीय फॉर्मेट में, बिना प्लस साइन के, बिना खाली स्थान के, बिना शुरुआती ज़ीरो के। text पैरामीटर एक पहले से भरी गई संदेश है, URL-एन्कोडेड, तो %20 एक स्थान है और %2C एक अल्पविराम है। इसे क्लिक करें और WhatsApp खुल जाता है, उस संदेश के साथ पहले से ही बॉक्स में टाइप किया हुआ, आने वाले व्यक्ति को भेजने के लिए तैयार।

wa.me Meta का अपना छोटा लिंक है, इसलिए दूसरे सिरे पर व्यवहार सुसंगत होता है: एक फोन पर, यह WhatsApp ऐप को सीधे खोलता है अगर यह स्थापित है, या आने वाले को ऐप स्टोर भेजता है अगर यह नहीं है। डेस्कटॉप ब्राउज़र पर बिना ऐप स्थापित किए, यह इसके बजाय एक नए टैब में web.whatsapp.com खोलता है। आपको यह पहचान स्वयं बनाने की ज़रूरत नहीं है, जो इस दृष्टिकोण का वह एक हिस्सा है जो सच में आपके लिए हल किया गया है।

बाकी सब कुछ नहीं है। वह एक सीधा लिंक बस नीला रेखांकित पाठ है जहां कहीं आप इसे डालते हैं। इसे उस तैरते हुए नीचे के कोने के बटन में बदलने के लिए जो लोग कहते हैं “WhatsApp चैट विजेट,” आप CSS अपने आप लिख रहे हैं:

<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
   target="_blank" rel="noopener"
   style="position:fixed; bottom:20px; right:20px; z-index:5000;
          width:56px; height:56px; border-radius:50%;
          background:#25D366; display:flex; align-items:center;
          justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
  <img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>

यह काम करता है, लेकिन अब आपको एक आइकन फाइल की भी ज़रूरत है, एक z-index जो आपके कुकी बैनर और किसी भी मोडल के ऊपर बैठने के लिए काफी अधिक है, बिना मोबाइल पर अपने खुद के नेविगेशन को कवर किए, और एक योजना अगर कोई अगले महीने संदेश पाठ को बदलना चाहे, जिसका मतलब इसी मार्कअप ब्लॉक को फिर से खोलना है, जहां कहीं यह पेस्ट किया गया है, हर पृष्ठ पर या टेम्पलेट जो इसे रखता है।

विधि 2: मुफ्त WhatsApp चैट विजेट जनरेटर

WhatsApp चैट विजेट जनरेटर ऊपर के लिंक का वही काम करता है, साथ ही स्टाइलिंग, पोजिशनिंग, और आइकन, और एक स्क्रिप्ट टैग के बजाय एक ब्लॉक देता है कि आप बनाए रखने के लिए जिम्मेदार हैं। यह मुफ्त है, किसी खाते की आवश्यकता नहीं है, और यह WhatsApp Business API को छूता नहीं है, तो इससे पहले कोई सत्यापन चरण नहीं होता है कि आप इसका उपयोग कर सकते हैं।

यहां असली चलना है:

1. अपना WhatsApp नंबर दर्ज करें। जनरेटर में एक देश कोड पिकर बनाया गया है, जो आपके ब्राउज़र की रिपोर्ट करने वाले देश को डिफॉल्ट करता है, इसलिए आप हाथ से अंतर्राष्ट्रीय डायलिंग उपसर्ग का अनुमान नहीं लगा रहे हैं।
2. एक रंग चुनें। एक रंग नमूना बटन की पृष्ठभूमि सेट करता है। WhatsApp का अपना हरा (#25D366) डिफॉल्ट है, लेकिन क्षेत्र किसी भी हेक्स मूल्य लेता है अगर आप इसे आपकी साइट के ब्रांड रंग से मेल करना चाहते हैं।
3. स्थान सेट करें। दो ड्रॉपडाउन नियंत्रित करते हैं कि क्या बटन स्क्रीन के शीर्ष या नीचे बैठता है, और बाएं या दाएं पक्ष, प्रत्येक के साथ अपने स्वयं के पिक्सेल ऑफसेट क्षेत्र ताकि आप इसे एक तैरती हुई नेविगेशन बार या पहले से उस कोने में रहने वाले एक अन्य विजेट से दूर धकेल सकें।
4. z-index सेट करें। एक संख्यात्मक क्षेत्र, डिफॉल्ट रूप से 5000, नियंत्रित करता है कि बटन क्या ऊपर रखता है। इसे बढ़ाएं अगर एक चैट उपकरण, कुकी बैनर, या आपकी साइट पर मोडल वर्तमान में इसे कवर कर रहे हैं।
5. एक स्वागत संदेश जोड़ें। जो कुछ भी आप यहां टाइप करते हैं वह आने वाले के WhatsApp संदेश बॉक्स में पूर्व-भरी गई पाठ बन जाता है, सीधे लिंक में text पैरामीटर के समान विचार, लेकिन एक URL-एन्कोडेड स्ट्रिंग के बजाय फॉर्म से संपादन योग्य।
6. वैकल्पिक रूप से पॉपअप चालू करें। एक चेकबॉक्स एक छोटा भाषण-बुलबुला प्रॉम्प्ट जोड़ता है (इसके अपने कस्टम प्रश्न पाठ और सेकंड में देरी से पहले यह दिखाई देता है) जो बटन के बगल में दिखाई देता है, इससे पहले कि कोई इसे क्लिक करे, ध्यान को विजेट की ओर ले जाने के लिए बजाय किसी को कोने में एक सादे आइकन को नोटिस करने के लिए प्रतीक्षा करते हुए।

जैसा कि आप फॉर्म भरते हैं, बटन का एक लाइव पूर्वावलोकन पृष्ठ पर प्रदान करता है, और कोड पैनल इसके बगल में वास्तविक समय में अद्यतन करता है:

<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
  data-widget-id="wgt_xxxxxxxx"
  data-whatsapp-number="15551234567"
  data-color="#25D366"
  data-position-vertical="bottom"
  data-position-horizontal="right"
  data-offset-vertical="20"
  data-offset-horizontal="20"
  data-z-index="5000"
  data-greeting="Hi! How can we help?"
  async
  defer
></script>

कॉपी क्लिक करें, वह एक टैग कहीं भी अपनी साइट पर बंद </body> टैग से पहले पेस्ट करें, और विजेट लाइव है। कुछ और अपलोड करने की ज़रूरत नहीं है, कोई आइकन फाइल नहीं, कोई अलग स्टाइलशीट नहीं। फॉर्म से हर सेटिंग (रंग, स्थिति, ऑफसेट, अभिवादन, पॉपअप) उस एक टैग पर एक data- विशेषता के रूप में एन्कोड किया जाता है, इसलिए पूरी चीज़ एक पेस्ट के रूप में यात्रा करती है।

क्यों तैयार स्निपेट बेहतर रहता है

दोनों आउटपुट सतह पर समान दिखते हैं, एक बटन कोने में जो WhatsApp खोलता है, लेकिन वे अलग तरह से उम्र बढ़ाते हैं।

हाथ से लुढ़का हुआ संस्करण के साथ, हर सेटिंग इनलाइन शैलियों या एक अलग CSS फाइल के अंदर एक मान दफन है। अभिवादन को बदलना एक URL-एन्कोडेड स्ट्रिंग में text पैरामीटर को ढूंढना और संपादित करना मतलब है। बटन को हिलाना क्योंकि एक नया कुकी बैनर अब इसे ओवरलैप करता है, हर पृष्ठ पर CSS को फिर से संपादित करना या टेम्पलेट जहां आप इसे पेस्ट किया है, और अगर आप एक को भूल गए, तो वह पृष्ठ चुप-चाप एक टूटे हुए दिखने वाले विजेट के साथ रहता है जब तक कोई इसे नोटिस न करे। इनमें से कोई भी जोर से विफल नहीं होता है, यह सिर्फ पृष्ठ दर पृष्ठ सिंक से बाहर निकल जाता है।

तैयार स्निपेट हर एक को एक पंक्ति पर एक लेबल विशेषता के रूप में रखता है जिसे आप सेकंड में फॉर्म से फिर से कॉपी कर सकते हैं, फिर आपकी साइट में खोज और प्रतिस्थापन, अगर आप एक साझा शीर्षलेख या पाद लेख शामिल का उपयोग नहीं कर रहे हैं। और क्योंकि असली बटन तर्क आपके द्वारा पेस्ट किए गए कोड में नहीं, होस्ट की गई स्क्रिप्ट फाइल में रहता है, बग फिक्स और विजेट के लिए व्यवहार सुधार आपकी साइट को फिर से छुए बिना शिप करते हैं।

स्निपेट कहां पेस्ट करें

यांत्रिकी हर जगह समान है: स्निपेट कहीं भी रखें जो हर पृष्ठ पर प्रदान करता है, आदर्श रूप से </body> से पहले।

• एक सादा HTML साइट: इसे सीधे आपके साझा पाद लेख टेम्पलेट में पेस्ट करें, या हर पृष्ठ में अगर आपके पास कोई नहीं है।
• WordPress: एक कस्टम HTML ब्लॉक, या आपके थीम के पाद लेख के माध्यम से Appearance → Theme File Editor, एक अलग प्लगइन स्थापित किए बिना काम करता है।
• Shopify: इसे theme.liquid में पेस्ट करें, बंद </body> टैग से ठीक ऊपर, Online Store → Themes → Edit Code के माध्यम से।
• Wix: Settings → Custom Code के तहत अंतर्निहित Custom Code पैनल का उपयोग करें, और इसे सभी पृष्ठों पर लोड करने के लिए सेट करें।
• Webflow: Project Settings → Custom Code के तहत Footer Code फाइल इसे एक ही जगह पर साइट-व्यापी लागू करता है।

इनमें से हर एक के पास अपने स्वयं के क्वर्क हैं जो अपने स्वयं पर एक लंबे दिखने के लायक हैं, हम अलग से WordPress में अधिक विस्तार से कवर करेंगे, लेकिन पेस्ट चरण स्वयं हर जगह समान है: एक स्क्रिप्ट टैग, एक जगह, हर पृष्ठ पर लागू।

इसे करने से पहले इसे परीक्षण करें

साइट को एक गुप्त विंडो में लोड करें ताकि कैश की गई शैलियां असली समस्या को छिपा न दें, और बटन को डेस्कटॉप और वास्तविक फोन दोनों पर जांचें, सिर्फ एक आकार बदलने वाली ब्राउज़र विंडो नहीं। इसे एक बार प्रत्येक से क्लिक करें और पुष्टि करें कि यह WhatsApp खोलता है (मोबाइल पर ऐप, डेस्कटॉप पर web.whatsapp.com) आपके नंबर और अभिवादन संदेश के साथ पहले से ही भरा हुआ। फिर किसी भी कुकी बैनर या चिपचिपे तत्वों के साथ पृष्ठ को स्क्रॉल करें दिखाई देता है, सबसे आम विफलता इस बिंदु पर एक z-index संघर्ष है, जहां विजेट एक अन्य निश्चित-स्थिति तत्व के पीछे प्रदान करता है, इसके ऊपर नहीं।

अक्सर पूछे जाने वाले सवाल

क्या यह सच में मुफ्त है, या कोई पकड़ है? जनरेटर स्वयं बिना खाते की आवश्यकता के मुफ्त है। विजेट स्क्रिप्ट जो यह इंगित करता है कि होस्ट किया गया है और बिना किसी लागत के परोसा है। अगर बाद में आप The Chat Quotient का Chrome एक्सटेंशन स्थापित करते हैं, विजेट के माध्यम से आने वाली बातचीत को प्रबंधित करने के लिए, जिसके पास इसकी अपनी मुफ्त योजना है, लेकिन यह एक अलग, वैकल्पिक चरण है, विजेट का उपयोग करने की आवश्यकता नहीं है।

क्या एक WhatsApp विजेट WhatsApp Web के समान है? नहीं, और यह एक आम गड़बड़ी है। WhatsApp Web (web.whatsapp.com) वह इंटरफेस है जिसका उपयोग आप ब्राउज़र से WhatsApp संदेशों को पढ़ने और भेजने के लिए करते हैं। एक WhatsApp विजेट वेब तत्व आपकी साइट में जोड़ने के लिए छोटे बटन हैं जो, क्लिक करने पर, एक चैट खोलता है, WhatsApp ऐप में मोबाइल पर या WhatsApp Web पर डेस्कटॉप पर जिसके पास डेस्कटॉप ऐप स्थापित नहीं है। विजेट कुछ है आप एम्बेड; WhatsApp Web जहां परिणामी बातचीत खुल जाता है।

क्या विजेट काम करता है अगर आने वाले के पास WhatsApp स्थापित नहीं है? मोबाइल पर, इसे बिना ऐप स्थापित किए क्लिक करने के लिए आने वाले को उनके ऐप स्टोर भेजता है, पहले WhatsApp स्थापित करने के लिए। इस चरण के आसपास कोई तरीका नहीं है, क्योंकि लिंक केवल WhatsApp को हस्तांतरित करने को जानता है, न कि किसी अन्य मैसेजिंग चैनल को प्रतिस्थापित करने के लिए।

क्या मेरे पास एक ही विजेट पर एक से अधिक WhatsApp नंबर हो सकता है, जैसे बिक्री और समर्थन? एक बटन पर नहीं। विजेट प्रति उदाहरण एक एकल WhatsApp नंबर के आसपास बनाया गया है। अगर आपको दो प्रवेश बिंदु चाहिए, आप दो विजेट अलग-अलग स्थितियों और अभिवादन के साथ जोड़ेंगे, हालांकि इस बिंदु पर एक समर्पित संपर्क पृष्ठ दोनों के साथ सूचीबद्ध आमतौर पर आने वाले के लिए स्पष्ट है दो बटन एक ही कोने में ढेर किए गए बजाय।

क्या मुझे जनरेटर का उपयोग करने के लिए कोड जानने की आवश्यकता है? नहीं। हर सेटिंग एक फॉर्म फील्ड है, और एकमात्र चीज़ आप पेस्ट करते हैं कि यह एकल स्क्रिप्ट टैग है, समान कॉपी-पेस्ट चरण भले ही आपकी साइट किस प्लेटफॉर्म पर चलती है।

निचली पंक्ति

एक wa.me लिंक सच में वह सब है जिसकी आपको आवश्यकता है अगर आप अपने CSS को लिखने और बनाए रखने में सहज हैं और हर बार कुछ बदलने की ज़रूरत है उस कोड को फिर से जाने के लिए। WhatsApp चैट विजेट जनरेटर समान परिणाम देता है, एक तैरता हुआ बटन जो एक पूर्व-भरी हुई WhatsApp चैट खोलता है, CSS के बिना, आइकन फाइल के बिना, या रखरखाव जो इसे हाथ-लुढ़का देता है, और यह अभी भी मुफ्त है।