Someone is standing outside a shop, or sitting in a car after a missed appointment, with your website open on their phone. They have read enough. They want to talk to you now, and the only way in is a phone number buried in the footer, which they have to copy, switch apps and paste. Some of them do it. Some go back to the search results and tap the next business.
Call and WhatsApp buttons exist to remove that friction. But a button only helps if it sits where the decision happens, says something useful when tapped, and does not get in the way of the page. This post is about getting those details right, page by page.
Decide what each page is for first
Someone on a service page is weighing you up. Someone on the contact page has already decided. Someone on a product page has a specific question. The right button, and how loud it should be, differs for each. If you have not yet settled which channels to offer at all, our post on website chat vs WhatsApp vs phone covers that choice. What follows assumes you have picked phone, WhatsApp or both, and can answer them.
Service pages: put the button after the reason to use it
A button at the very top of a service page, before the visitor knows what you offer, mostly gets ignored. The moment people are ready to act is usually just after they have read what is included, how the job works, or what it roughly costs. Place a call or WhatsApp button there, in the body of the page, with a short line that explains what will happen.
- “Call to book a visit. We pick up 9am to 7pm, Monday to Saturday.”
- “Send a photo of the problem on WhatsApp and we will tell you if it is something we fix.”
A second button at the end of the page catches people who read everything. Two on a long page is plenty.
Make the label describe the action: “Call [Name] Plumbing” or “Ask about this service on WhatsApp”. A bare green icon relies on everyone recognising it.
Mobile header and bottom bar
On phones, a small call icon in the header is the most expected place to look. Many visitors scroll down a long page, though, and a header that scrolls away takes the button with it. Two common fixes are a sticky header that stays visible, or a slim bar fixed to the bottom of the screen with one or two clearly labelled options.
If you use a bottom bar, check these things:
- It must not hide anything. Add enough space at the bottom of the page so the last paragraph, the footer links and any “Add to cart” or “Submit” button are never trapped underneath it.
- It should not fight with other fixed elements. Cookie notices, chat widgets and “back to top” arrows often sit in the same strip. Decide which one wins, and move or remove the others.
- Keep it slim. One line of height is usually enough.
- Consider hiding it on desktop. A computer cannot place a phone call by itself in most setups. On larger screens, show the number as text people can read and dial, and leave the bar for mobile.
The contact page
On the contact page the visitor has already chosen to get in touch, so this is where every option should be plain and complete. Show the phone number as a tappable link and as readable text, because some people want to save it or dial from a landline. Put the WhatsApp option next to it, with the hours you actually reply. If someone tapping WhatsApp at midnight will not hear back until the morning, say so on the page rather than letting them wonder.
Product pages in an online shop
For a shop, the question on a product page is often specific: does it come in another size, can it be delivered by Friday, is this the right part for my model. A small “Ask about this product” WhatsApp link near the price or the size options answers that need without pulling attention away from “Add to cart”.
Keep it visually quieter than the buy button. The aim is to rescue people with an unanswered question, not to move every sale onto WhatsApp, where you lose the cart and the order record.
Pre-filled messages that tell you where people came from
A WhatsApp click-to-chat link can carry a ready-written message. The visitor still sees it and can edit it before sending, but most leave it as it is. Use that to save both sides a step.
- Include the page or product name: “Hi, I have a question about the 3-seater sofa in grey.”
- Add a gentle prompt for what you need: “My area is ___ and the job is ___.”
Use a different message for each service or product page. When a chat arrives, you know straight away what the person was looking at, and you can reply with the right detail instead of asking “how can I help?” The link itself must use your number in full international format, without the plus sign, spaces or a leading zero, or it will not open the right chat.
Be honest about opening hours
A big “Call now” button at eleven at night invites a call that rings out. That leaves a worse impression than no button. You have a few options:
- Write your hours right next to the button, every time it appears.
- Some button plugins can show or hide a button by time of day. If you use that, test it against your own time zone and the time zones of your visitors, since a site serving customers abroad may show the wrong state.
- Outside hours, let WhatsApp take over. A message can wait until morning far more comfortably than an unanswered call. Set up an away message in the WhatsApp Business app that says when you will reply.
If calls go to voicemail after hours, say when you will call back. Then do it.
Accessibility and not covering content
Floating buttons cause more accessibility problems than people expect. A few checks make most of the difference:
- Give every button a text label, or at least an accessible name, so screen reader users hear “Call [Name] Plumbing” rather than an unlabelled link.
- Make tap targets large enough to hit with a thumb, with space between the call and WhatsApp buttons so people do not press the wrong one.
- Check colour contrast. White text on a pale green button can be hard to read outdoors.
- Do not animate or bounce the button. It distracts readers and can bother people sensitive to motion.
Our website accessibility checklist has a wider list if you want to review the rest of the site at the same time.
Test on real phones, not just a desktop preview
A browser’s mobile preview shows layout. It does not place calls or open WhatsApp. Borrow a couple of real phones, ideally one Android and one iPhone, and go through each page:
- Tap the call button. Does it open the dialler with the right number, including the country code?
- Tap the WhatsApp button. Does it open the right chat with the pre-filled message intact? Try it on a phone that does not have WhatsApp installed and see what happens.
- Scroll to the bottom of a long page. Is anything hidden behind the bar?
- Open the cookie notice and any chat widget. Do they overlap the buttons?
Repeat this after theme or plugin changes, because floating elements often break first. If you want to know which buttons people actually tap, you can record those clicks in Google Analytics, as described in our GA4 conversion tracking guide.
Buttons are only the last step
A well-placed button makes it easy to reach you, but it is the final piece of a longer path: being found, being trusted, then being contacted. Our guide to getting local customers online walks through the earlier steps.
If you would rather have the buttons set up and tested for you, we add a WhatsApp chat button from ₹999 onwards, along with other small fixes listed on our website services page. We can also tell you honestly if your site needs one at all.
Next in this series: A Contact Page That Makes People Get in Touch
