Adding WhatsApp Chat to a Business Website the Right Way

For a lot of the small businesses I build for, WhatsApp brings in more enquiries than the contact form. People here and in many other countries would rather send a quick message than fill in five fields and wait for an email. So most sites I build now have a WhatsApp option somewhere. The trouble is that it's often added badly: a heavy plugin, a green bubble covering the submit button on phones, or a blank chat with no context.

In this post I'll go through how I add WhatsApp chat to a business website, the small details that make it work properly, and the mistakes I fix most often on sites I'm asked to look at.

Start with the link, not a plugin

A WhatsApp button is really just a link. WhatsApp's official "click to chat" format looks like this:

https://wa.me/923001234567?text=Hi%2C%20I%20found%20you%20on%20your%20website.

There are only two parts to get right:

• The number goes in full international format, with the country code, and with no plus sign, spaces, dashes or leading zero. A Pakistani number like 0300 1234567 becomes 923001234567.
• The message after ?text= is optional and has to be URL encoded, so spaces become %20 and commas become %2C. The visitor sees it typed into the chat box and can change it before sending.

On a phone this opens the WhatsApp app straight into a chat with the business. On a laptop it opens a WhatsApp page that offers to continue in the desktop app or in WhatsApp Web. Either way, no plugin and no script is needed. On a custom PHP site I add it as a normal link in the header and on the contact page. On WordPress I do the same in the theme or an HTML block, rather than a plugin that loads extra files on every page for one button.

Prefill a message that helps the owner

A blank chat is the most common thing I see, and it's a missed chance. The owner gets "Hi" from an unknown number and has to ask what it's about. A short prefilled message fixes that:

• Say where the message came from, for example "Hi, I found you on your website."
• On a service page, name the service: "Hi, I'd like a quote for AC repair."
• On a product or package page, include the item or package name.

I keep it to one line in plain words, so it reads like something the visitor would actually type. Long prefilled paragraphs feel like a form in disguise and people delete them. It also tells the owner which page the enquiry came from.

Where to put the button

I usually put WhatsApp in three places: next to the phone number in the header or menu, as one of the options on the contact page, and at the end of each service page where someone has just finished reading and might be ready to ask.

The floating button

The round green button fixed in the corner is popular, and it can be useful on phones. But it's also the thing that most often causes problems. On small screens it sits right on top of the submit button of the contact form, the cookie notice, or the last line of text. I check a few things when I add one:

• It sits in the bottom right with enough space from the edge, and the bottom padding of the page is increased so it never covers the footer links or a form button.
• It's hidden on the contact page itself if that page already shows WhatsApp clearly, so the visitor isn't offered the same thing twice.
• It doesn't bounce, pulse or pop up a chat bubble after ten seconds. It feels pushy and distracts people while they read.
• It stays small, around 52 to 56 pixels, which is easy to tap but doesn't take over the screen.

I wrote more about overlapping buttons and cramped forms on phones in my post on mobile layout fixes.

Make the button clear and accessible

An icon on its own is clear to most people, but not to everyone, and not to screen readers. I make sure:

• The link has a proper label, either visible text like "Chat on WhatsApp" or an aria-label on the icon button.
• The colours have enough contrast, and the button has a visible focus style for people using a keyboard.
• The link opens in a new tab on desktop, so the visitor doesn't lose the page they were reading.

Set it up on the WhatsApp side too

The button is only half the job. The other half is what happens when the message arrives. Before a site goes live I go through this with the owner:

• Use the WhatsApp Business app on the business number, not a personal account. It's free and lets the owner add business hours, an address, a short description and a catalogue.
• Set a greeting and an away message. The away message is the important one. If someone writes at 11 PM, an automatic reply saying when they'll hear back is much better than silence.
• Add quick replies for the questions they get every day, like prices, location and opening hours, so answering is faster.
• Decide who answers. If the number is on one person's phone and that person is busy or away, enquiries just sit there.

I also tell owners honestly that a WhatsApp button makes people expect a fast reply. If a business can't reply within a few hours most days, the button can do more harm than a contact form, because an unanswered chat feels worse than an email that gets a reply the next morning.

Don't remove the other options

Some owners ask me to replace the contact form with WhatsApp completely. I usually advise against it. Not every visitor uses WhatsApp, some people don't want to share their number, and larger clients often prefer email so they can forward it inside their company. A form also saves the enquiry in the website's admin, so nothing is lost if a phone is changed or a chat is deleted. I keep WhatsApp, phone and the form side by side and let the visitor choose. If you're keeping the form, it's worth making sure it actually reaches the inbox, which I covered in this post on contact form emails.

Counting WhatsApp clicks

Owners often want to know how many people tapped the button. A click on a wa.me link takes the visitor off the site, so normal page tracking doesn't see what happens next. What I do is simple: I add a click event in the site's analytics for every WhatsApp link, with the page it was on. That shows which pages lead people to message.

This counts taps, not conversations, since some people tap and never send anything. The prefilled first line lets the owner count the real enquiries in WhatsApp and compare.

How I test it before launch

I don't mark the WhatsApp button as done until I've used it like a visitor would:

1. Tap every WhatsApp link on a real Android phone and an iPhone, and check it opens a chat with the right number and the right prefilled text.
2. Click it on a laptop with and without the desktop app installed.
3. Send a real test message and check the owner gets it, and that the away message replies outside business hours.
4. Scroll every page on a phone and make sure the floating button never covers a form button, a link or text.
5. Check the click events show up in analytics.

Most problems show up in the first two steps: a number with a leading zero, or a message that wasn't encoded and gets cut off halfway.

A quick check for your own site

If your site already has a WhatsApp button, open it on your phone and tap it. Does it open the right chat? Is there a helpful first line already typed? Does the button cover anything while you scroll? Then send yourself a message at night and see what reply you get. Those few minutes usually show exactly what needs fixing. If you'd like me to look at it or add WhatsApp to your site properly, you can get in touch here.