How to add a WhatsApp button to your website: the link, the floating button, and when a chat widget is the better choice

Most small business websites exist to start a WhatsApp conversation. The button that does it should be visible on every page, work on desktop and mobile, tell you where the chat came from, and not be the only way to reach you. Here are the three options, from simplest to most capable, with the code.

By Ritchie, ReplyKit · Published 5 September 2026 · 6 min read

Quick answer

The simplest option is a click-to-chat link (https://wa.me/60123456789?text=Hi) on a button or in the footer. The most common is a floating WhatsApp button fixed to the bottom corner on every page, built with a few lines of HTML and CSS around the same link. The most capable is a chat widget on the site that answers questions itself, with a WhatsApp handoff for people who prefer it. Pre-fill the message so you know the page the customer came from, and test on a phone.

Option 1: the link Option 2: the floating button Option 3: a chat widget that answers Mistakes that lose leads Tracking FAQ

Option 1: the link

WhatsApp's click-to-chat format is a URL: https://wa.me/60123456789?text=Hi%2C%20I%20have%20a%20question. The number is in international format with no plus sign, spaces or dashes; the text is URL-encoded. Put it on any button, in the footer, in the contact page. WhatsApp's documentation is in the Help Center. Generating the link and a matching QR code is covered in WhatsApp links and QR codes.

Option 2: the floating button

<a href="https://wa.me/60123456789?text=Hi%2C%20I%20found%20you%20on%20your%20website"
   target="_blank" rel="noopener" aria-label="Chat on WhatsApp"
   style="position:fixed;right:20px;bottom:20px;z-index:999;background:#25D366;color:#fff;
          padding:12px 16px;border-radius:999px;font:600 15px system-ui;text-decoration:none;
          box-shadow:0 6px 20px rgba(0,0,0,.2)">WhatsApp us</a>

Paste it before the closing body tag on every page, or in the site template. On Shopify, WordPress, Wix and Squarespace there are also plugins and app blocks that do the same thing; the hand-written version is lighter and does not phone home. Keep it clear of your cookie bar and any other floating element.

A button sends every visitor to WhatsApp, which is right for people ready to talk and wrong for the visitor who just wants to know your price before deciding. A chat widget on the site answers that question immediately from your knowledge, books the appointment, and offers WhatsApp for people who prefer to continue there. ReplyKit's widget is one script tag and shares the website assistant's knowledge base, separate from your WhatsApp agent's. The comparison is in live chat vs an AI chat widget, and the setup in the widget guide. Many sites run the widget and a WhatsApp link in the widget's footer.

Mistakes that lose leads

No pre-filled message, so the customer opens WhatsApp and stares at an empty box.
A personal number on the site, which cannot be handed to staff later.
The button hidden behind a cookie bar on mobile.
A button that opens WhatsApp Web on a desktop where the visitor is not logged in; offer a phone number and email as well.
Nobody answering. A visible button raises expectations; see the cost of a missed message.

Tracking

Fire an analytics event on the button click and use a different pre-filled message per page or campaign. Then you can count conversations by source, which is covered in tracking WhatsApp conversions.

Frequently asked questions

How do I add a WhatsApp button to my website?

Use a click-to-chat link (wa.me plus your number) on a fixed-position anchor styled as a button, on every page. The snippet above does it.

What is the WhatsApp link format?

https://wa.me/ followed by the number in international format with no plus or spaces, optionally ?text= with a URL-encoded message.

Should I use a floating button or a chat widget?

A button for visitors ready to talk; a widget if you want questions answered on the site first, with WhatsApp as an option.

Does the button work on desktop?

It opens WhatsApp Web or the desktop app. Offer a phone number and email too.

Can I track clicks on the WhatsApp button?

Yes, with an analytics event on click and a page-specific pre-filled message.

Answer on the site, continue on WhatsApp

A chat widget that replies from your knowledge, plus the WhatsApp link. 7-day free trial.

Start free

Written by Ritchie, ReplyKitPart of the small team in Malaysia that builds and runs ReplyKit. Writes about WhatsApp automation, AI customer service and small business lead response.

How we know this. ReplyKit customers use all three approaches, often together; the snippets below are the ones we hand out, and the placement notes come from what we see convert on their sites. Product figures in this article (limits, prices, per-reply costs) are taken from ReplyKit as it runs today and are re-checked when we update the page. Where we cite outside research, the source is linked below. We sell ReplyKit, so read our product claims with that in mind; we say where a different tool or no tool is the better choice. About ReplyKit.

Sources and further reading

WhatsApp Help Center, About click to chat
Harvard Business Review, The Short Life of Online Sales Leads (Oldroyd, McElheran, Elkington, 2011) · firms that responded within an hour were about seven times more likely to qualify the lead

ReplyKit is an independent product and is not affiliated with or endorsed by Meta or WhatsApp. This article is general guidance for running a small business, not legal, financial or regulatory advice.