What tutorial do you want for the next article! Request Here!

Whatsapp Chatbox Widget Button Lagaye Blogger In Hindi 2021

आप भी अपनी ब्लॉगर वेबसाइट में Whatsapp चैटबॉक्स बटन लगना सिनाना चाहते है। नीचे दिए गए स्टेप्स को फॉलो करें, आसानी से whatsapp chat विज को एड कर पाएंगे
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
how to add Whatsapp widget in blogger

जय हिंद दोस्तों, आज हम व्हाट्सएप विजेट को टेम्पलेट में एड करना सीखेगे। वैसे तो व्हाट्सएप विजेट जोड़ना अनिवार्य नहीं है, आप इसे जोड़ सकते हैं भी और नहीं भी यह आप पर निर्भर करता है। कुछ ब्लॉगर अपनी व्हाट्सएप गोपनीयता बनाए रखने के लिए इसका इस्तेमाल नहीं करते हैं, लेकिन कुछ ब्लॉगर ऐसे भी हैं जो अपने बिजनेस और प्रोडक्ट को बढ़ाने के लिए व्हाट्सएप नंबर या संपर्क का प्रयोग करते है। क्योंकि इसे कॉन्टैक्ट करना बहुत सरल हो जाता है।

इसलिए हमने इस ट्यूटोरियल के माध्यम से व्हाट्सएप चैट को लगना सिखाया है शायद मेरे कुछ ब्लॉगर्स को इस विजेट की आवश्यकता हो। इस विजेट का एक फायदा यह है कि इसे कस्टमाइज करना बहुत आसान है, आप अपने अनुसार विजेट के रंग और चौड़ाई को आसानी से बदल सकते हैं, नीचे दिए गए व्हाट्सएप चैट विजेट बनाने के तरीके को ध्यान से समझकर टेंपलेट में एड करें:

Step 1- Add CSS In Theme

सबसे पहले आपको Theme ऑप्शन पर जाना होगा उसके बाद Edit HTML टेम्पलेट मेनू पर जाना होगा और नीचे दिए गए CSS कोड को अपने ब्लॉग में </style> या  ]]></b:skin> सेक्शन के ऊपर CSS कोड को जोड़ना होगा।

/* Chatbox Whatsapp */
:root {
--color-background: #4dc247; /*The background color of the chat button and header*/
  --color-bg-chat: #f0f5fb;
  --color-icon: #fff; /* Chat icon color */
  --color-text: #505050;
  --color-text-alt: #989b9f;
  --lebar-chatbox: 320px;
}
.sticky-button{position:fixed;background-color:var(--color-background);bottom:20px;left:20px;width:55px;height:55px;border-radius:50px;box-shadow:0 2px 5px 0 rgba(0,0,0,.1);z-index:20;overflow:hidden;}
.sticky-button a, .sticky-button label{display:flex;align-items:center;width:55px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}
.sticky-button a svg, .sticky-button label svg{margin:auto;fill:var(--color-icon)}
.sticky-button label svg.svg-2{display:none}
.sticky-chat{position:fixed;bottom:70px;left:20px;width:var(--lebar-chatbox);-webkit-transition:all .3s ease-out;transition:all .3s ease-out;
z-index:21;opacity:0;visibility:hidden;line-height:normal}
.sticky-chat .chat-content{border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}
.sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:var(--color-background);overflow:hidden}
.sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.040);border-radius:70px 0 5px 0;}
.sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--color-icon)}
.sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--color-icon)}
.sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}
.sticky-chat .chat-text{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:var(--color-text)}
.sticky-chat .chat-text span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--color-bg-chat);border-radius:3px 15px 15px}
.sticky-chat .chat-text span:after{content:'Just now';display:inline-block;margin-left:15px;font-size:9px;color:var(--color-text-alt)}
.sticky-chat .chat-text span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
.sticky-chat .chat-text span.typing:after, .chat-menu{display:none}
.sticky-chat .chat-text span.typing svg{height:14px;fill:var(--color-text-alt)}
.sticky-chat .chat-button{display:flex;align-items:center;margin-top:15px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--color-text)}
.sticky-chat .chat-button svg{width:20px;height:20px;fill:var(--color-text-alt);margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}
.chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
.chat-menu:checked + .sticky-button label svg.svg-1{display:none}
.chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}
.chat-menu:checked + .sticky-button + .sticky-chat{bottom:90px;opacity:1;visibility:visible}
अपने अनुसार बदलिए: आप :root{} से अपनी पसंद के अनुसार हेडर कलर, आइकन और विजेट की चौड़ाई को बदल सकते हैं। अगर आप विजेट के जगह को बदलना चाहते है उसके लिए मार्क किए गए right टेक्स्ट को बदल के दाईं और कर दे ताकि यह दाईं ओर दिखे।

Step 2 - Add HTML Script Code

