In today’s digital landscape, direct and instant communication is key to engaging with your audience. If you’re running a Blogger website, adding a floating WhatsApp chat button allows visitors to contact you effortlessly.
This simple guide will walk you through adding a stylish and animated WhatsApp button using HTML & CSS.
Read More: How to Add an Animated Floating Telegram Button in Blogger & WordPress
Why Add a WhatsApp Chat Button?
- Instant Communication – Visitors can message you directly with one click.
- Boosts Engagement – A floating button ensures high visibility.
- Increases Conversions – Faster communication leads to more inquiries.
- Mobile-Friendly – Works on both desktop and mobile devices.
Now, let’s get started!
Step 1: Get Your WhatsApp Chat Link
Before adding the button, you need to create your WhatsApp chat link:
If you want users to message you directly, use:https://wa.me/yourphonenumber (Replace <em>yourphonenumber</em> with your actual WhatsApp number, including the country code, but without the <em>+</em> sign.)
To include a pre-filled message, use:https://wa.me/yourphonenumber?text=Hello!%20I%20need%20assistance. (This sends a predefined message when the visitor clicks the button.)
Step 2: Add HTML & CSS Code to Blogger
- Log in to Blogger and navigate to Layout.
- Click “Add a Gadget”, then select HTML/JavaScript.
- Copy and paste the following code inside the gadget:
<style>
.whatsapp-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #25d366;
border-radius: 50%;
width: 60px;
height: 60px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
animation: bounce 1.5s infinite;
display: flex;
align-items: center;
justify-content: center;
}
.whatsapp-button img {
width: 40px;
height: 40px;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
</style>
<a href="https://wa.me/yourphonenumber" target="_blank" class="whatsapp-button">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp">
</a>- Replace
<strong>yourphonenumber</strong>with your actual WhatsApp number. - Click Save, and your floating WhatsApp button is now live!
Final Thoughts
Adding a WhatsApp chat button to your Blogger website makes communication seamless and encourages visitors to reach out with inquiries. This method ensures a mobile-friendly, engaging, and effective way to connect with your audience in real-time.
Would you like to add a floating Telegram or Messenger button as well? Let us know in the comments! 🚀
