A WhatsApp Button for Your Website, and Where It Should Go
A WhatsApp button is an ordinary wa.me link with your number and a first message. Where it should go on the page, what the message should say, and the WhatsApp settings behind it.
Mike Lopez
Designs and builds websites and B2B software
On this page
A WhatsApp button for your website is an ordinary link to https://wa.me/ followed by your number in international format, with an optional message that WhatsApp fills in for the visitor, and I think it works best inside the buttons where people already make their decision, with that message naming the page which they came from. At the end of September I changed every call to action on two offer pages for a skin clinic to open WhatsApp, at the clinic’s request, and each offer button now opens a chat with a first line that names the offer, while the site’s booking tab, the contact link in the footer and the directions to the clinic stayed for people who would rather not use WhatsApp.
This post goes through how the link works, where the button should go, and the few settings on the WhatsApp side which make the chat useful when it arrives.
How a WhatsApp link works
WhatsApp calls the feature click to chat, and its help page gives the format as https://wa.me/ plus the full phone number in international format, leaving out any zeros, brackets and dashes, and its examples leave out the plus sign as well. So a UK mobile number written as 07XXX XXXXXX becomes https://wa.me/447XXXXXXXXX, with the country code 44 in place of the first zero.
To fill in the first message, you add ?text= and the message with its spaces and punctuation encoded for a web address, so “Hi, I’d like to claim the October offer” becomes https://wa.me/447XXXXXXXXX?text=Hi%2C%20I'd%20like%20to%20claim%20the%20October%20offer. The visitor still sees the message before it is sent and can change it, so it’s a starting point and not a form.
Two details are worth knowing before you add the link. A link with a message but no number shows the visitor a list of their own contacts to send it to, so the number has to be there, and WhatsApp says that click to chat works on the phone and on WhatsApp Web, so a visitor on a laptop is offered WhatsApp’s own page first, from which they continue to the app or to the web version.
Where the button should go
I would put WhatsApp into the buttons which the page already has, at the points where a visitor decides, such as the offer box beside the price, the treatment or service section and the call to action at the end of the page, rather than adding one more element on top. A floating WhatsApp bubble in the corner is common, but on a phone it sits over the bottom of the content, in the same corner as the page’s own buttons and the cookie banner, so I would only add one when the page has no buttons of its own in view.
On the clinic’s pages the plan was first two options, the contact page or WhatsApp, and the same evening the clinic asked for every call to action to go to WhatsApp. So the hero button became Book on WhatsApp, the section buttons followed, and the buttons for questions kept their labels with a general WhatsApp link, while the site-wide booking tab, the footer’s Contact link and the map’s directions stayed, because a page whose only route is one app leaves out everyone who does not use it.
Say WhatsApp on the button
A visitor who taps a button labelled Book now expects a booking form, and an app switch which they did not ask for feels like a mistake, so the label should name WhatsApp, such as Book on WhatsApp or Chat on WhatsApp. Meta’s WhatsApp brand guidelines ask for the name written with a capital W and a capital A, the logo left as it is, and the word used in a sentence rather than the logo standing in for it.
Name the page in the message
The prefilled message is the part which I think owners mostly skip, and it’s really the part which makes the chat useful, because a message which reads “Hi” tells the team nothing, while “Hi, I’d like to claim the October offer” tells them which page the person came from and what they want before anyone replies. On the clinic’s pages each offer has its own message which names the offer, and the other buttons share one general message for the page, so the person who answers the chats can tell the offers apart at a glance.
It also showed a question which the site had not answered, since one of its other pages used a second WhatsApp number, and each number should belong to a team who knows which pages send people to it. I would write down every page with a WhatsApp button, the number it uses and its message, before the button goes live.
| Where on the page | Button label | Prefilled message |
|---|---|---|
| Offer box beside the price | Claim your offer | Names the offer, such as the October offer |
| Hero of a service page | Book on WhatsApp | Names the service |
| A section with questions | Ask us a question | A general line which names the page |
| Footer and booking tab | Contact, Book online | None, these keep the other routes open |
Set up the WhatsApp side
The button only does half the job, so I would set up the WhatsApp Business app before the link goes live. These are the settings which matter for a website.
- Business hours. Selected hours, Always open or By appointment, set in the business profile, which WhatsApp’s business hours page says cuts down the questions about when you are open.
- Away message. An away message can go out only outside business hours once the hours are set, so a visitor who writes at night knows when to expect an answer.
- Greeting message. A greeting message goes to new customers and to customers who write again after 14 days without a message.
- Quick replies. Saved answers for the questions which come in every day, up to 50 of them, as the quick replies page lists.
- Short link and QR code. The app creates a short link for your business with a default message, and a QR code for printed material, though on a website I prefer the wa.me link, since each button can carry its own message.
The button itself
WhatsApp offers an official Chat on WhatsApp button in green or white on its click to chat page, with the instruction to use it as it is, but I would mostly use the site’s own button style with WhatsApp in the label, so the page keeps one button design, as I describe in my post on website button hierarchy. If the button is only an icon, it needs a name for screen readers, such as an aria-label reading Chat on WhatsApp, which WCAG’s Link Purpose criterion asks for, and it should be at least 24 by 24 CSS pixels to meet the minimum target size. Before anything goes live, I check every page on a phone at 375 pixels wide and tap each button once, to see that the right number and the right message open.
Where to start
I would list the pages where people decide to contact you, write one prefilled message for each which names the page or the offer, build each link as wa.me plus your number without the plus sign, zeros or dashes, and change the label of the existing button to say WhatsApp. Then set your business hours and an away message in the WhatsApp Business app, keep a contact page or a phone number for people without WhatsApp, and if the page is a new one for an offer, my notes on writing the copy before the design help with what goes around the button.
Frequently asked questions
How do I add a WhatsApp button to my website?
Link any button on your site to https://wa.me/ followed by your full number in international format, without the plus sign, zeros, brackets or dashes, and add ?text= with an encoded message if you want the chat to start with one.
Do I need WhatsApp Business for a website button?
The link works with any WhatsApp number, but the Business app adds business hours, away and greeting messages and quick replies, which I would want for any number that receives enquiries from a website.
Does a WhatsApp button work on desktop?
Yes, WhatsApp says click to chat works on the phone and on WhatsApp Web, so a visitor on a laptop continues to the desktop app or to WhatsApp Web, which they link to their phone by scanning a QR code.
Can I add a WhatsApp button in WordPress without a plugin?
Yes, a Button block with a wa.me link is enough, since the button is an ordinary link, and a plugin mostly adds a floating bubble which I would only use on pages without buttons of their own.
Should the WhatsApp number include the plus sign?
No, WhatsApp’s own examples leave out the plus sign along with any zeros, brackets and dashes, so the number starts with the country code, such as 44 for the UK or 1 for the US.
