How to Add a WhatsApp Chat Button to Your Website (HTML + CSS Guide 2026)
Learn how to add a floating WhatsApp chat button to your website with HTML, CSS, and JavaScript. Step-by-step guide with copy-paste code for any site builder.
How to Add a WhatsApp Chat Button to Your Website (HTML + CSS Guide 2026)
A WhatsApp chat button on your website turns passive visitors into real-time conversations. One tap and they're chatting with your business — no forms, no email, no friction.
This guide covers everything: from a simple inline HTML button to a floating widget with animations, plus how to add it to WordPress, Shopify, Wix, or any plain HTML site.
Why a WhatsApp button boosts conversions
| Metric | Without WhatsApp | With WhatsApp |
|--------|-----------------|---------------|
| Contact rate | 5–15% (forms) | 40–60% (click-to-chat) |
| Response time | 12–24 h (email) | 2–5 min |
| Open rate | 20–30% (email) | 98% |
| Customer satisfaction | Baseline | +25% NPS |
A WhatsApp button captures visitors at the moment of interest. They don't fill a form, wait for a reply, or switch apps — they just tap and talk.
Option 1: Simple inline button (HTML)
Paste this anywhere in your HTML for a clickable WhatsApp button:
<a href="https://wa.me/34612345678?text=Hi%2C%20I%20have%20a%20question"
style="background-color:#25D366; color:#fff; padding:14px 28px;
border-radius:8px; text-decoration:none; font-weight:600;
font-size:16px; display:inline-block;">
💬 Chat on WhatsApp
</a>
Replace 34612345678 with your business number (country code + number, no plus sign).
?text=, the user opens an empty chat box and many won't type. Good examples:
?text=Hi%2C%20I%27d%20like%20a%20quote(services)?text=Hi%2C%20I%20have%20a%20question%20about%20a%20product(e-commerce)?text=Hi%2C%20I%27d%20like%20to%20book%20an%20appointment(booking)
Option 2: Floating WhatsApp button (CSS widget)
A floating button stays in the bottom-right corner on every page — the most popular design. Here's the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.wa-float {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1000;
}
.wa-float a {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: #25D366;
color: #fff;
border-radius: 50%;
text-decoration: none;
font-size: 30px;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
transition: transform 0.2s ease;
}
.wa-float a:hover { transform: scale(1.1); }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.wa-float a { animation: pulse 2s infinite; }
</style>
</head>
<body>
<div class="wa-float">
<a href="https://wa.me/34612345678?text=Hi%2C%20I%20need%20help"
target="_blank" rel="noopener noreferrer"
aria-label="Chat on WhatsApp">💬</a>
</div>
</body>
</html>
Customizing the floating button
- Change position: swap
right: 24pxforleft: 24px. - Resize: adjust
width,height, andfont-sizeproportionally. - Change color: replace
#25D366with your brand accent. - Remove pulse: delete the
@keyframesandanimationlines.
Show button after scroll (JavaScript)
For a cleaner hero section, show the button only after the visitor scrolls past 400 px:
<script>
const btn = document.querySelector('.wa-float');
btn.style.display = 'none';
window.addEventListener('scroll', () => {
btn.style.display = window.scrollY > 400 ? 'block' : 'none';
});
</script>
Adding WhatsApp to popular site builders
| Platform | Where to paste |
|----------|---------------|
| WordPress | Paste CSS in "Additional CSS". Add HTML with a "Custom HTML" block in footer or via a plugin like Insert Headers and Footers. |
| Shopify | Edit theme.liquid → paste HTML before