गाइड

WordPress में बिना प्लगइन के WhatsApp चैट विजेट कैसे जोड़ें

Abhishek Sachan
#WhatsApp चैट विजेट WordPress#WordPress WhatsApp विजेट#बिना प्लगइन#The Chat Quotient

प्लगइन की जगह कॉपी-पेस्ट स्निपेट से WordPress में WhatsApp चैट विजेट जोड़ें: तीन प्लेसमेंट तरीके, साथ ही एक और प्लगइन इंस्टॉल करने से आप क्या खो देते हैं।

WordPress डैशबोर्ड का Custom HTML ब्लॉक जिसमें WhatsApp widget स्क्रिप्ट लाइव साइट प्रीव्यू के बगल में दिखाई गई है

“WhatsApp chat widget WordPress” सर्च करें तो ज़्यादातर नतीजे आपको एक प्लगइन की तरफ़ ले जाते हैं: उसे इंस्टॉल करें, एक्टिवेट करें, उसकी अपनी सेटिंग्स स्क्रीन में कॉन्फ़िगर करें, और अब यह आपकी साइट पर एक और ऐसी चीज़ बन जाती है जिसे हर बार WordPress core या आपकी थीम बदलने पर अपडेट करना पड़ता है। एक तेज़ रास्ता है जो प्लगइन को पूरी तरह टाल देता है। WhatsApp widget एक तैरता हुआ बटन है, और एक तैरता हुआ बटन कुछ लाइनों का HTML और एक स्क्रिप्ट टैग भर है, और WordPress के पास इन दोनों को पेस्ट करने के लिए पहले से जगह है, बिना आपके Plugins पेज पर कुछ भी जोड़े।

यह लेख वही तरीका बताता है, आपकी साइट किस तरह बनी है उसके हिसाब से तीन अलग-अलग तरीकों से, और साथ ही यह भी कि एक डेडिकेटेड प्लगइन कहां असल में अपनी कीमत वसूल करता है।

प्लगइन क्यों टालें

एक WordPress WhatsApp प्लगइन न तो फ़र्ज़ी है न ख़राब, यह सच में एक तैरता हुआ बटन जोड़ता है, बिल्कुल वैसे ही जैसे स्निपेट वाला तरीका करता है। फ़र्क़ इस बात का है कि इसे बनाए रखने की कीमत क्या है। WordPress साइट पर हर प्लगइन ऐसा कोड है जो हर पेज लोड पर चलता है, WordPress या PHP वर्ज़न बदलने पर अपने खुद के अपडेट मांगता है, और अगर पुराना पड़ जाए तो सिक्योरिटी स्कैनर के लिए एक और फ्लैग बन जाता है। एक page builder, एक SEO प्लगइन, एक कैशिंग प्लगइन, एक फ़ॉर्म प्लगइन, और अब एक WhatsApp प्लगइन वाली साइट पर पांच अलग-अलग चीज़ें होती हैं जो एक-दूसरे से टकरा सकती हैं, और खासतौर पर WhatsApp widget प्लगइन हर पेज पर अपना CSS और JavaScript enqueue करते हैं, चाहे कोई विज़िटर बटन पर कभी क्लिक करे या न करे।

एक पेस्ट किए हुए स्निपेट का न कोई सेटिंग्स स्क्रीन होता है, न कोई changelog, न कोई compatibility notice। यह आपकी थीम के फुटर में एक स्टैटिक ब्लॉक है या किसी पेज में एक Custom HTML ब्लॉक, और WordPress इसे बिल्कुल किसी और एम्बेड किए गए कॉन्टेंट की तरह ट्रीट करता है। न कुछ एक्टिवेट करना, न कुछ पैच रखना।

फिर भी, हर साइट के लिए प्लगइन ग़लत चुनाव नहीं है। अगर आप कहीं भी कोड पेस्ट करने में सहज नहीं हैं, या आप चाहते हैं कि widget की सेटिंग्स wp-admin से किसी ऐसे व्यक्ति द्वारा बदली जा सकें जिसे Appearance → Theme File Editor को नहीं छूना चाहिए, तो प्लगइन का सेटिंग्स UI ज़्यादा सुरक्षित सौदा है। स्निपेट वाला रास्ता यह मान लेता है कि आप एक बार कोड का एक ब्लॉक कॉपी-पेस्ट करने में सहज हैं और उसे तभी दोबारा देखेंगे जब वाकई कुछ बदलना हो।

स्निपेट पाना

WhatsApp चैट विजेट जनरेटर आपके नंबर, बटन के रंग, पोज़िशन, और अभिवादन मैसेज को एक स्क्रिप्ट टैग में बदल देता है। फ़ॉर्म भरें, WhatsApp नंबर अंतर्राष्ट्रीय फॉर्मेट में बिना शुरुआती ज़ीरो या प्लस साइन के डालें, एक रंग चुनें, बटन किस कोने में बैठेगा यह चुनें, और टूल कुछ ऐसा आउटपुट देता है:

<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>

