Let me tell you why your blog isn't converting visitors into leads. There are several reasons, but one of the biggest is that visitors may not feel connected to you, leading to unsuccessful blogging. To make money with your audience, it's necessary to stay connected through messaging platforms and promote products/services to them.
Therefore, Adding WhatsApp Chat Widget to Blogger can help you stay connected with your audience and boost engagement on your blog. With this widget, visitors can easily get in touch with you and ask questions or share feedback, helping you build a loyal customer base and drive business growth.
|
Now, let's see how you can easily add a WhatsApp chat widget to Blogger in just 2 minutes with this step-by-step guide. We'll also explore some of the major benefits of adding this widget to your blog, which can increase audience engagement and trust.
What is WhatsApp Chat Widget?
WhatsApp Chat Widget is a plugin that enables users to chat with businesses or individuals via WhatsApp directly from their website or blog. This widget can be easily added to a website or blog, allowing visitors to initiate a chat with the website owner or customer support team, without the need to navigate away from the website. This not only improves the user experience, but it also increases the chances of generating leads, boosting conversions, and improving customer satisfaction.
The WhatsApp Chat Widget is user-friendly and simple to use, enabling businesses and website owners to communicate with their customers in real-time. The widget can be customized to match the website's branding and design, ensuring that it seamlessly integrates with the website's overall look and feel.
From an SEO standpoint, the WhatsApp Chat Widget can help improve website rankings by increasing user engagement and reducing bounce rates. By making it easy for visitors to contact the website owner or support team, it increases the time visitors spend on the website, which is a positive signal to search engines.
Overall, the WhatsApp Chat Widget is an excellent tool for website owners and businesses looking to increase engagement, generate leads, and improve customer satisfaction, all while improving their website's SEO.
Now, let's see some of the major benefits of having a WhatsApp Chat Widget for Blogger. Let's check it out!
Benefits of Having a Whatsapp Chat Widget for Blogger
Adding a WhatsApp Chat Widget to your Blogger site can be a game changer. It can help boost engagement, drive leads, and improve customer satisfaction. Let's explore its benefits!
- A WhatsApp Chat Widget allows visitors to chat with the website owner directly.
- It improves customer satisfaction and boosts engagement on your website.
- It reduces bounce rates and increases visitor retention time.
- It helps generate leads and increase conversions.
- It enhances the overall user experience and builds trust with your audience.
I hope you found the benefits of having a WhatsApp Chat Widget for your Blogger blog interesting. Now, let's take a look at a demo of this widget.
Demo of WhatsApp Chat Widget
|
Steps to Add a WhatsApp Chat Widget to your Blogger
Adding a WhatsApp Chat Widget to your Blogger site is easy and quick. In just a few steps, you can have the widget up and running, allowing your audience to connect with you seamlessly.
First Step - Adding CSS Code
To add a whatsapp chat widget to your blogger, firstly, you need to add CSS code into your current template. Therefore, go to Theme Section » Click Edit HTML. Now add the below CSS code into your CSS group of your template.
/* WhatsApp Chat Widget by Eezy Blogger */
:root {
--warna-background: #4dc247; /* Change header and background color */
--warna-bg-chat: #f0f5fb;
--warna-icon: #fff; /* Change icon color */
--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}
Description in the: root{...} section, you can change the header, icon, or width of the widget according to your wishes. Also, you can replace left with right to change the side of this widget.
Second Step - Adding HTML Code
Copy the below HTML code and paste it into your template just before </body> tag and Click Save. All done, you have successfully added a whatsapp chat widget to your blogger.
<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><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 few minutes</span></div>
</div>
<div class='chatText'>
<span>Hello! How can we help you?</span>
<span class='typing'>...</span>
</div>
</div>
<a class='chatStart' href='https://api.whatsapp.com/send?phone=6280000000000&text=Hello,%20I%20Want%20to%20Ask' rel='nofollow noreferrer' target='_blank'>
<span>Start chatting...</span>
</a>
</div>
Change the Number:6280000000000 and the Text:Hello! according to your wishes.
Conclusion
In conclusion, the WhatsApp Chat Widget for Blogger is a fantastic tool that improves user experience and communication between website owners and their visitors. With its customizable design and SEO benefits, the widget can drive engagement, boost conversions, and improve customer satisfaction. It's a must-have for any blogger looking to connect with their audience and grow their business.
If you need any assistance, please feel free to contact us or leave a comment, and we will get back to you as soon as possible. As Eezy Blogger, we strive to make it easy for people to find us online, so please share our website with your fellow bloggers to help us reach more people.
Wishing you a pleasant day! 😊 We look forward to your next visit.