वेबसाइट पर WhatsApp बटन कैसे लगाएँ: link, floating बटन और QR code

सीधा जवाब

website par whatsapp button kaise lagaye, इसके लिए बस एक चीज़ चाहिए: click-to-chat link। WhatsApp का अपना format है https://wa.me/<number>, जिसमें नंबर पूरे international format में होता है, बिना 0, brackets या dash के। इस link को किसी बटन, icon या floating bubble के पीछे लगा दीजिए; विज़िटर टैप करेगा और सीधे आपकी chat खुलेगी, आपका लिखा message पहले से टाइप होगा। कोई plugin, ऐप या API ज़रूरी नहीं, और ग्राहक को आपका नंबर पहले सेव भी नहीं करना पड़ता।

इस गाइड में link, कॉपी-पेस्ट code, WordPress, Shopify और Wix के तरीक़े, clicks की गिनती, छपाई के लिए QR code, और बटन के पीछे WhatsApp chatbot कब फ़ायदेमंद है, सब है। यह हर उस बिज़नेस के लिए है जो WhatsApp पर पूछताछ लेता है, चाहे मुफ़्त Business ऐप हो या API।

स्टेप 1: wa.me link बनाएँ

WhatsApp Help Center ये format देता है:

ज़्यादातर बटन इन ग़लतियों से टूटते हैं:

• नंबर: पहले country code, फिर नंबर, सिर्फ़ अंक। भारतीय मोबाइल 98290 12345 के लिए 919829012345। +91, 0091, 09829012345 या space न लिखें। WhatsApp ख़ुद ग़लत उदाहरण में plus, आगे के 0, brackets और dash वाला नंबर दिखाता है।
• Message: URL-encoded होना चाहिए। Space %20 बनता है, comma %2C, नई लाइन %0A। हिंदी और emoji भी इसी तरह encode होकर सही पहुँचते हैं।
• नंबर WhatsApp पर होना चाहिए। Click to chat सिर्फ़ उसी नंबर से chat खोलता है जिसका WhatsApp account चालू है।

सबसे आसान तरीक़ा हमारा मुफ़्त WhatsApp link बनाने का टूल है: India चुनें, नंबर किसी भी तरह टाइप करें, message लिखें, और link या तैयार HTML code कॉपी करें। यह नंबर की लंबाई जाँचता है, इसलिए typo ग्राहकों तक पहुँचने से पहले पकड़ में आ जाता है।

स्टेप 2: link को बटन के पीछे लगाएँ

एक सादा बटन

जहाँ बटन चाहिए वहाँ यह पेस्ट करें, जैसे contact पेज पर या हर product के दाम के नीचे। नंबर और message अपना डालें:

<a href="https://wa.me/919829012345?text=Namaste%20Sunrise%20Clinic%2C%20mujhe%20appointment%20book%20karna%20hai"
   target="_blank" rel="noopener" aria-label="WhatsApp पर बात करें"
   style="display:inline-block;background:#25D366;color:#fff;padding:12px 20px;border-radius:8px;font-weight:600;text-decoration:none">
  WhatsApp पर बात करें
</a>

हर पेज पर floating बटन

Floating बटन स्क्रॉल करते समय भी नीचे कोने में दिखता रहता है। इसे एक बार, site template के बंद होने वाले </body> tag से ठीक पहले या builder के site-wide footer code में लगाएँ:

<a class="wa-float" href="https://wa.me/919829012345?text=Namaste%2C%20mera%20ek%20sawal%20hai%20(website)"
   target="_blank" rel="noopener" aria-label="WhatsApp पर बात करें">WhatsApp करें</a>
<style>
  .wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 999;
    background: #25D366; color: #fff; padding: 12px 18px; border-radius: 999px;
    font: 600 15px/1 sans-serif; text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.25); }
</style>

फ़ोन पर ज़रूर देखें: floating बटन आपके Add to cart या Call बटन, cookie banner या chat widget को ढकना नहीं चाहिए। ढके तो उसे बाईं तरफ़ ले जाएँ या bottom बढ़ा दें।

WhatsApp का official Chat on WhatsApp बटन

WhatsApp का अपना डिज़ाइन चाहिए तो click-to-chat वाला लेख official Chat on WhatsApp बटन की files का link देता है। ये हरे और सफ़ेद रंग में, small, medium और large साइज़ में आते हैं, और अभी सिर्फ़ अंग्रेज़ी में उपलब्ध हैं। WhatsApp की सलाह है कि बटन को जैसा है वैसा इस्तेमाल करें, नया version लें, और उसे साफ़ दिखने लायक़ रखें। Image उसी तरह के link के अंदर लगती है:

<a aria-label="Chat on WhatsApp" href="https://wa.me/919829012345">
  <img alt="Chat on WhatsApp" src="/images/WhatsAppButtonGreenLarge.svg">
</a>

स्टेप 3: WordPress, Shopify और Wix पर

