WhatsApp is one of the best instant messaging app widely used all over the world. It's helps the users to send instant message and share media files. You can take advantage of this feature to sell your product and establish a contact with your clients. You will also get their contact number which will allow you to notify your client about your new latest products. You can use this to advertise your business and get some real customers easily.
In this article I will show How you can add a WhatsApp chat button in your Blogger website. Before adding a WhatsApp chat button on your website let's see some benefits of using a WhatsApp chat button on your website.
According to WhatsApp currently they have 2 billion active user world wide in every month. And also ranked as world number 1 massaging app. WhatsApp will help you to contact with your customers directly rather than sending an Emails. You can send promotional SMS to your customers. WhatsApp has business account feature. Which will help you to manage your business.
Now, Let's start creating WhatsApp chat widget in Blogger website. Follow the below steps properly to create a WhatsApp chat widget successfully. Before starting the process make sure to Download a backup of your website. This way if something goes wrong you will able to restore your website.
Step-1: Adding CSS code
The first thing you need to do is go to the your blogger dashboard. Click on theme section. And click on Edit as HTML. Now find your CSS code section and paste the below CSS code.
To get the CSS section go to theme and select Edit HTML. Now click "CTRL+F" and search below code -
]]> </b:skin>
Paste the CSS code right above it and save the theme.
You can do this job easily without searching codes. Follow the below steps to paste the CSS code easily.
Go to theme section > Customize > Advance > From menu Select "Add CSS"
When you click on Add CSS you will get a box. Paste the CSS code there and click on save. After that this code will be added to your theme. In some cases this way may not work. So, I suggest to paste the code on your theme CSS section.
/* Chatbox Whatsapp */
:root {
--warna-background: #4dc247;
--warna-bg-chat: #f0f5fb;
--warna-icon: #fff;
--warna-text: #505050;
--warna-text-alt: #989b9f;
--lebar-chatbox: 320px;
}
svg{width: 22px;height: 22px;vertical-align: middle;fill: var(--warna-icon)}
.chatMenu, .chatButton .svg-2{display: none}
.chatButton{position: fixed;background-color: var(--warna-background);bottom: 20px;left: 20px;border-radius: 50px;z-index: 20;overflow: hidden;display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;-webkit-transition: all .2s ease-out;transition: all .2s ease-out}
.chatButton svg{margin: auto;fill: var(--warna-icon)}
.chatBox{position: fixed;bottom: 70px;left: 20px;width: var(--lebar-chatbox);-webkit-transition: all .2s ease-out;transition: all .2s ease-out;z-index: 21;opacity: 0;visibility: hidden;line-height: normal}
.chatContent{border-radius: 15px;background-color: #fff;box-shadow: 0 5px 15px 0 rgba(0,0,0,.05);overflow: hidden}
.chatHeader{position: relative;display: flex;align-items: center;padding: 15px 20px;background-color: var(--warna-background);overflow: hidden}
.chatHeader svg{width: 32px;height: 32px;flex-shrink: 0;fill: var(--warna-icon)}
.chatHeader .chatTitle{padding-left: 15px;font-size: 14px;color: var(--warna-icon)}
.chatHeader .chatTitle span{font-size: 11.5px;display: block;line-height: 1.58em}
.chatText{display: flex;flex-wrap: wrap;margin: 25px 20px;font-size: 12px;color: var(--warna-text)}
.chatText span{display: inline-block;margin-right: auto;padding: 10px 10px 10px 20px;background-color: var(--warna-bg-chat);border-radius: 3px 15px 15px}
.chatText span:after{content: 'Just now';margin-left: 15px;font-size: 9px;color: var(--warna-text-alt)}
.chatText .typing{margin: 15px 0 0 auto;padding: 10px 20px 10px 10px;border-radius: 15px 3px 15px 15px}
.chatText .typing: after{display: none}
.chatStart{display: flex;align-items: center;margin-top: 15px;padding: 18px 20px;border-radius: 10px;background-color: #fff;overflow: hidden;font-size: 12px;color: var(--warna-text)}
.chatMenu:checked + .chatButton{-webkit-transform: rotate(360deg);transform: rotate(360deg)}
.chatMenu:checked + .chatButton .svg-1{display: none}
.chatMenu:checked + .chatButton .svg-2{display: block}
.chatMenu:checked ~ .chatBox{bottom: 90px;opacity: 1;visibility: visible}
After adding this CSS code on your theme now you have to add a HTML code. After pasting this HTML code on your theme your job is done. Follow the below steps to add this HTML code.
Step-2: Adding HTML code
To add this HTML code you can follow 2 different ways. It depends on the use of chat box. If you want to use this WhatsApp chat box on your whole website including home page than you can follow steps as below. There are two option choose whatever suits you.
Option 1: To add the HTML code go to your theme section and click on "Edit as HTML" now find " </body>". or scroll down it should be at the bottom. Now paste the html code right before </body> and save the theme.
Option 2: Here option 2, Go to Blogger Dashboard and click on layout section. Click on create a new Widget from anywhere and select "HTML/JavaScript" paste the code and save it.
If you want to use this chat box on a specified page or post than go to Edit as HTML on your post page and paste the html code. Than it will show the chat box on the page or posts you want.
<input class="chatMenu hidden" id="offchatMenu" type="checkbox" />
<label class="chatButton">
<svg class="svg-1" viewbox="0 0 32 32"><g><path d="M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z"></path><path d="M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z"></path></g></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 class="chatBox">
<div class="chatContent">
<div class="chatHeader">
<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="chatTitle">Please chat with our team<span>Admin will reply in a few minutes</span></div>
</div>
<div class="chatText">
<span>Hello, Is there anything we can help you with?</span>
<span class="typing">...</span>
</div>
</div>
<a class="chatStart" href="https://api.whatsapp.com/send?phone=00000000000000&text=Assalamualaikum,%20Saya%20ingin%20bertanya" rel="nofollow noreferrer" target="_blank">
<span>Start chat...</span>
</a>
</div>
From above HTML code replace "0000000000000" with your WhatsApp number. And the Assalamualaikum text with your custom text. make sure to use country code before your WhatsApp number.
Use the HTML code where you want to show the widget. Don't use this on your home page if you have a Blog website. It will look awkward having a WhatsApp widget on home page. But if you have a portfolio website then it will be very useful. Depending on use this widget will be very helpful.
Conclusion
Always staying connected with customers and sending them update about your new products as key point of business. But you have to spend money for marketing app. But with WhatsApp you get your clients contact information and get to contact them directly rather than sending E-mail. But some people say it evade their personal privacy by sharing their contact number. But by using business account I think it's really very useful and helpful.
If you face any problem while adding WhatsApp chat widget button on your blogger website ask me on the comment section. And if you like the article than share it with your friends and help me to grow my website.