बस यही पूरा widget है। कोई आइकन फाइल अपलोड नहीं करनी, कोई स्टाइलशीट enqueue नहीं करनी, कोई PHP नहीं। इसे कॉपी करें, और आपकी WordPress साइट कैसे बनी है उसके हिसाब से नीचे दिए तीन प्लेसमेंट में से एक चुनें।

तरीका 1: एक Custom HTML ब्लॉक

अगर आपकी थीम block editor (Gutenberg) पर बनी है, तो स्निपेट डालने की सबसे तेज़ जगह सीधे किसी पेज पर या किसी reusable block में है, लेकिन इससे widget सिर्फ़ उसी एक पेज पर दिखेगा। पूरी साइट पर widget के लिए, block editor असल में footer-wide injection के लिए नहीं बना है, जब तक आपकी थीम इसके लिए कोई template part expose न करे।

जो थीम full site editing सपोर्ट करती हैं, उनमें से ज़्यादातर आपको सीधे footer template में एक Custom HTML ब्लॉक जोड़ने देती हैं:

  1. Appearance → Editor पर जाएं (पुराने सेटअप में Appearance → Theme Editor)।
  2. Footer template part खोलें।
  3. उसके अंदर कहीं भी एक Custom HTML ब्लॉक जोड़ें।
  4. स्क्रिप्ट टैग पेस्ट करें और सेव करें।

चूंकि यह footer template part में रहता है, अब यह उस footer का इस्तेमाल करने वाले हर पेज पर रेंडर होता है, जो ज़्यादातर थीम में साइट के हर पेज पर होता है।

तरीका 2: Theme File Editor के ज़रिए थीम की footer.php

क्लासिक (non-block) थीम में विज़ुअली एडिट करने के लिए कोई footer template part नहीं होता, इसलिए स्निपेट सीधे थीम की PHP फाइल में जाता है:

  1. Appearance → Theme File Editor पर जाएं।
  2. दाईं तरफ़ फाइल लिस्ट में footer.php खोलें।
  3. क्लोज़िंग </body> टैग ढूंढें, जो आमतौर पर फाइल के आख़िर के पास होता है।
  4. स्क्रिप्ट टैग को अपनी अलग लाइन में, </body> से ठीक पहले पेस्ट करें।
  5. Update File पर क्लिक करें।

यह वह एकमात्र तरीका है जो सीधे थीम कोड को छूता है, इसलिए इसके साथ स्निपेट वाले तरीके की एक असली सावधानी भी आती है: कोई थीम अपडेट footer.php को ओवरराइट कर सकता है और चुपचाप आपका पेस्ट किया हुआ हिस्सा हटा सकता है। अगर आपकी थीम child theme सपोर्ट करती है, तो यह एडिट child theme की footer.php में करें, क्योंकि child theme की फाइलें parent theme के अपडेट में बची रहती हैं। अगर आप child theme नहीं चला रहे और एक सेट अप नहीं करना चाहते, तो Insert Headers and Footers जैसा प्लगइन (एक सिंगल-पर्पज़, कम-मेंटेनेंस वाला प्लगइन, पूरा WhatsApp widget प्लगइन नहीं) आपको एक डेडिकेटेड footer फील्ड देता है जो थीम फाइलों से बिल्कुल जुड़ा नहीं होता, और हर थीम अपडेट में अपने आप बचा रहता है।

तरीका 3: Elementor या Divi का embed code widget

अगर साइट किसी page builder से बनी है, तो आमतौर पर इसी काम के लिए बना एक widget मौजूद होता है:

दोनों builder रॉ HTML और स्क्रिप्ट टैग को जैसा है वैसा ही रेंडर करते हैं, कोई sanitization <script> टैग को नहीं हटाता जैसा कुछ WYSIWYG कॉन्टेंट एरिया में होता है, इसलिए widget सीधे footer.php में पेस्ट करने जैसा ही लोड होता है और वैसा ही व्यवहार करता है।

यह काम कर रहा है या नहीं, यह देखना

आपने चाहे जिस तरीके से इसे पेस्ट किया हो, साइट को एक incognito विंडो में लोड करें ताकि कोई कैश किया हुआ पेज आपको पुराना वर्ज़न न दिखाए, और हर उस template को चेक करें जहां widget दिखना चाहिए: होमपेज, कोई ब्लॉग पोस्ट, और बाक़ी साइट से अलग template पर बना कोई भी लैंडिंग पेज, क्योंकि एक थीम फाइल या builder template में किया गया footer एडिट किसी ऐसे लैंडिंग पेज को अपने आप कवर नहीं करता जो अलग template इस्तेमाल करता है। बटन को डेस्कटॉप और असली फोन दोनों पर क्लिक करें। WhatsApp इंस्टॉल वाले मोबाइल पर, इसे सीधे ऐप खोलनी चाहिए, आपके नंबर और अभिवादन के साथ पहले से भरा हुआ; डेस्कटॉप पर, यह web.whatsapp.com को एक नए टैब में खोलता है।

कब प्लगइन सच में ज़्यादा सही बैठता है

कुछ स्थितियां पलड़ा वापस डेडिकेटेड प्लगइन इंस्टॉल करने की तरफ़ झुका देती हैं:

