How To Add WhatsApp Button To A WordPress Website Without Plugin 2024

Introduction: हम आपको इस पोस्ट में add WhatsApp button to a WordPress website के बारे में सम्पूर्ण जानकारी इस लेख में बतायेंगे तो आप इस आर्टिकल को पूरा पढ़े और आपको बिना plugin के WhatsApp floating button को जोड़ना बताया जायेगा।

आपको अपनी वर्ड प्रेस वेबसाइट के लिए floating WhatsApp button जोड़ने से विजिटर के लिए तुरंत आपसे जोड़ने या सम्पर्क करना उनके लिए आसान हो जाता है। plugin के बिना floating WhatsApp button WordPress को जोड़ना बेहतर है। क्योकि मैन्युअल रूप या बिना प्लगइन से button जोड़ने से आपकी वेबसाइट हल्की या लाइट रहती है, जिससे आप कि वेबसाइट जो लोअडिंग और प्रदशर्न में अच्छी रहती है, और आपके डिज़ाइन पर पूरा कण्ट्रोल मिलता है। इस लेख में आपको सीखेंगे कि बिना किसी प्लग इन का उपयोग किए बिना WhatsApp button कैसे जोड़ा जाता है, आपको स्टेप बाय स्टेप बताया गया है।

Step-by-Step Guide to Adding a WhatsApp Button Without a Plugin

1. WhatsApp लिंक बनाएँ

एक whatsapp लिंक विजिटर को आपकी वेबसाइट से सीधे आपके साथ में whatsapp चैट खोलने या जोड़ने का कार्य करती है:

1. निम्न URL प्रारूप का उपयोग करें:

https://wa.me/<YourPhoneNumber>

<लिंक> को अपने whatsapp ग्रुप या चैट से जोड़ने के लिए आपको इस प्रकार कि लिंक को बनाना पड़ेगा। उदाहरण के लिए, https://wa.me/911234567890।

2. यदि आप को whatsapp icon एक साथ में कुछ टेक्स्ट दिखना है तो आप इस तरीके का प्रयोग कर सकते है:

https://wa.me/<YourPhoneNumber>?text=YourPrefilledMessage

उदाहरण:

https://wa.me/911234567890?text=नमस्ते! मैं आपकी सेवाओं के बारे में अधिक जानना चाहता हूँ।

और पोस्ट को देखे

• How to Apply for Google AdSense for a WordPress Website 2024: A Step-by-Step Guide
• How to Create a Sticky Mobile Bottom Menu in GeneratePress Theme 2024

2. अपनी WordPress वेबसाइट पर WhatsApp बटन जोड़ें

आप अपनी वेबसाइट में whatsapp लिंक डालकर मैन्युअल रूप से बटन जोड़ सकते हैं।

वर्डप्रेस ब्लॉक एडिटर (गुटेनबर्ग) का उपयोग करना:

1. उस पेज या पोस्ट पर जाएँ जहाँ आप बटन जोड़ना चाहते हैं।
2. एक कस्टम HTML ब्लॉक जोड़ें।
3. निम्न कोड पेस्ट करें:

<a href="https://wa.me/911234567890" target="_blank" style="text-decoration: none; background-color: #25D366; color: white; padding: 10px 15px; border-radius: 5px;">व्हाट्सएप पर हमसे चैट करें</a>

हेडर या फ़ुटर में बटन जोड़ना:

1. वर्डप्रेस डैशबोर्ड में अपीयरेंस > थीम फ़ाइल एडिटर पर जाएँ।
2. अपने header.php या footer.php फ़ाइल में HTML कोड जोड़ें जहाँ आप बटन दिखाना चाहते हैं।

3. कस्टम CSS के साथ WhatsApp बटन को स्टाइल करें

अपने WhatsApp बटन को आकर्षक बनाने के लिए, आप कस्टम CSS का उपयोग कर सकते हैं।
अपने WordPress थीम में निम्न CSS जोड़ें:

.whatsapp-button {
background-color: #25D366;
color: white;
padding: 10px 20px;
border-radius: 50px;
font-size: 16px;
font-weight: bold;
text-align: center;
display: inline-block;
transition: background-color 0.3s ease;
}
.whatsapp-button:hover {
background-color: #128C7E;
}

CSS क्लास को शामिल करने के लिए अपने HTML कोड को अपडेट करें:

<a href="https://wa.me/911234567890" target="_blank" class="whatsapp-button">हमारे साथ चैट करें</a>

4. उन्नत बटन कार्यक्षमता के लिए जावास्क्रिप्ट का उपयोग करें

यदि आप चाहते हैं कि बटन गतिशील रूप से दिखाई दे, जैसे कि स्क्रीन पर फ़्लोटिंग बटन, तो जावास्क्रिप्ट का उपयोग करें:

1. इस स्क्रिप्ट को अपनी WordPress footer.php फ़ाइल में जोड़ें:

<script>
const whatsappButton = document.createElement('a');
whatsappButton.href = "https://wa.me/911234567890";
whatsappButton.target = "_blank";
whatsappButton.innerText = "हमारे साथ चैट करें";
whatsappButton.style.position = "निश्चित";
whatsappButton.style.bottom = "20px";
whatsappButton.style.right = "20px";
whatsappButton.style.backgroundColor = "#25D366";
whatsappButton.style.color = "सफ़ेद";
whatsappButton.style.padding = "15px 20px";
whatsappButton.style.borderRadius = "50px";
whatsappButton.style.boxShadow = "0px 4px 6px rgba(0, 0, 0, 0.1)";
document.body.appendChild(whatsappButton);
</script>

प्लगइन के बिना WhatsApp बटन जोड़ने के लिए सर्वोत्तम अभ्यास

1. बटन प्लेसमेंट को अनुकूलित करें: सुनिश्चित करें कि बटन सभी डिवाइस पर दिखाई दे और एक्सेस करने योग्य हो, अधिमानतः नीचे दाएं कोने में।
2. कई डिवाइस पर परीक्षण करें: सत्यापित करें कि बटन मोबाइल और डेस्कटॉप ब्राउज़र पर सहजता से काम करता है।
3. इसे हल्का रखें: अपनी वेबसाइट को धीमा होने से बचाने के लिए न्यूनतम कोड का उपयोग करें।

अपने WhatsApp बटन का परीक्षण करें

बटन जोड़ने के बाद, इसका अच्छी तरह से परीक्षण करें:

• अपनी वेबसाइट को डेस्कटॉप और मोबाइल ब्राउज़र दोनों पर खोलें।
• यह पुष्टि करने के लिए बटन पर क्लिक करें कि यह सही फ़ोन नंबर और पहले से भरे संदेश के साथ WhatsApp पर रीडायरेक्ट करता है।
• किसी भी संरेखण या कार्यक्षमता संबंधी समस्या को ठीक करें।

व्हाट्सएप बटन के लिए प्लगइन्स का उपयोग न करने के लाभ

1. वेबसाइट का तेज़ प्रदर्शन: ब्लोटेड प्लगइन कोड से बचें जो आपकी वेबसाइट को धीमा कर सकता है।
2. पूर्ण अनुकूलन: मैन्युअल रूप से बटन जोड़ने से आप इसे अपनी वेबसाइट की ब्रांडिंग के अनुसार डिज़ाइन कर सकते हैं।
3. बेहतर सुरक्षा: कम प्लगइन्स का मतलब है कम कमज़ोरियाँ।

add WhatsApp button to a WordPress website without plugin अक्सर पूछे जाने वाले प्रश्न