A WhatsApp Button on Your Business Website, Without Getting in the Way

Many buyers in Indonesia would rather chat than fill in a form. It makes sense that you want a WhatsApp button on your website. The trouble is that a carelessly added button often gets in the way: it covers other buttons on mobile, opens the wrong number, or makes the website feel slow.

This article covers how to add a WhatsApp button that helps buyers reach you, without spoiling their experience of reading your website.

A WhatsApp button complements a form, it doesn't replace it

Chat suits quick questions: stock, sizes, delivery costs, or simply checking that you are still in business. But not every B2B buyer wants to chat. Procurement teams at larger companies often need a channel that leaves a record, such as email or a quote request form that can be forwarded to a manager.

So offer both. The WhatsApp button for those who want speed, the form and email for those who need a formal channel. Buyers choose for themselves.

Build the link correctly

A WhatsApp button on a website is essentially a "click to chat" link. According to the WhatsApp Help Center, the format is https://wa.me/ followed by the full phone number in international format, without leading zeros, brackets or dashes.

For an Indonesian number, that means the leading 0 is replaced by the country code 62. The number 0812-xxxx-xxxx becomes https://wa.me/62812xxxxxxxx. Don't use a plus sign.

WhatsApp also supports a pre-filled message through the ?text= parameter. Use it so your team knows the context straight away. For example, the button on a particular product page can pre-fill "Hello, I'd like to ask about [product name]". The buyer can still edit the message before sending it.

A few more points:

• Use a business number, not an employee's personal number. If that employee leaves, your buyers leave with them.
• Consider separate numbers per department. If sales and after-sales service are handled by different teams, the buttons on product pages and service pages can go to their own numbers, so chats don't pile up on one person.
• Test the link yourself on a phone and on a computer whenever the number changes.

Position and size: don't cover the content

A floating button in the bottom right corner is common and easy to recognise. But on a phone screen it often covers something important: a form's "send" button, a bottom menu or the cookie banner.

• Keep it small. A round icon that is easy to tap is enough. The WCAG 2.2 accessibility guidelines set a minimum touch target of 24 by 24 CSS pixels at level AA. In practice many buttons are made larger than that so they are comfortable for fingers.
• Leave space from the edge and from other elements. Check every page on a phone, especially pages with forms.
• Don't open a chat window automatically. Google describes elements that block the user's view of the page content as intrusive interstitials, and recommends small banners instead. A chat pop-up that opens by itself a few seconds after the page loads is exactly this kind of interruption.
• Give it a clear label. On desktop, a short text such as "Chat on WhatsApp" beside the icon helps people who are less familiar with it.

Avoid heavy widgets

There are two ways to add a WhatsApp button. The first is a plain link with an icon: light, and it loads nothing from anyone else. The second is a third-party chat widget that shows a window, an agent photo and animations.

Third-party widgets load extra scripts. Google's web.dev guidance notes that third-party scripts can slow down your site. To simply open WhatsApp, a plain link is enough. If you do need a widget, measure your website's speed before and after adding it. Also check whether the widget adds a second icon that stacks on top of other buttons on a phone screen.

Get the WhatsApp side ready

A good button is pointless if nobody answers the chat. Before you add the button, make sure that:

• Someone is responsible for replying, including a stand-in during leave.
• Your working hours are written near the button or on the contact page, so buyers know when to expect a reply.
• You use WhatsApp Business features. The WhatsApp Business app has an automatic greeting for customers messaging you for the first time, an away message, and quick replies for frequently asked questions. You can store up to 50 quick replies.

Don't promise "reply within 5 minutes" if your team may not manage it. Honest working hours are more credible than a promise that is often missed.

Measure whether the button is used

If your website uses Google Analytics 4 with enhanced measurement turned on, clicks on links that lead away from your domain are recorded as a click event. Because the WhatsApp link goes to wa.me, clicks on this button are recorded too. From there you can see which pages generate the most chats.

Another simple method: vary the pre-filled message per page. Your sales team immediately knows whether the chat came from a product page, the contact page or an article.

Checklist before the button goes live

1. The number is in international format, starting with 62, with no plus sign, dashes or spaces.
2. The pre-filled message matches the page the button sits on.
3. The button doesn't cover forms, menus or other buttons on mobile.
4. No chat window opens by itself.
5. The website is still fast after the button is added.
6. Someone answers, and the working hours are written down.
7. The form and email are still available for buyers who need a formal channel.

A good WhatsApp button is barely noticeable until a buyer needs it. Once clicked, the chat goes straight to the right person with clear context.

If your website feels heavy after adding various widgets, read why company websites are slow. To weigh up the role of chat and social media, see website or social media for a B2B business. Want a website with tidy contact buttons on every device? See our website services.