Create a Whatsapp Chat Widget With Multiple Numbers and Accounts

This widget can be used on all kinds of platforms with only HTML, CSS and Javascript. Of course it is also suitable for use on Wordpress.

From the picture must have been imagined how the function and how this chatbox widget works. You can add 2 to an unlimited number of accounts that will be connected to WhatsApp. After selecting, visitors can type a message before finally entering the whatsapp application automatically. You must install this widget if you need more than 2 Customer Service.

For how to install and also add a whatsapp account, you only need to copy one of the pre-installed codes. Likewise for color and position, everything can be done easily. This guide will be accompanied by a video so that it's easy to understand this tutorial.

This guide is for installation on Blogger / Blogspot.

Please go to Blogger> Themes> Edit HTML
Put the following CSS directly above the code : ]]> atau

/* CSS Multiple Whatsapp Chat */ #whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;right:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)} a.netralidshow-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;right:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)} a.netralidshow-chat i{transform:scale(1.2);margin:0 10px 0 0}.header-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;padding:20px} .header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0} .info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:left;margin:0 10px 0 0} .info-avatar:before{content:'\f232';z-index:1;font-family:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;left:30px} a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s} a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888} #get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none} .netralid-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd} textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none} a#send-it{color:#555;width:40px;margin:-5px 0 0 5px;font-weight:700;padding:8px;background:#eee;border-radius:10px} .first-msg{background:#f5f5f5;padding:30px;text-align:center} .first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block} .start-chat .netralid-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;right:15px;color:#fff;font-size:30px} @keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}} @media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}} .hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1} .show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}

For this HTML you can put it on Layout> Widget> HTML / Javascript, actually it can be placed anywhere, if you edit HTML, you can put it above the Javascript code in the next step.

 
 
Hello!
 
Click one of our representatives below to chat on WhatsApp or send us an email to netralid@gmail.com
 
 
   
 
 Support Customer Service 1 
628875820426     
 
 Sales Customer Service 2 
6222222222   
Call us to +628875820426 from 0:00hs a 24:00hs
 
 
Hello! What can I do for you?
 
 Send
 
× 
 How can I help you?

Code marked  is code that must be changed according to contact data. For whatsapp numbers, don't use the plus sign +, only country codes like 62.

Put Javascript below right above the code

Save Template.

Please note, this widget font will automatically follow the default font of the template you are using. Make sure you have installed special fonts and also External CSS like Awesome Fonts and also jQuery.

If you haven't used Font Awesome and jQuery, you can add the following code above the code usually the latest version of the template is already using Font Awesome (Icons) and jQuery.

Live DEMO - Click Here

Font Awesome 

jQuery 

This WhatsApp chat widget is perfect when combined with a Shop template