Wix के help लेख में link का api.whatsapp.com/send?phone= वाला रूप है; यह wa.me link वाली ही chat खोलता है, इसलिए वहाँ दोनों चलेंगे। अगर WordPress साइट पर WhatsApp खुलने से पहले एक छोटा फ़ॉर्म चाहिए (नाम, सेवा, समय), तो WordPress के लिए WhatsApp chat widget (अंग्रेज़ी) देखें।

एक उदाहरण

पुणे की Meera's Bakehouse तीन पेज की Wix साइट से केक बेचती है। मीरा हर पेज पर अलग बटन लगाती हैं, ताकि हर chat से पता चले कि ग्राहक कहाँ था:

Custom cakes वाला message छोटे फ़ॉर्म जैसा काम करता है: ग्राहक भेजने से पहले brackets भर देते हैं, और मीरा तीन सवाल पूछने की जगह एक ही जवाब में दाम बता देती हैं।

स्टेप 4: टेस्ट करें और clicks गिनें

Publish से पहले दो डिवाइस पर टेस्ट करें। फ़ोन पर link WhatsApp ऐप खोलता है। कंप्यूटर पर WhatsApp Web या desktop ऐप खुलता है, जहाँ विज़िटर का फ़ोन linked होना चाहिए। Error स्क्रीन दिखे तो लगभग हमेशा नंबर ग़लत होता है: कहीं +, 0 या space तो नहीं, देखें।

wa.me ख़ुद कोई click आँकड़े नहीं देता। फिर भी गिनती के तीन तरीक़े:

1. Analytics के click events। Google Analytics 4 का enhanced measurement हर उस click पर click event (साथ में link_url) दर्ज करता है जो आपके domain से बाहर ले जाए, और wa.me link भी इसमें आता है। link_url में wa.me वाले events फ़िल्टर करके हर पेज के WhatsApp बटन clicks गिनें।
2. हर पेज का अलग message। मीरा के उदाहरण की तरह हर पेज या campaign का अलग pre-filled message chat में ही स्रोत बता देता है।
3. UTM tags पेज के links पर, wa.me link पर नहीं। जो links विज़िटर को आपके पेज तक लाते हैं (ads, Instagram bio, email), उन पर UTM लगाएँ, ताकि analytics WhatsApp click को campaign से जोड़ सके। WhatsApp wa.me URL पर कोई रिपोर्ट नहीं देता, इसलिए उस पर लगाए UTM tags से कुछ पता नहीं चलता।

स्टेप 5: छपाई के लिए QR code

यही link QR code बनकर काउंटर, मेन्यू, पैकिंग, होर्डिंग और visiting card पर भी काम करता है। अपना wa.me link WhatsApp QR code बनाने के टूल में डालें, प्रिंटर के लिए SVG डाउनलोड करें, और ज़्यादा प्रिंट से पहले छपे नमूने को दो अलग फ़ोन से स्कैन करें। Pre-filled message छोटा रखें: लंबा message QR को घना बना देता है, जिसके लिए बड़ा प्रिंट चाहिए।

बटन के पीछे chatbot कब फ़ायदेमंद है

बटन सिर्फ़ chat शुरू करता है। आगे क्या होगा, यह उसके पीछे के नंबर पर निर्भर है:

• Business ऐप नंबर। जब तक एक व्यक्ति जवाब देता है, ठीक है। Greeting message और quick replies आम सवाल सँभाल लेते हैं; देखें WhatsApp Business account कैसे बनाएँ।
• API नंबर। तब फ़ायदेमंद जब कई लोग जवाब देते हैं, chats ऑफ़िस समय के बाद आती हैं, या दिन भर वही सवाल दोहराए जाते हैं। Chatbot दाम और समय बता सकता है, ऑर्डर की जानकारी ले सकता है और shared inbox में किसी व्यक्ति को सौंप सकता है, और साइट का बटन बिल्कुल वैसा ही रहता है।

ग्राहक का पहला संदेश आते ही 24 घंटे की customer service window खुलती है, जिसमें आप खुलकर जवाब दे सकते हैं। API पर ये जवाब service messages होते हैं: 1 Oct 2026 से हर business phone number को महीने में 1,000 मुफ़्त मिलते हैं और उसके बाद Meta service messages का चार्ज लेता है, इसलिए ज़्यादा volume की उम्मीद हो तो WhatsApp API pricing देख लें। भारत में coexistence से आप उसी नंबर पर Business ऐप चलाते रह सकते हैं और कोई प्लेटफ़ॉर्म chatbot और inbox जोड़ देता है। आगे क्या भेजें, इसके लिए WhatsApp मार्केटिंग रणनीति और बिना code वाले bot के लिए WhatsApp chatbot बनाने की गाइड पढ़ें।

वेब एजेंसियाँ यह हर उस साइट में जोड़ सकती हैं जो वे बनाती हैं। White-label WhatsApp प्लेटफ़ॉर्म के साथ बटन के पीछे का chatbot और inbox एजेंसी के अपने ब्रांड से चलता है।