wa.me के सादे लिंक से लेकर पूरे तैरते हुए बटन तक, कॉपी-पेस्ट करने लायक WhatsApp widget HTML, साथ ही वह सब जो सिर्फ़ रॉ कोड आपको खुद बनाने के लिए छोड़ देता है।
अगर आप असली HTML खोज रहे थे, तो यह रहा, किसी साइनअप की ज़रूरत नहीं:
<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>15551234567 को अपने नंबर से बदलें, पूरे अंतर्राष्ट्रीय फॉर्मेट में: पहले कंट्री कोड, बिना प्लस साइन के, बिना स्पेस के, बिना शुरुआती ज़ीरो के। यह लिंक अकेला ही आपके बिज़नेस के साथ एक WhatsApp चैट खोलने के लिए काफ़ी है। यही “मुझे HTML widget code दो” का पूरा ईमानदार जवाब भी है, क्योंकि इसके आगे जो कुछ भी है, वह आप (या एक जनरेटर) खुद बना रहे हैं, वे हिस्से जो यह एक लाइन कवर नहीं करती।
कोई विज़िटर लिंक पर पहुंचता है तो बॉक्स में कुछ भी टाइप नहीं होता। text पैरामीटर जोड़ें ताकि चैट खुलने पर बॉक्स में पहले से एक मैसेज तैयार रहे:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
Chat with us on WhatsApp
</a>मैसेज को URL-एन्कोडेड होना चाहिए: %20 एक स्पेस है, %2C एक कॉमा है, %27 एक अपॉस्ट्रॉफी है। पहले वह वाक्य लिखें जो आप चाहते हैं, फिर उसे text वैल्यू में पेस्ट करने से पहले किसी भी URL एनकोडर से गुज़ार दें, क्योंकि क्वेरी स्ट्रिंग के बीच में एक कच्चा स्पेस या पंक्चुएशन मार्क कुछ ब्राउज़र पर लिंक को तोड़ देगा।
एक टेक्स्ट लिंक वह नहीं है जिसे ज़्यादातर लोग “WhatsApp widget” कहते हैं। कोने वाला बटन उसी लिंक के ऊपर लगाया गया CSS है:
<a
href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
target="_blank"
rel="noopener"
aria-label="Chat on WhatsApp"
style="
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
"
>
<svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
<path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
</svg>
</a>यह वर्शन फोन/चैट ग्लिफ़ को SVG के तौर पर इनलाइन करके एक अलग आइकन फाइल की ज़रूरत को टाल देता है, इसलिए यह सच में एक सेल्फ-कंटेन्ड ब्लॉक है: इसे </body> से पहले पेस्ट करें और अपलोड करने के लिए कुछ और बचता ही नहीं। फिर भी यह चार चीज़ें आपके लिए हाथ से संभालने को छोड़ देता है, और यहीं असली जनरेटर अपनी कीमत साबित करता है।
मोबाइल और डेस्कटॉप एक जैसा व्यवहार नहीं करते, और इस स्निपेट में कुछ भी उसे कंट्रोल नहीं करता। WhatsApp इंस्टॉल वाले फोन पर wa.me लिंक क्लिक करें तो यह सीधे ऐप खोल देता है। ऐप इंस्टॉल न हो, तो यह विज़िटर को इसके बजाय ऐप स्टोर भेज देता है, कोई फॉलबैक मैसेज या वैकल्पिक संपर्क तरीका नहीं है जिसे आप लिंक से ही कॉन्फ़िगर कर सकें। डेस्कटॉप ब्राउज़र पर, यह एक नए टैब में web.whatsapp.com खोलता है, जो तभी काम करता है जब विज़िटर उस ब्राउज़र में पहले से WhatsApp Web में लॉग-इन हो, वरना वे एक QR कोड को घूरते रह जाते हैं बिना यह समझे कि क्यों। तीनों नतीजे उसी href से आते हैं। आप यह पता नहीं लगा सकते कि इनमें से कौन सा होने वाला है, न ही इसे सादे HTML से बीच में रोक सकते हैं।
पहले से भरा हुआ मैसेज URL में रहता है, किसी फॉर्म फील्ड में नहीं। इसे बदलें तो आप फिर से हाथ से एक नई स्ट्रिंग एन्कोड करने, हर उस पेज को ढूंढने जहां लिंक पेस्ट किया गया है, और अगर आपके पास कोई साझा टेम्पलेट नहीं है तो वहां भी उसे बदलने पर वापस आ जाते हैं।
कोई आइकन फाइल नहीं है जिसे SVG पाथ हाथ से एडिट किए बिना बदला जा सके, और बटन को दोबारा पोज़िशन करने, उसका साइज़ बदलने, या रंग बदलने का कोई तरीका नहीं है, बिना इनलाइन स्टाइल ब्लॉक को सीधे, लाइन दर लाइन छुए।
यहां कुछ भी चैट खुलने से पहले कोई लीड कैप्चर नहीं करता। लिंक (या बटन) क्लिक होते ही सीधे WhatsApp पर चला जाता है। अगर आप बातचीत शुरू होने से पहले एक नाम और संपर्क की वजह चाहते हैं, तो वह एक अलग फॉर्म है जिसे आपको खुद बनाना, वायर-अप करना, और किसी तरह text पैरामीटर में पास करना होगा।
WhatsApp चैट विजेट जनरेटर एक फ्री टूल है जो उन्हीं कुछ सेटिंग्स को, आपके मेंटेन किए जाने वाले CSS के ब्लॉक की जगह, एक स्क्रिप्ट टैग में बदल देता है। अपना नंबर सेट करें, एक रंग चुनें, पोज़िशन और ऑफसेट सेट करें, एक अभिवादन लिखें, और चाहें तो एक प्री-चैट फॉर्म चालू करें (एक छोटा सवाल, ईमेल या फोन को ज़रूरी या ग़ैर-ज़रूरी मार्क किया हुआ) जो WhatsApp विंडो खुलने से पहले ही कॉन्टेक्स्ट इकट्ठा कर लेता है। टूल यह आउटपुट देता है:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#128C7E"
data-position-vertical="bottom"
data-position-horizontal="left"
data-offset-vertical="24"
data-offset-horizontal="24"
data-z-index="999"
data-greeting="Hi! Ask us anything."
data-prechat="true"
data-prechat-title="Before we chat"
data-prechat-description="Tell us what you need help with."
async
defer
></script>हर सेटिंग एक लाइन पर एक लेबल किया गया data- एट्रिब्यूट है, इसलिए अभिवादन बदलना या बटन को दूसरे कोने में ले जाना मतलब फॉर्म से टैग को फिर से कॉपी करना है, किसी CSS फाइल में ढूंढते फिरना नहीं। आइकन, पोज़िशनिंग लॉजिक, मोबाइल बनाम डेस्कटॉप के लिए डीप-लिंक हैंडलिंग, और प्री-चैट फॉर्म, यह सब उस होस्ट की गई स्क्रिप्ट में रहता है जिसकी ओर टैग इशारा करता है, और यही वह चीज़ है जो ऊपर वाला रॉ HTML खुद से नहीं कर सकता, बिना आपके इसे खुद लिखे।
अगर आप एक जनरेट किया हुआ स्निपेट पेस्ट कर रहे हैं और हाथ से बदलने से पहले जानना चाहते हैं कि हर लाइन क्या कंट्रोल करती है, तो यह टैग जो स्वीकार करता है वह यहां है:
| Attribute | क्या कंट्रोल करता है |
|---|---|
data-widget-id | जनरेटर द्वारा जारी किया गया यूनीक ID, इसे एडिट न करें |
data-whatsapp-number | डेस्टिनेशन नंबर, अंतर्राष्ट्रीय फॉर्मेट, बिना + के |
data-color | बटन का बैकग्राउंड, कोई भी हेक्स वैल्यू |
data-position-vertical | top या bottom |
data-position-horizontal | left या right |
data-offset-vertical / data-offset-horizontal | उस किनारे से पिक्सेल दूरी |
data-z-index | स्टैकिंग ऑर्डर, अगर कोई और फिक्स्ड एलिमेंट बटन को ढक रहा है तो इसे बढ़ाएं |
data-greeting | पहले से भरा हुआ मैसेज टेक्स्ट, हाथ से URL-एन्कोडिंग की ज़रूरत नहीं |
data-prechat | चैट खुलने से पहले एक छोटा फॉर्म दिखाने के लिए true |
data-prechat-title / data-prechat-description / data-prechat-question | प्री-चैट फॉर्म पर दिखने वाली कॉपी |
रॉ HTML और जनरेट किया गया स्क्रिप्ट टैग, दोनों एक ही जगह जाते हैं: कहीं भी जो हर पेज पर रेंडर होता है, आदर्श रूप से </body> से ठीक पहले।
theme.liquid, </body> से ठीक ऊपर, Online Store → Themes → Edit Code के ज़रिए।क्या रॉ HTML लिंक के लिए WhatsApp Business अकाउंट चाहिए?
नहीं। एक पर्सनल WhatsApp नंबर wa.me लिंक के साथ उसी तरह काम करता है जैसे एक Business नंबर करता है। Business-खास फीचर, जैसे कैटलॉग या ऑटोमेटेड रिप्लाई, लिंक का हिस्सा नहीं हैं।
मेरा बटन आइकन की जगह टूटी हुई इमेज क्यों दिखा रहा है?
ऐसा तब होता है जब HTML एक एक्सटर्नल आइकन फाइल (<img src="/whatsapp-icon.svg">) को रेफर करता है जो उस पाथ पर अपलोड नहीं की गई है। ऊपर वाला इनलाइन SVG वर्शन इसे पूरी तरह टाल देता है क्योंकि आइकन सीधे HTML में ही लिखा होता है।
क्या मैं widget HTML को इसके बजाय <head> टैग के अंदर रख सकता/सकती हूं?
तकनीकी रूप से anchor टैग को खुद <body> में ही रेंडर होना होता है, क्योंकि <head> का कॉन्टेंट दिखाया नहीं जाता। स्क्रिप्ट <head> से लोड हो सकती हैं, लेकिन स्निपेट को </body> से ठीक पहले रखना रेंडर-ब्लॉकिंग से बचाता है और यही वह पैटर्न है जिसकी ज़्यादातर साइट बिल्डर उम्मीद करते हैं।
एक पेज पर मैं कितने WhatsApp widget जोड़ सकता/सकती हूं, इसकी कोई सीमा है? आपको दो पेस्ट करने से कुछ नहीं रोकता, लेकिन एक ही कोने में ढेर किए गए दो तैरते हुए बटन आमतौर पर एक फीचर की जगह एक बग जैसे दिखते हैं। अगर आपको दो नंबर चाहिए (मान लीजिए सेल्स और सपोर्ट), तो हर एक को अलग-अलग पोज़िशन दें, उन्हें एक-दूसरे पर ओवरलैप करने के बजाय।
क्या यह Squarespace पर भी वैसे ही काम करता है? Squarespace का Code Injection पैनल (Settings → Advanced के तहत) दोनों में से किसी भी वर्शन को उसी तरह स्वीकार करता है जैसे WordPress का Custom HTML ब्लॉक करता है, फुटर इंजेक्शन इसे एक ही जगह पूरी साइट पर लागू कर देता है।
WhatsApp widget के लिए असली HTML बस एक <a href="https://wa.me/..."> टैग है, और अब वह आपके पास है। इसे उस तैरते, ब्रांडेड, लीड-कैप्चर करने वाले बटन में बदलना जिसकी ज़्यादातर लोग कल्पना करते हैं, इसका मतलब है या तो CSS और डीप-लिंक के एज-केस खुद लिखना और मेंटेन करना, या WhatsApp चैट विजेट जनरेटर को एक ही पेस्ट में तैयार स्क्रिप्ट टैग निकालने देना, मुफ़्त, बिना किसी अकाउंट की ज़रूरत के।
क्रोम एक्सटेंशन जोड़ें और अपने व्यवसाय के लिए व्हाट्सएप बातचीत प्रबंधित करने के तरीके को बदलें।