How to add WhatsApp chat to your website
A WhatsApp chat button lets visitors open a pre-filled WhatsApp conversation with one tap — by far the highest-converting contact method for mobile traffic in India, LATAM and MENA. There are three ways to add it: a wa.me link, an HTML floating button, or a WhatsApp widget plugin.
This guide covers all three with copy-paste code for WordPress, Shopify, and plain HTML, plus how to pre-fill a message so you can attribute the lead source.
- 1
Build a wa.me link
The base URL is https://wa.me/<countrycode><number> with no plus, dashes or spaces. Example: https://wa.me/919999999999. Add a pre-filled message with ?text=Hi%20I%27m%20interested. Spaces are URL-encoded as %20.
- 2
Add a simple button (plain HTML)
<a href="https://wa.me/919999999999?text=Hi" target="_blank" rel="noopener">Chat on WhatsApp</a>. Style it with CSS. For a floating button, position it fixed bottom-right with z-index 9999.
- 3
Add it to WordPress
Use a plugin like 'Click to Chat' (free) — paste your number and pick floating-bubble or shortcode placement. Or paste the HTML in a Custom HTML widget.
- 4
Add it to Shopify
Theme > Edit code > theme.liquid. Paste the floating button HTML just before </body>. Or use a free Shopify app like 'WhatsApp Chat by Pushdaddy'.
- 5
Track clicks
Wrap the link in a GA4 event: onclick="gtag('event','wa_click',{location:'header'})". Or use UTM-like params inside the pre-filled text: ?text=Hi%20[home-hero]. The text shows in the inbox so you know the lead source.
Pro tips
- → Add the button above the fold on mobile — most WhatsApp traffic is mobile.
- → Use a Click-to-WhatsApp Ad if you want measurable, scalable lead-gen.
- → Use the official WhatsApp Business API if you need multiple agents to reply.
Frequently asked questions
Do I need WhatsApp Business API for a website button?
No — wa.me works with any WhatsApp number, including the free Business app.
Why isn't my pre-filled message showing?
URL-encode spaces as %20 and special characters; many builders strip them otherwise.
Can I add a green-tick badge?
Only if your number has the green tick from WhatsApp. Otherwise use 'Chat on WhatsApp' text.
Read next
Apply it in your industry
Official references
Skip the setup. Use LandinChat.
Official Meta Tech Partner powering WhatsApp marketing for 500+ businesses worldwide. Broadcasts, chatbot, shared inbox, integrations — one flat plan.
See pricing