अगर साइट कई ग़ैर-टेक्निकल लोग मैनेज करते हैं और उनमें से किसी को भी Theme File Editor के आस-पास नहीं होना चाहिए, तो प्लगइन का सेटिंग्स स्क्रीन इस उम्मीद से ज़्यादा सुरक्षित है कि हर कोई footer.php को छुए बिना छोड़ देगा। अगर आप चाहते हैं कि widget किसी template फाइल को एडिट करने की बजाय editor sidebar में एक checkbox के ज़रिए हर पेज या post type पर दिखे या छुपे, तो यह per-page लॉजिक ठीक वही है जिसे एक प्लगइन का PHP हैंडल करता है और एक स्टैटिक स्निपेट नहीं कर सकता। और अगर आप पहले से किसी प्लगइन के ज़रिए पूरा WhatsApp Business API इंटीग्रेशन चला रहे हैं जो widget को भी एक बड़े feature set के हिस्से के तौर पर हैंडल करता है, तो सिर्फ़ widget वाले हिस्से को अलग स्निपेट से बदलना एक चीज़ हटाने की बजाय मेंटेन करने के लिए एक और चीज़ जोड़ देता है।

आम मामले के लिए, एक WhatsApp नंबर, एक बटन, हर पेज पर एक जैसा व्यवहार, स्निपेट वही काम करता है और बाद में अपडेट करने के लिए कुछ भी नहीं बचता।

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

क्या इससे मेरी WordPress साइट धीमी हो जाएगी? स्क्रिप्ट टैग async और defer इस्तेमाल करता है, इसलिए यह बाक़ी पेज को ब्लॉक किए बिना लोड होता है, और यह एक सिंगल एक्सटर्नल रिक्वेस्ट है, न कि उन कई अलग-अलग स्टाइल और स्क्रिप्ट फाइलों जितना जो एक पूरा प्लगइन enqueue कर सकता है।

क्या यह WP Rocket या W3 Total Cache जैसे कैशिंग प्लगइन के साथ काम करता है? हां। चूंकि यह एक स्टैटिक स्क्रिप्ट टैग है, न कि हर रिक्वेस्ट पर PHP द्वारा रेंडर की जाने वाली कोई चीज़, page caching इसमें दख़ल नहीं देता, कुछ प्लगइन-आधारित widget के उलट जो कभी-कभी aggressive HTML minification सेटिंग्स से हट जाते हैं।

क्या मैं इसे WooCommerce के साथ इस्तेमाल कर सकता/सकती हूं? हां, प्लेसमेंट बिल्कुल वैसा ही है, footer.php, एक footer template part, या आपके page builder का footer template, इनमें से किसी को इससे फ़र्क़ नहीं पड़ता कि साइट पर WooCommerce भी चल रहा है या नहीं।

अगर मेरी थीम में Theme File Editor उपलब्ध ही नहीं है तो? कुछ होस्ट इसे सिक्योरिटी वजहों से डिसेबल कर देते हैं। ऐसे में, अगर आपकी थीम full site editing सपोर्ट करती है तो अपने footer template part में Custom HTML ब्लॉक इस्तेमाल करें, अगर आपके पास page builder है तो उसका embed widget इस्तेमाल करें, या फिर एक फॉलबैक के तौर पर Insert Headers and Footers जैसा छोटा सिंगल-पर्पज़ प्लगइन इस्तेमाल करें जिसे थीम फाइलें छूने की बिल्कुल ज़रूरत नहीं पड़ती।

अगर मैं WordPress थीम बदलूं तो क्या मुझे स्निपेट दोबारा डालनी होगी? हां, क्योंकि यह पुरानी थीम की footer.php या template part में पेस्ट किया गया था। जनरेटर से वही स्निपेट दोबारा कॉपी करें (आपकी widget ID वही रहती है) और नई थीम के हिसाब से इन तीनों तरीकों में से जो भी फ़िट बैठे उससे उसे पेस्ट करें।

निचोड़

WhatsApp widget बस एक स्क्रिप्ट टैग है, और WordPress के पास पहले से ठीक इसी काम के लिए बनी तीन जगहें हैं: आपके footer template में एक Custom HTML ब्लॉक, Theme File Editor के ज़रिए footer.php, या आपके page builder का embed code widget। इनमें से किसी के लिए भी इसी काम के लिए बना कोई प्लगइन इंस्टॉल करने की ज़रूरत नहीं है। WhatsApp चैट विजेट जनरेटर से स्निपेट लें, आपकी साइट जिस तरह बनी है उसके हिसाब से तीनों में से जो भी फ़िट बैठे उसमें पेस्ट करें, और यह लाइव हो जाता है, अगली बार जब WordPress कोई रिलीज़ शिप करे तो अपडेट करने के लिए कुछ भी नया नहीं बचता।

← ब्लॉग पर वापस

Your Next Customer Is Messaging You Right Now.

क्रोम एक्सटेंशन जोड़ें और अपने व्यवसाय के लिए व्हाट्सएप बातचीत प्रबंधित करने के तरीके को बदलें।

5.0 rating on the Chrome Web Store · 500+ small businesses already on board