How to Add a WhatsApp Button to Your Website
WhatsApp has over 2 billion users worldwide. Adding a WhatsApp contact button to your website removes friction from the customer journey and lets visitors reach you through their preferred communication channel — instantly.
Why Add a WhatsApp Button?
- Familiarity — most visitors already use WhatsApp daily; it requires zero learning
- Speed — messages arrive immediately; no form submission and waiting
- Higher response rates — WhatsApp messages have a 98% open rate vs 20% for email
- Mobile-first — perfect for mobile visitors who don't want to fill out forms
- Trust — direct, personal contact increases conversion rates for service businesses
Method 1: Simple HTML Link (Any Website)
The simplest approach: a click-to-chat URL that opens WhatsApp directly.
<a href="https://wa.me/33612345678?text=Hello%2C%20I%20have%20a%20question"
target="_blank"
class="whatsapp-button">
💬 Contact us on WhatsApp
</a>
Replace 33612345678 with your phone number in international format (country code without the +, then number without the leading 0).
The text= parameter pre-fills the message — use it to tell the customer what context to provide: "Hello, I'm interested in [service]..."
Method 2: Floating Button (Recommended)
A floating button stays visible as visitors scroll — maximising visibility without disrupting the page layout.
For WordPress, use a dedicated plugin:
- Click to Chat (free) — simple, lightweight, highly customisable
- WhatsApp Chat by SupportCandy (free)
- Tidio (paid) — combines WhatsApp with live chat and chatbot
For non-WordPress sites, add this CSS and HTML:
<style>
.whatsapp-float {
position: fixed; bottom: 30px; right: 30px;
background: #25d366; border-radius: 50px;
padding: 12px 20px; color: white;
text-decoration: none; font-weight: bold;
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
z-index: 999;
}
</style>
<a href="https://wa.me/33612345678" class="whatsapp-float" target="_blank">
💬 WhatsApp
</a>
Method 3: WhatsApp Business API (Advanced)
For businesses with high message volumes, the WhatsApp Business API enables:
- Multiple agents handling conversations
- Automated responses and chatbots
- CRM integration
- Message analytics
This requires a business verification process and works through an approved provider (360dialog, Twilio, etc.).
Best Practices
- Set availability hours — add text like "Available Mon–Fri 9am–6pm" near the button
- Pre-fill context — use the
text=parameter to request key information - Use WhatsApp Business (not personal) — separate business and personal conversations, add auto-replies for off-hours
- Follow GDPR — WhatsApp contact is an implicit consent; add a brief privacy note
- Test on mobile — verify the button works correctly on iOS and Android
Need a WhatsApp integration professionally implemented in your website? Our Mindzy team handles all website integrations. Get in touch.
Further reading: