Add a Floating WhatsApp Chat Button to Your Blogger Website Easily.
Adding a WhatsApp chat button to your Blogger website is a great way to engage with your visitors directly and conveniently.
.jpg "Add a Floating WhatsApp Chat Button to Your Blogger Website Easily") |
| Add a Floating WhatsApp Chat Button to Your Blogger Website Easily |
Follow these simple steps to integrate a WhatsApp button on your website using HTML and CSS.
Step 1: Add the WhatsApp Button HTML Code
Insert the following HTML code into your Blogger website, wherever you want the WhatsApp chat button to appear:
HTML Code
<a href="https://web.whatsapp.com/send?phone=1234567890&text=Hi,%20I%20am%20interested%20in%20your%20product" target="_blank">
<button class="whatsapp-button">
<svg viewBox="0 0 64 64"><path d="M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z"></path></svg>
Chat on WhatsApp
</button>
</a>
Replace 1234567890 with your WhatsApp phone number.
Modify the message text, "Hi, I am interested in your product", to suit your needs.
Step 2: Style the Button with CSS
Use the following CSS code to design your WhatsApp chat button. Add this code in the <head> section of your Blogger template or your custom CSS area:
.whatsapp-button {
background-color: #25D366;
color: #fff;
font-size: 16px;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
text-decoration: none;
}
.whatsapp-button svg {
fill: #fff;
width: 16px;
height: 16px;
margin-right: 8px;
}
You can customize the background color, font size, padding, and other properties to match your website's theme.
Step 3: Preview and Test
After adding the HTML and CSS code, preview your website to ensure the button appears correctly. Test the button to confirm that it redirects to WhatsApp with the predefined message.
How to Add a Floating WhatsApp Button in Blogger
.jpg "How to Add a Floating WhatsApp Button in Blogger") |
| How to Add a Floating WhatsApp Button in Blogger |
For a more modern and dynamic experience, you can add a floating WhatsApp button on your website that stays fixed at the bottom-right corner. Use the code below:
HTML Code
<a href="https://api.whatsapp.com/send?phone=1234567890&text=Hi,%20I%20am%20interested%20in%20your%20product" target="_blank" class="whatsapp-float">
<button class="whatsapp-button">
<svg viewBox="0 0 64 64"><path d="M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z"></path></svg>
Chat on WhatsApp
</button>
</a>
CSS Code for Floating WhatsApp Button:
.whatsapp-float {
position: fixed !important;
bottom: 20px;
right: 20px;
z-index: 999;
animation: fadeInUp 0.5s ease-in-out 0s both;
}
.whatsapp-icon {
width: 50px;
height: 50px;
background-color: #25d366;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}
.whatsapp-icon svg {
fill: #fff;
width: 20px;
height: 20px;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 20px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
Benefits of Adding a WhatsApp Chat Button:
- Instant Communication: Connect with your visitors in real-time, improving engagement and satisfaction.
- Mobile-Friendly: Ideal for smartphone users who prefer apps over traditional methods.
- Enhanced Trust: A direct communication channel builds credibility and fosters user confidence.
- Boost Sales: Allow customers to inquire about your products or services instantly, driving conversions.
- Improved User Experience: Simplifies communication with a familiar and easy-to-use interface.
- Customizable and Easy Setup: Tailor the button's design and message to your brand effortlessly.
