How To Add A WhatsApp Chat Button In Blogger (FREE)
WhatsApp stands as a ubiquitous instant messaging platform, offering a valuable tool for businesses to leverage. It presents an opportunity for businesses to market their services and products effectively.
This article delves into the process of integrating a WhatsApp chat button onto your Blogger website. But before proceeding, it's crucial to understand the benefits of such an addition to your website and whether it aligns with your business objectives.
Recent statistics from eMarketer reveal that WhatsApp boasts a staggering 390.1 million monthly active users in India, with significant user bases in Brazil and the US as well. This substantial user base underscores the potential for business growth through leveraging this platform. Incorporating a WhatsApp chat widget provides users with a convenient means of reaching out directly, bypassing the traditional route of email correspondence.
For WordPress users, implementing this feature on your website is straightforward with the addition of a plugin. Follow the provided guide to seamlessly integrate a WhatsApp chat button into your WordPress website.
How to Add WhatsApp Chat Widget in Blogger Blog
WhatsApp stands out as one of the most widely utilized instant messaging platforms globally, boasting a staggering 2.78 billion monthly active users. By integrating a WhatsApp chat button into your Blogger website, you can tap into this extensive user base.
In this article, I'll provide a detailed, step-by-step tutorial on how to add a WhatsApp chat button to your Blogger site at no cost.
But before we proceed, let's delve into the benefits of incorporating a WhatsApp chat button on your website and whether it aligns with your objectives. Given WhatsApp's massive user base, leveraging this platform through the addition of a chat button presents significant advantages. This feature allows your website users to seamlessly connect with you in real-time with just a single click, offering a superior alternative to traditional email communication.
Now that you understand the benefits of adding a WhatsApp chat button to your website, let's delve into the implementation process.
If you're considering starting a WordPress blog, feel free to explore our comprehensive guide on how to initiate the process.
Alternatively, if you already have a WordPress blog and wish to integrate a WhatsApp chat button, we've got you covered with our detailed, step-by-step guide.
Steps to Add WhatsApp chat button in Blogger
To add a WhatsApp chat button to your Blogger website, simply follow the steps outlined below:
Step 1: Log in to your Blogger dashboard and navigate to the "Theme" section.
Step 2: Click on the "Edit HTML" option for your theme.
/* 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; border: 1px solid #b6b6b6;}
.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); border: 1px solid grey;}
.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}Step 3: Next, locate the "]]></b:skin>" tag or "</style>" in the theme code. Paste the provided CSS code just above this tag.
<input class='chatMenu hidden' id='offchatMenu' type='checkbox'/>
<label class='chatButton' for='offchatMenu'>
<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 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'/></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'/></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'/><rect height='2' width='2' x='19' y='9'/><rect height='2' width='2' x='14' y='9'/><rect height='2' width='2' x='24' y='9'/><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'/></svg>
<div class='chatTitle'>Do you have any doubts? <span>chat with us on WhatsApp</span></div>
</div>
<div class='chatText'>
<span>Hello, How can I help you?</span>
<span class='typing'>...</span>
</div>
</div>
<a class='chatStart' href='https://api.whatsapp.com/send?phone=923064846269&text=Hello AZEEM SAFI, I need your help' rel='nofollow noreferrer' target='_blank'>
<span>Click me to start the chat...</span>
</a>
</div>
Step 4: Continuing, search for the "</body>" tag in the theme code. Paste the provided HTML code just above this tag.
Step 5: After pasting the HTML code, proceed to modify the WhatsApp number and predefined message within the code as per your requirements. Once done, save the code. This action will successfully add the WhatsApp chat button to your website.
To customize the WhatsApp chat button widget after adding it to your website, follow these steps:
1. Positioning: If you wish to change the position of the chat button from left to right, adjust the CSS code accordingly. Modify the values for both ".chatButton" and ".chatBox" classes. For instance, change "left:20px" to "right:20px".
2. WhatsApp Icon: To change the WhatsApp icon, replace the SVG image URL in the HTML code with your desired icon.
3. Color and Size: Customize the color and size of the chat button by editing the corresponding code.
Conclusion:
you've now learned how to add a WhatsApp chat button to your Blogger website for free. Should you have any further questions, feel free to ask in the comments section. Additionally, if you found this article helpful, consider sharing it on social media to assist others interested in adding a WhatsApp chat button to their websites.
For further engagement with like-minded bloggers, join our premium Facebook group for free. Stay updated on our latest blog posts by following us on Twitter.
0 Comments