If you are looking for a unique, modern WhatsApp chat widget for your Blogger website, this article is just for you! 💬
Today, we’ll create a beautiful floating WhatsApp widget with a glass effect, glowing animation, and lightweight code — perfect for any Blogger site.
No external CSS or JavaScript required — just pure HTML!
(toc) #title=(Table of Content)
What Is a WhatsApp Widget?
A WhatsApp widget allows your visitors to chat directly with you in one click.
It’s a small floating button that stays visible on your website — so users can instantly connect with you for support, business inquiries, or feedback.
Why Use This Stylish WhatsApp Widget?
- Improves user engagement
- Gives your blog a professional look
- Fast loading — no external JavaScript
- Works perfectly on mobile and desktop
- Modern glass-effect design
- Helps visitors contact you instantly
Features of This Widget:
- Modern Glass-effect design
- Works on mobile and desktop
- Lightweight (no extra files)
- Animated hover with smooth glow
- 100% Blogger-compatible
- Easy to edit (just change your number)
WhatsApp Widget Code:
<b:if cond='data:blog.pageType == "item"'>
<!-- Stylish Floating WhatsApp Widget -->
<div style="
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
">
<a href="https://wa.me/917XXXXXXXXX" target="_blank"
style="
display: flex;
align-items: center;
gap: 10px;
background: rgba(37, 211, 102, 0.2);
backdrop-filter: blur(10px);
color: #25D366;
padding: 12px 20px;
border-radius: 50px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
text-decoration: none;
border: 2px solid rgba(37,211,102,0.4);
box-shadow: 0 4px 15px rgba(37,211,102,0.4);
transition: all 0.3s ease;
"
onmouseover="this.style.background='rgba(37,211,102,0.3)'; this.style.transform='scale(1.08)'; this.style.boxShadow='0 6px 20px rgba(37,211,102,0.5)';"
onmouseout="this.style.background='rgba(37,211,102,0.2)'; this.style.transform='scale(1)'; this.style.boxShadow='0 4px 15px rgba(37,211,102,0.4)';">
<svg xmlns='http://www.w3.org/2000/svg' fill='#25D366' viewBox='0 0 24 24' width='24' height='24'>
<path d='M20.52 3.48A11.8 11.8 0 0012 .25 11.75 11.75 0 001.67 16.65L.25 24l7.48-1.56A11.73 11.73 0 0012 23.75h.01a11.77 11.77 0 008.51-20.27zM12 21.5a9.57 9.57 0 01-4.89-1.34l-.35-.21-4.43.92.93-4.32-.23-.36a9.59 9.59 0 01-1.46-5.09A9.47 9.47 0 0112 2.5a9.46 9.46 0 019.5 9.47A9.48 9.48 0 0112 21.5zm5.13-7.14c-.28-.14-1.66-.82-1.92-.91s-.45-.14-.63.14-.72.91-.88 1.09-.33.2-.61.07a7.88 7.88 0 01-2.31-1.42 8.66 8.66 0 01-1.62-2.03c-.17-.28 0-.43.12-.56.13-.13.28-.33.42-.49s.19-.28.29-.47.05-.36-.02-.5-.62-1.52-.85-2.09-.45-.48-.62-.49-.36-.01-.55-.01a1.06 1.06 0 00-.76.35 3.2 3.2 0 00-1 2.36 5.59 5.59 0 001.17 3.01 12.78 12.78 0 005.12 4.72 17.5 17.5 0 001.75.65 4.19 4.19 0 001.92.12 3.1 3.1 0 002.07-1.46 2.55 2.55 0 00.18-1.46c-.07-.12-.26-.19-.55-.33z'/>
</svg>
Chat Now
</a>
</div>
</b:if>(code-box)
Replace 917XXXXXXXXX with your WhatsApp number (include country code).
How to Add It in Your Blogger:
- Go to your Blogger Dashboard
- Click Theme → Edit HTML
- Scroll down and find the </body> tag
- Paste the above code just above it
- Click Save and View your blog
The widget will now appear only on your post pages (not homepage).
Preview:
Once you save, a floating green button will appear at the bottom-right corner of your blog.
When visitors click it, WhatsApp will open directly for chatting with you.
Pro Tip:
If you want it on all pages, just remove this line:
<b:if cond='data:blog.pageType == "item"'>(code-box)
and its closing </b:if> tag.
That way, it will show everywhere — homepage, posts, and static pages.
Final Thoughts:
Adding a WhatsApp chat widget gives your blog a professional look and helps your readers contact you instantly.
