Skip to content
itsorted.online
Websites guide

Add a WhatsApp Chat Button to Your Website (Without Slowing It)

The simplest WhatsApp button is a normal link to wa.me followed by your number. It needs no plugin, adds almost nothing to page weight, and opens WhatsApp on phones and computers. You can add a pre-filled message so you know which page the customer came from. This guide shows how to build the link, where to put the button, why many WhatsApp widget plugins slow your site, how to count clicks as key events in Google Analytics, and what to think about before putting a phone number on your site.

By IT Sorted teamReviewed 7 min readHow we write guides
in

Key takeaways

  • WhatsApp's click-to-chat link is https://wa.me/ plus your full number in international format.
  • Add ?text= with a URL-encoded message to pre-fill the chat, for example naming the page or service.
  • A plain link or small button adds almost no weight; third-party widgets can load extra scripts.
  • GA4 enhanced measurement logs outbound clicks, which you can turn into a WhatsApp key event.
  • The number becomes public, so use a business number and set an away message for off hours.
In this guide · 8 sections
  1. 01How a WhatsApp click-to-chat link works
  2. 02Add a pre-filled message (and know where leads came from)
  3. 03Light button vs heavy widget: protect your page speed
  4. 04Step by step: adding the button
  5. 05Track WhatsApp clicks as a key event in GA4
  6. 06Number privacy, hours and when to upgrade
  7. 07Do it yourself or get help?
  8. 08Frequently asked questions

Short answer

Link a button to https://wa.me/65XXXXXXXX (country code, no plus sign or spaces), optionally with ?text= and a URL-encoded message. Style it as a normal link or small fixed button instead of a heavy widget, and mark WhatsApp clicks as a key event in Google Analytics.

Add a pre-filled message (and know where leads came from)

A pre-filled message saves the customer typing and tells you what they were looking at. Spaces become %20, commas %2C and apostrophes %27. Most link builders and URL-encoding tools do this for you.

  • Service page: "Hi, I'd like a quote for aircon servicing"
  • Product page: "Hi, is the blue size M still available?"
  • Booking page: "Hi, I'd like to book an appointment"
  • Pricing page: "Hi, I have a question about your packages"

Using a different message on each page is a low-tech way to see which pages produce enquiries, even without analytics. Keep it short and let customers edit it before sending.

Light button vs heavy widget: protect your page speed

Many WhatsApp plugins load a chat-style popup, agent photos, animations and tracking scripts from a third-party server on every page. A plain link styled as a button does the same job with no extra script.

Plain wa.me link or small fixed button

  • No external script, so nothing extra to download or run
  • Works on any platform: WordPress, Shopify, Wix, custom
  • Nothing to update or break
  • Full control over wording and position

Third-party WhatsApp widget

  • Extra JavaScript and images on every page view
  • Can delay interaction and push layout around as it loads
  • Some send visitor data to the widget company
  • Plugin updates, licence and compatibility to maintain

Google measures page experience with Core Web Vitals. web.dev sets the good thresholds at Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint of 200 milliseconds or less, and Cumulative Layout Shift of 0.1 or less. Heavy chat scripts mainly hurt the last two. If your site is already slow, see our Core Web Vitals fix guide.

Step by step: adding the button

The steps below work on almost any website builder.

  1. Choose the number

    Use the business number on the WhatsApp Business app or API, not a staff member's personal phone.

  2. Build and test the link

    Write https://wa.me/65 plus the number, add ?text= and an encoded message if you want one. Open it on a phone and a computer to check it opens the right chat.

  3. Add it to your site

    Use your builder's button or link block and paste the link. On WordPress, a Button block is enough; on Shopify, add it in the theme editor or a custom liquid section.

  4. Place it where people decide

    Contact page, service and product pages, and the mobile header or a small fixed corner button. WhatsApp's own guidance lists contact pages and mobile sites as good places.

  5. Label it clearly

    "Chat on WhatsApp" plus reply hours, such as "We reply 9am to 6pm, Mon to Fri". WhatsApp offers an official Chat on WhatsApp button design you can use as is.

  6. Set up tracking

    Turn WhatsApp clicks into a key event in Google Analytics, as described below.

Track WhatsApp clicks as a key event in GA4

Google Analytics 4 records outbound link clicks automatically when enhanced measurement is on: Google's enhanced measurement help says outbound click events occur for all links leading away from your domain, and wa.me is one of them. To see WhatsApp enquiries as a number you can report on:

  1. In GA4 Admin, create a new event (for example whatsapp_click) based on the click event where the link domain equals wa.me.
  2. Mark whatsapp_click as a key event. Google renamed GA4 conversions to key events; conversions now refers to Google Ads.
  3. If you run Google Ads, import the key event as a conversion so campaigns can optimise for WhatsApp chats.

A click is not a sent message: some people open WhatsApp and change their mind. Compare clicks with the chats you actually receive each month.

Number privacy, hours and when to upgrade

A wa.me link makes the number visible to anyone, and scrapers do collect numbers from websites. Use a dedicated business number on the WhatsApp Business app, with an away message outside hours that says when you'll reply.

When the volume grows past what one phone can handle, or you want automatic replies and booking or order messages, move to the WhatsApp Business Platform. Our guides to WhatsApp chatbot options in Singapore and Shopify Inbox vs WhatsApp vs live chat cover the next steps. The link on your site stays the same: it simply opens a chat with the API number instead.

Do it yourself or get help?

Adding a wa.me button is a ten-minute job on most builders. Getting the tracking right and keeping the site fast takes a little more care.

Before you finish

Our Business Website package (S$1,490) includes WhatsApp buttons and click tracking set up properly. For automatic replies and order or booking messages, see WhatsApp Notifications (S$590).

Frequently asked questions

Use https://wa.me/ followed by your full number in international format, without a plus sign, spaces, brackets or dashes. For a Singapore number, that is 65 plus the eight digits. Add ?text= with a URL-encoded message to pre-fill the chat. Test the link on a phone before putting it on your website.

No. A WhatsApp button is just a link, so any button or text link block in WordPress, Shopify, Wix or Squarespace works. Plugins add features like popups and agent lists, but many load extra scripts on every page, which can slow your site and affect Core Web Vitals.

Yes. With enhanced measurement on, Google Analytics 4 logs outbound clicks, including clicks to wa.me. Create a custom event from those clicks, such as whatsapp_click, and mark it as a key event. A click doesn't guarantee a message was sent, so compare with the chats you receive.

Yes. On a computer, the link leads to WhatsApp Desktop or WhatsApp Web, which needs the user's phone to be linked. On phones it opens the WhatsApp app directly. Test on both before publishing, because some company computers block WhatsApp Web and a few customers may prefer email or a contact form.

It's better not to. The number becomes public, can be scraped and stays with that person if they leave. Use a dedicated business number on the WhatsApp Business app, set a greeting and away message, and move to the WhatsApp Business Platform if several staff need to answer.

Rather have it done for you?

Fixed price, set up in your own accounts.

Order online, get a written scope, and keep full ownership of everything we set up. Questions first? Ask us in writing.