एचटीएमएल स्क्रिप्ट कोड को जोड़ने के दो तरीके हैं, आपको जो तरीका आसान लगे आप उसका इस्तेमाल कर सकते है, पहला तरीका है बहुत ही सरल है आपको ब्लॉगर लेआउट मेनू में सबसे पहले साइडबार विजेट पर जाकर एक नया एचटीएमएल/जवा स्क्रिप्ट का चुनाव करें और नीचे दिए गए एचटीएमएल स्क्रिप्ट कोड को कॉपी पेस्ट करें। दूसरा तरीका में आपको सबसे पहले नीचे दिए गए एचटीएमएल कोड को </body> टैग के ऊपर कॉपी पेस्ट करना होगा। आप दोनों में से कोई भी तरीका इस्तेमाल करे दोनों का परिणाम एक ही आएगा, ये आप पर निर्भर है कि आप कौन सा तरीक़ा काम में लेना चाहते हैं।

<input class='chat-menu hidden' id='offchat-menu' type='checkbox' />
<div class='sticky-button' id='sticky-button'>
  <label for='offchat-menu'>
    <svg class='svg-1' viewBox='0 0 32 32'><path d='M16,3A13,13,0,0,0,4.53,22.13L3,27.74a1,1,0,0,0,.27,1A1,1,0,0,0,4,29a.84.84,0,0,0,.27,0l5.91-1.65a1,1,0,0,0-.53-1.93L5.42,26.56l1.15-4.3a1,1,0,0,0-.1-.76A11,11,0,1,1,16,27a11.23,11.23,0,0,1-1.84-.15,1,1,0,0,0-1.15.82,1,1,0,0,0,.82,1.15A13,13,0,1,0,16,3Z'></path><path d='M15,11.21l-1.16-1.6a2.06,2.06,0,0,0-1.5-.84,2.08,2.08,0,0,0-1.62.6l-1.2,1.2a2.81,2.81,0,0,0-.8,2.08c0,1.77,1.36,4,4,6.6,3.09,3,5.23,4,6.69,4a2.7,2.7,0,0,0,2-.81l1.2-1.2a2,2,0,0,0-.24-3.11L20.8,17a2.09,2.09,0,0,0-1.83-.3l-1.49.47a.53.53,0,0,1-.26-.09,11.42,11.42,0,0,1-2.35-2.26.31.31,0,0,1,0-.11c.13-.44.35-1.15.5-1.64A2,2,0,0,0,15,11.21Zm1.29,7.63a2.33,2.33,0,0,0,1.75.2l1.54-.46,1.61,1.25L20,21c-.48.47-2.25.33-5.86-3.21-3-2.91-3.41-4.5-3.41-5.18A.89.89,0,0,1,11,12l1.28-1.19,1.18,1.65c-.16.49-.39,1.22-.51,1.65A2.12,2.12,0,0,0,13,15.51,11.24,11.24,0,0,0,16.33,18.84Z'></path></svg>
    <svg class='svg-2' viewbox='0 0 512 512'>
      <path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'></path>
    </svg>
  </label>
</div>
<div class='sticky-chat'>
  <div class='chat-content'>
    <div class='chat-header'>
      <svg viewbox='0 0 32 32'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'></path><rect height='2' width='2' x='19' y='9'></rect><rect height='2' width='2' x='14' y='9'></rect><rect height='2' width='2' x='24' y='9'></rect><path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'></path></svg>
      <div class='title'>Please chat with our team <span>Admin will reply within minutes</span></div>
    </div>
    <div class='chat-text'>
      <span>Hello, how can we help you?</span>
      <span class='typing'><svg viewbox='0 0 512 512'><circle cx='256' cy='256' r='48'></circle><circle cx='416' cy='256' r='48'></circle><circle cx='96' cy='256' r='48'></circle></svg></span>
    </div>
  </div>
  <a class='chat-button' href='https://api.whatsapp.com/send?phone=98576543210&text=Assalamualaikum,%20Saya%20ingin%20bertanya' rel='nofollow noreferrer' target='_blank'>
    <span>Start chat...</span>
    <svg viewBox='0 0 32 32'><path class='cls-1' d='M19.47,31a2,2,0,0,1-1.8-1.09l-4-7.57a1,1,0,0,1,1.77-.93l4,7.57L29,3.06,3,12.49l9.8,5.26,8.32-8.32a1,1,0,0,1,1.42,1.42l-8.85,8.84a1,1,0,0,1-1.17.18L2.09,14.33a2,2,0,0,1,.25-3.72L28.25,1.13a2,2,0,0,1,2.62,2.62L21.39,29.66A2,2,0,0,1,19.61,31Z'></path></svg>    
  </a>
</div>
सहला: मार्क किए गए व्हाट्सएप नंबर को आपके व्हाट्सएप नंबर के साथ बदलिए, साथ ही अपनी इच्छा के अनुसार WhatsApp पर मैसेज को भी बदलें।
You May Like These Posts:

1 comment

  1. Hello Bhai.Me TechnicalDihan Hu.Bhaj Bas Ye Batado LandingPagesAnd Ibot Page Ka Price Batado Please
To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.