WhatsApp share button for your website: free, 5-minute setup
A WhatsApp button on your website is one of the highest-leverage 5-minute changes you can make: 5–15% of visitors will click it on pages where it's well-placed, and conversion from WhatsApp chat to customer is 3–5× higher than from form fills.
This guide covers the two main types — share button vs chat widget — the code snippets to add either, and the placement rules that maximise clicks.
Key takeaways
Can I add a WhatsApp button to any website?
Yes — it's just an HTML anchor tag. Works on WordPress, Shopify, Webflow, plain HTML, every framework.
What's the difference between WhatsApp share and WhatsApp chat buttons?
Share lets visitors share your page to their contacts. Chat lets visitors message YOU directly.
Does the WhatsApp button need the Business API?
Plain wa.me buttons work with any WhatsApp number (personal or business). For chat routing, shared inbox, and chatbot replies you need the Business API.
How do I track clicks on a WhatsApp button?
Wrap the link in your analytics event tracking (Google Analytics, Mixpanel, PostHog) — fire an event on click before the wa.me link opens.
Share button vs chat widget — what's the difference
Share button: visitor shares your page URL to a contact (good for blogs, product pages, viral content). Chat widget: visitor opens WhatsApp pre-filled to message YOU (good for lead capture, support, sales). Most businesses want the chat widget; publishers and viral-content sites want the share button. You can run both.
Chat widget — code snippet
Floating button bottom-right that opens `https://wa.me/{your-number}?text=Hi%20I%20have%20a%20question`. Pure HTML/CSS — no JS required:
``` <a href="https://wa.me/919876543210?text=Hi%20I%20have%20a%20question" target="_blank" style="position:fixed;bottom:20px;right:20px;background:#25D366;color:#fff;padding:14px 18px;border-radius:50px;font-family:sans-serif;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:9999">💬 Chat on WhatsApp</a> ```
Paste before `</body>`. Replace the phone number. Done.
Share button — code snippet
Lets visitors share the current page URL via WhatsApp:
``` <a href="https://wa.me/?text=Check%20this%20out%3A%20https%3A%2F%2Fyoursite.com%2Fpage" target="_blank">Share on WhatsApp</a> ```
For dynamic URLs, use JavaScript: `encodeURIComponent(window.location.href)`.
Placement that maximises clicks
Floating bottom-right on every page (default). High-intent pages — pricing, product detail, contact — show it larger or above-the-fold too. On mobile, button must be tap-friendly (44px+ tall). Hide on long-form blog scrolls to avoid distraction; show again at the bottom and on exit-intent.
Upgrading to a full chat widget
Static buttons work, but a real WhatsApp chat widget adds opt-in capture (collect name + email before redirect), greeting message customisation, business hours, multiple agent routing, and analytics. LandinChat's widget is free to install and includes all of this.
Frequently asked questions
Can I add a WhatsApp button to any website?
Yes — it's just an HTML anchor tag. Works on WordPress, Shopify, Webflow, plain HTML, every framework.
What's the difference between WhatsApp share and WhatsApp chat buttons?
Share lets visitors share your page to their contacts. Chat lets visitors message YOU directly.
Does the WhatsApp button need the Business API?
Plain wa.me buttons work with any WhatsApp number (personal or business). For chat routing, shared inbox, and chatbot replies you need the Business API.
How do I track clicks on a WhatsApp button?
Wrap the link in your analytics event tracking (Google Analytics, Mixpanel, PostHog) — fire an event on click before the wa.me link opens.
Ready to put this into practice?
LandinChat is the official Meta Tech Partner powering WhatsApp marketing for 500+ businesses worldwide. Broadcasts, chatbot, shared inbox, integrations — one flat plan.
See pricing