WordPress में WhatsApp चैट बटन कैसे जोड़ें (3 मुफ्त तरीके, 2026)
आपकी वर्डप्रेस साइट लाइव है और ट्रैफ़िक आ रहा है — और फिर क्या? अधिकांश विज़िटर आते हैं, पढ़ते हैं और बिना कोई सवाल पूछे चले जाते हैं। एक वॉट्सऐप चैट बटन इसे एक ही दोपहर में ठीक कर देता है: एक टैप आपके नंबर के साथ आपके ग्राहकों द्वारा पहले से इस्तेमाल किए जा रहे ऐप में चैट खोलता है। यह पोस्ट 2026 में इसे जोड़ने के तीन मुफ्त तरीकों को दिखाती है — एक साधारण wa.me लिंक (वैकल्पिक फ्लोटिंग स्निपेट के साथ), एक चैट विजेट प्लगइन, या आपका पेज बिल्डर — और यह भी बताती है कि इनमें से प्रत्येक कहाँ रुकता है, ताकि आप जान सकें कि कब वॉट्सऐप बिज़नेस एपीआई पर स्विच करना है। द टेक पैड मेटा के आधिकारिक क्लाउड एपीआई पर एक वॉट्सऐप बिज़नेस प्लेटफ़ॉर्म है जिसमें 26 मुफ्त वर्डप्रेस कनेक्टर्स और एक साझा टीम इनबॉक्स है, और यह ठीक वहीं से संभालता है जहाँ चैट बटन समाप्त होते हैं। जब आप शुरू करते हैं तो आपका पहला महीना मुफ्त है, और हर व्यवसाय जिसे आप रेफर करते हैं और वह साइन अप कर वॉट्सऐप नंबर जोड़ता है, वह आपको एक मुफ्त महीना देता है — अधिकतम 5 और मुफ्त महीने — कुल मिलाकर 6 महीने मुफ्त।
व्हाट्सएप चैट बटन वास्तव में क्या करता है
एक चैट बटन एक लिंक होता है। हरे बुलबुले के पीछे एक यूआरएल होता है, जो दो आकारों में से एक में होता है: https://wa.me/<countrycode><number> या https://api.whatsapp.com/send?phone=<number>जब कोई विज़िटर उस पर टैप करता है, तो उनका डिवाइस व्हाट्सएप खोलता है — मोबाइल पर ऐप या डेस्कटॉप ब्राउज़र पर web.whatsapp.com (अगर ऐप नहीं है) — और आपकी संख्या के साथ एक वार्तालाप पहले से ही शुरू हो जाता है।
यही पूरा ट्रिक है, और यह इसलिए महत्वपूर्ण है क्योंकि एक बटन क्या करता है। नहीं करें: यह आपकी साइट से कुछ भी नहीं भेजता। आगंतुक पहला संदेश टाइप करता है, इसलिए यह हमेशा इनबाउंड, हमेशा सहमति प्राप्त, और मुफ्त होता है। बातचीत ग्राहक के अपने व्हाट्सएप ऐप में रहती है, आपकी सर्वर पर नहीं। कोई API नहीं, कोई अनुमोदन नहीं, प्रति संदेश शुल्क नहीं।
बटन जोड़ने के तीन तरीके: तुलना
नीचे दिए गए सभी तीन तरीके शुरू करने के लिए मुफ्त हैं। फर्क यह है कि आप प्लेसमेंट, टारगेटिंग और ट्रैकिंग पर कितना नियंत्रण चाहते हैं।
| तरीका | सेटअप समय | क्या प्लगइन की जरूरत है? | फ्लोटिंग? | डिवाइस लक्ष्यीकरण | क्लिक ट्रैकिंग | लागत |
|---|---|---|---|---|---|---|
| wa.me लिंक (बटन ब्लॉक, मेनू, विजेट) | ~5 मिनट | नहीं | केवल कस्टम CSS के साथ | नहीं | मैनुअल (GA4 इवेंट) | फ्री |
| चैट विजेट प्लगइन (Joinchat, Chaty, WP Chat App) | 10–15 मिनट | हाँ | हाँ | अक्सर शामिल | आमतौर पर निर्मित | फ्री टियर; अतिरिक्त के लिए भुगतान |
| Elementor फ्लोटिंग बटन / Gutenberg ब्लॉक | ~10 मिनट | नहीं (बिल्डर) | हाँ (Elementor) | आंशिक | मैनुअल (GA4 इवेंट) | फ्री |
विधि 1: बिना किसी प्लगइन के wa.me लिंक
फ़ॉर्मेट है wa.me/<countrycode><number>?text=<urlencoded-message>। एक भारतीय नंबर के लिए, यह इस तरह दिखता है:
https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20questionदेश कोड का उपयोग करें बिना + या स्पेस के — 91 भारत के लिए, 1 यूएस के लिए। text पैरामीटर पहले संदेश को पूर्व-भरेगा; स्पेस को URL-एन्कोड करना होगा (%20) और विराम चिह्न भी (%2C कॉमा के लिए)। अगर आप लिंक को जावास्क्रिप्ट में बनाते हैं, encodeURIComponent() यह आपके लिए इसे संभालता है।
आप यह लिंक कहीं भी रख सकते हैं जहाँ वर्डप्रेस लिंक स्वीकार करता है:
- बटन ब्लॉक गुटेनबर्ग एडिटर में, wa.me URL से लिंक किया गया।
- नेविगेशन मेनू आइटम — इसे कस्टम लिंक के रूप में जोड़ें।
- फ़ुटर या साइडबार विज़ेट — एक टेक्स्ट या कस्टम HTML विज़ेट।
- स्टिकी फ्लोटिंग बटन — नीचे दिए गए स्निपेट को कस्टमाइज़र → अतिरिक्त CSS में पेस्ट करें और अपने फ़ुटर में एक कस्टम HTML विज़ेट जोड़ें। यह बटन को निचले-दाएं कोने में सुरक्षित z-index और 48px टैप टारगेट के साथ पिन करता है, जो मोबाइल थंब्स के लिए न्यूनतम आरामदायक आकार है।
<a class="wa-float" href="https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question" target="_blank" rel="noopener">Chat on WhatsApp</a>
<style>
.wa-float {
position: fixed; bottom: 20px; right: 20px; z-index: 9999;
background: #25D366; color: #ffffff; padding: 12px 20px;
border-radius: 40px; min-height: 48px; display: inline-flex;
align-items: center; text-decoration: none; font-weight: 600;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.wa-float:hover { background: #1fb457; }
</style>प्रकाशित करने से पहले वास्तविक फोन पर समाप्त लिंक का परीक्षण करें, और डेस्कटॉप पर भी — कोई WhatsApp ऐप इंस्टॉल नहीं होने पर, wa.me web.whatsapp.com पर वापस चला जाता है, जो तब तक काम करता है जब तक पूर्व-भरी हुई टेक्स्ट सुरक्षित रहती है। पूर्व-भरी संदेशों को एक पंक्ति तक रखें; बहुत लंबा टेक्स्ट कुछ डिवाइस पर कट जाता है।
विधि 2: एक चैट विजेट प्लगइन
यदि आप CSS लिखे बिना डिवाइस टारगेटिंग, शेड्यूलिंग, या कई एजेंटों के साथ फ्लोटिंग बटन चाहते हैं, तो एक प्लगइन ईमानदार शॉर्टकट है। इन सभी के मुफ्त संस्करण उपलब्ध हैं:
- Joinchat (Creame) — हल्का और केवल WhatsApp पर केंद्रित; एक मजबूत डिफ़ॉल्ट।
- Click to Chat (HoliThemes) — मुफ्त और सरल; नंबर, स्थिति, और कुछ स्टाइल।
- Chaty (Premio) — कई चैनलों का समर्थन करता है, केवल WhatsApp नहीं; मुफ्त स्तर और सशुल्क योजनाएँ।
- WP Chat App (NinjaTeam) — फ्लोटिंग बटन के साथ मल्टी-एजेंट और पूर्व-भरे संदेश; मुफ्त और सशुल्क।
- Buttonizer — एक सामान्य बटन लॉन्चर जो आपके WhatsApp बटन को अन्य बटनों के साथ होस्ट कर सकता है।
- एलिमेंटर फ्लोटिंग बटन — अगर आप पहले ही Elementor Pro का उपयोग कर रहे हैं तो इसका नेटिव विजेट।
इंस्टॉल करें, अपने नंबर को अंतरराष्ट्रीय प्रारूप में दर्ज करें, स्थिति और रंग चुनें, और आप तैयार हैं। पेड स्तर डिवाइस और पेज द्वारा लक्ष्यीकरण, चैट शेड्यूलिंग, और क्लिक एनालिटिक्स जोड़ते हैं। इन किसी भी प्लगइन्स से आपकी साइट से संदेश नहीं भेज सकते — यह उनके लिए नहीं है, और यह कोई कमी नहीं है; यह विजेट और API के बीच की सीमा है।
विधि 3: एलीमेंटर या गुटेनबर्ग ब्लॉक
यदि आप एलीमेंटर प्रो का उपयोग करते हैं, तो फ्लोटिंग बटन विजेट स्वाभाविक रूप से एक व्हाट्सएप बटन लगाता है, किसी अतिरिक्त प्लगइन की आवश्यकता नहीं। साधारण गुटेनबर्ग में, wa.me लिंक वाला बटन ब्लॉक वही काम करता है — यदि आप इसे स्थायी (स्टिकी) रखना चाहते हैं तो इसे विधि 1 के फ्लोटिंग CSS के साथ जोड़ें। आपके थीम में कोई शॉर्टकोड या ब्लॉक पैटर्न functions.php वही लिंक नीचे है; केवल सवाल यह है कि आप इसे कहाँ बनाए रखना चाहते हैं।
जहाँ चैट बटन काम करना बंद कर देते हैं
एक चैट बटन केवल इनबाउंड है। यह ग्राहक के चेकआउट करने पर ऑर्डर पुष्टि भेज नहीं सकता, बुक किए गए अपॉइंटमेंट से पहले अनुस्मारक नहीं भेज सकता, या परित्याग के दो घंटे बाद कार्ट रिकवरी नज भेज नहीं सकता — क्योंकि आपकी साइट से कुछ भी कभी नहीं भेजा जाता। मेटा की 24-घंटे की सेवा विंडो का कोई हैंडलिंग नहीं है, कोई टेम्पलेट अनुमोदन नहीं है, और कोई साझा इनबॉक्स नहीं है: प्रत्येक पूछताछ उस एक फोन पर पहुंचती है जिसका नंबर लिंक में है, इसलिए अगर दूसरा एजेंट उत्तर देता है तो इसका मतलब है दूसरा नंबर।
यह WhatsApp Business API का काम है। 24 घंटे की खिड़की के बाहर बिज़नेस-इनिशियेटेड संदेशों के लिए Meta-स्वीकृत टेम्पलेट्स (मार्केटिंग, उपयोगिता, या प्रमाणीकरण श्रेणियाँ) का उपयोग करना आवश्यक है, और API उन्हें The Tech Pad जैसी प्लेटफ़ॉर्म से भेजता है, जिसके मुफ्त WordPress कनेक्टर्स फ़ॉर्म एंट्री, बुकिंग और ऑर्डर WhatsApp में स्वचालित रूप से भेजते हैं जबकि आपकी टीम [/features/inbox/](/features/inbox/) पर एक साझा इनबॉक्स से उत्तर देती है। इसके लिए कोई मासिक SaaS शुल्क नहीं है। कनेक्टरs; आप Meta के प्रति-संदेश बातचीत शुल्क का भुगतान करते हैं — भारत में उपयोगिता संदेशों के लिए लगभग ₹0.10–0.30, जबकि मार्केटिंग के लिए लगभग 2–3 × इतना — इसलिए Meta की वर्तमान दर कार्ड जांचें। यदि आप किसी बटन और API के बीच निर्णय ले रहे हैं, तो [यह तुलना](/blog/whatsapp-business-app-vs-api-2026/) सीमा को स्पष्ट करती है।
कदम दर कदम: अपने बटन को जोड़ें, स्टाइल करें और टेस्ट करें
- अपना नंबर अंतरराष्ट्रीय प्रारूप में लिखें बिना
+अथवा खाली जगह के — उदाहरण के लिए919876543210भारत के लिए। - सबसे पहले अपने फोन पर रॉ लिंक बनाएं और टेस्ट करें:
https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20questionयह व्हाट्सएप को संदेश के साथ पहले से भरा हुआ खोलना चाहिए। - बटन उस जगह पर जोड़ें जहां आपके विज़िटर देखते हैं: अपने हेडलाइन के पास एक बटन ब्लॉक, एक नेव मेनू आइटम, और/या फुटर विज़ेट।
- स्टिकी संस्करण के लिए, फ्लोटिंग HTML को कस्टम HTML विज़ेट में पेस्ट करें और CSS को अतिरिक्त CSS में, फिर इसे मोबाइल व्यूपोर्ट पर चेक करें।
- यदि आपने इसके बजाय एक प्लगइन चुना है, तो इसे इंस्टॉल करें, वही नंबर दर्ज करें, स्थिति और रंग चुनें, और सेव करें।
- GA4 में क्लिक ट्रैक करें: लिंक को एक आईडी दें (जैसे।
id="wa-float") और एक छोटा ईवेंट लिसनर जोड़ें, या अपने प्लगइन के इन-बिल्ट एनालिटिक्स का उपयोग करें।
document.getElementById('wa-float').addEventListener('click', function () {
gtag('event', 'whatsapp_click');
});- वास्तविक फोन और डेस्कटॉप पर प्रकाशित पेज का परीक्षण करें, और पुष्टि करें कि प्री-फिल्ड टेक्स्ट सही ढंग से आता है — चैट बॉक्स में कोई
%20दृश्य नहीं।
क्लिक के बाद भेजने के लिए प्री-फिल्ड संदेश
wa.me text पैरामीटर आगंतुक का पहला संदेश पूर्व-भरेगा। जिन फॉलो-अप संदेशों को आप बाद में भेजते हैं — स्वीकृतियाँ, कोट फॉलो-अप — वे API के माध्यम से टेम्पलेट्स के रूप में चलते हैं, {{1}}, {{2}} स्टाइल वेरिएबल्स का उपयोग करते हुए ताकि एक अनुमोदित टेम्पलेट हर ग्राहक के लिए फिट हो।
| उद्देश्य | नमूना वेरिएबल्स | कब भेजें |
|---|---|---|
| पूछताछ की पुष्टि | {{1}} नाम, {{2}} उत्पाद/सेवा | क्लिक के मिनटों के भीतर |
| कोट फॉलो-अप | {{1}} नाम, {{2}} कोट संदर्भ | पहले उत्तर के एक दिन बाद |
हाय {{1}}, व्हाट्सएप पर संपर्क करने के लिए धन्यवाद। {{2}} के बारे में आपका अनुरोध हमारी टीम के पास है — कृपया एक कार्य घण्टे के अंदर उत्तर की उम्मीद करें।
हाय {{1}}, यहाँ {{2}} के लिए वह कोटेशन है जिसकी हमने चर्चा की थी। क्या इस सप्ताह एक छोटी कॉल आपको निर्णय लेने में मदद करेगी?
सामान्य प्रश्न
क्या मुझे वर्डप्रेस में व्हाट्सएप बटन जोड़ने के लिए किसी प्लगइन की आवश्यकता है? नहीं। एक साधारण wa.me लिंक किसी भी जगह काम करता है जहाँ वर्डप्रेस लिंक स्वीकार करता है — एक बटन ब्लॉक, एक मेनू आइटम, एक विजेट या एक थीम टेम्पलेट। प्लगइन केवल तब मदद करता है जब आप डिवाइस टारगेटिंग, शेड्यूलिंग या बिना कोड छुए कई एजेंटों के साथ एक फ्लोटिंग बटन चाहते हैं।
क्या वॉट्सएप चैट बटन मुफ्त है? हाँ। क्लिक-टू-चैट लिंक मुफ्त और असीमित हैं क्योंकि बातचीत ग्राहक के अपने व्हाट्सएप ऐप में होती है, और मुफ्त प्लगइन संस्करण बुनियादी सुविधाओं को कवर करते हैं। आप केवल तब मेटा की प्रति-संदेश शुल्क का भुगतान करते हैं जब आप व्हाट्सएप बिजनेस API के माध्यम से व्यवसाय-प्रेरित संदेश भेजना शुरू करते हैं।
क्या क्लिक-टू-चैट बटन से मेरा नंबर बैन हो सकता है? नहीं — ग्राहक चैट शुरू करता है, जो बिल्कुल वही व्यवहार है जिसे मेटा चाहता है। प्रतिबंध अनचाहे आउटबाउंड ब्लास्ट से आते हैं, जो आमतौर पर अनऑफिशियल टूल्स के माध्यम से भेजे जाते हैं। एक बटन जो लोगों को आपको मैसेज करने के लिए आमंत्रित करता है, एक पार्ट लेने वाली ऑडियंस बनाने के सबसे सुरक्षित तरीकों में से एक है।
चैट बटन और व्हाट्सएप बिजनेस एपीआई में क्या अंतर है? एक चैट बटन बातचीत खोलता है; यह अपने आप कुछ भी नहीं भेज सकता। एपीआई स्वचालित संदेश भेजता है — ऑर्डर पुष्टि, बुकिंग रिमाइंडर, कार्ट रिकवरी — कई ग्राहकों को एक साथ अनुमोदित टेम्पलेट का उपयोग करके, और यह आपकी पूरी टीम को उत्तरों के लिए एक साझा इनबॉक्स देता है।
अंतिम CTA
एक चैट बटन आगंतुकों को बातचीत करने पर मजबूर करता है; API बातचीत को तब तक जारी रखता है जब तक किसी को कॉपी और पेस्ट न करना पड़े। The Tech Pad आधिकारिक WhatsApp Cloud API पर चलता है और आपको एक साझा टीम इनबॉक्स, AI कॉपिलट, टेम्पलेट हब, अभियान और विश्लेषण देता है — साथ ही 26 मुफ्त WordPress कनेक्टर्स (पूरा सूची [/plugins/](/plugins/) पर, मूल्य निर्धारण [/pricing](/pricing) पर)। जब आप शुरू करते हैं, आपका पहला महीना मुफ्त है, और हर व्यवसाय जिसे आप साइन अप करवाते हैं और एक WhatsApp नंबर से जोड़ते हैं, आपको एक मुफ्त महीना देता है — अधिकतम 5 और मुफ्त महीने — कुल मिलाकर 6 महीने तक मुफ्त। आज ही अपना बटन सेट अप करें, और API लेयर जोड़ें जब पहला ऑर्डर नोटिफिकेशन मैन्युअल काम बन जाए — [/wa/](/wa/) पर शुरू करें।