Dev.to WebDev 🛠 Dev Fri, 13 Nov 2026 07:49:23 +0000 👁 0 📖 7 min read

WhatsApp Click-to-Chat Links: The Number Format, the Encoding, and What You Cannot Measure

This article is based on the WABB guide How to Add a WhatsApp Chat Button to Your Website. The link rules below were re-checked on 13 November 2026 against WhatsApp's Help Center page "How to use click to chat" and Meta'

This article is based on the WABB guide How to Add a WhatsApp Chat Button to Your Website. The link rules below were re-checked on 13 November 2026 against WhatsApp's Help Center page "How to use click to chat" and Meta's developer page QR codes and short links (updated 21 May 2026).

A WhatsApp chat button looks like a design task, but it is a link with two parts that fail quietly: a phone number and a pre-filled message. Get the number wrong and WhatsApp says the number is not on WhatsApp. Skip the encoding and the message arrives cut off. This post goes through the link, a helper that builds it, a floating button, and the one thing you cannot get from WhatsApp: a click count.

The short version

A click-to-chat link is https://wa.me/<number>. The number is a full phone number in international format, with no zeros, brackets or dashes in front of it.
A pre-filled message goes after ?text= and must be URL-encoded.
https://wa.me/?text=<message> works without a number: the visitor is shown a list of contacts to send the message to.
The link opens a chat on a phone and on WhatsApp Web. The chat itself never opens inside your page.
WhatsApp does not report clicks on your link. Count them on your own page.
Meta says scans of its QR codes and short links are not tracked either.

Anatomy of the link

Figure 1. The two parts that break: the number and the encoded text.

WhatsApp's page gives the number rule by example. Use https://wa.me/1XXXXXXXXXX, and do not use https://wa.me/+001-(XXX)XXXXXXX. For an Indian mobile number that means the country code 91 followed by the ten digits, with nothing else. The pre-filled message form is https://wa.me/whatsappphonenumber?text=urlencodedtext, and the text appears in the message box of the chat. The visitor can still edit it, so keep it short and useful.

Source: WhatsApp Help Center, "How to use click to chat", checked 13 November 2026.

The characters that need encoding

Figure 2. The characters that most often break a pre-filled message.

Our guide lists the five that bite most often: a space is %20, a comma %2C, a new line %0A, an & is %26, and a # is %23. In a URL, & and # carry a meaning of their own, so write them as codes inside the text. WhatsApp's own example leaves an apostrophe as it is (I'm%20interested‚Ä¶), so you do not need to encode every symbol, only the ones that carry meaning in a URL.

A helper that builds the link

This is our own helper, not a WhatsApp tool. It strips everything but digits, drops leading zeros, refuses numbers that cannot be international, and encodes the text. We ran it in Node on two inputs. A number written as +91 98765-43210 came out as 919876543210, and a text with #, & and a line break came out with %23, %26 and %0A. An empty number threw the error.

function waLink(number, text = "") {
  const digits = String(number).replace(/\D/g, "").replace(/^0+/, "");
  if (digits.length < 8 || digits.length > 15) {
    throw new Error("expected a full international number, got: " + number);
  }
  const query = text ? "?text=" + encodeURIComponent(text) : "";
  return "https://wa.me/" + digits + query;
}

waLink("+91 98765-43210", "Hi, I'd like a quote for a 2 BHK interior.");
// https://wa.me/919876543210?text=Hi%2C%20I'd%20like%20a%20quote%20for%20a%202%20BHK%20interior.

The length check (8 to 15 digits) is our own guard, not a rule from WhatsApp's page. It catches a missing country code in most cases, but not all, so test the link on a real phone before you ship it.

Four ways to put it on a page

Figure 3. All four rest on the same link; they differ in how visible they are and how much you manage.

All four methods end in the same click-to-chat link, so everything above applies to each. Our guide's advice on order: start with a plain link on the contact page, add a floating button once you see it is used, and move to a widget when you want a greeting and one place to manage the text.

The floating button is a fixed-position link with a few lines of CSS. Put it in a site-wide template, such as the footer, so that it appears on every page:

<a class="wa-float"
   href="https://wa.me/919876543210?text=Hi%2C%20is%20this%20in%20stock%3F"
   target="_blank" rel="noopener"
   aria-label="Chat with us on WhatsApp">Chat</a>

<style>
  .wa-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff; font: 600 13px/1 sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  }
  @media (max-width: 480px) { .wa-float { right: 16px; bottom: 16px; } }
</style>

Two things from the guide are worth repeating. A bottom-right button can sit on top of a cookie banner or a back-to-top arrow, so move one of them. And pre-fill a message per page: a text that names the product or service means your team knows the context before replying. The guide's example for a product page is "Hi, is the cotton kurta set (blue, M) in stock?".

Counting clicks, because WhatsApp will not

WhatsApp does not tell you who clicked a link, so measure it on your own page. This listener sends one event per click on any wa.me link. Replace track with whatever your analytics tool uses:

document.querySelectorAll('a[href^="https://wa.me/"]').forEach((el) => {
  el.addEventListener("click", () => {
    track("whatsapp_click", { link_url: el.href, page_path: location.pathname });
  });
});

Meta's developer page is explicit about the alternatives: scans of QR codes and short links are not tracked, and it gives user privacy as the reason. That is a reason to prefer a wa.me link plus your own event on a website. Short links and QR codes still have their place on print and social. They hide the number and let you edit the pre-filled text later, and our guide to QR codes and short links covers them.

To see which page produced a conversation, put the page in the pre-filled text, for example "Hi, I'm interested in the pricing plans (from the Pricing page)". WhatsApp's page describes only the text parameter, so we do not rely on any other query parameter surviving the click.

Source: Meta for Developers, "QR codes and short links", updated 21 May 2026, checked 13 November 2026.

When the button does not work

The guide's troubleshooting list reduces to four checks:

"The number isn't on WhatsApp." The number has a +, spaces, dashes or a leading zero. Digits only, with the country code.
The message is cut off or garbled. Encode the spaces, line breaks, & and #.
The button does not appear. The snippet is missing from some templates, the page is cached, or a consent or ad blocker stops the script. Check the site-wide footer and test in a private window.
Nothing happens on a computer. The browser blocked the pop-up, or WhatsApp Desktop is not installed. Allow the prompt, or continue on WhatsApp Web.

What a button does not do

The button starts a conversation and nothing else. What happens after the first message is a separate problem: replying at night, asking the same first questions, sending the chat to the right person. A greeting or away message covers the first minutes. On the WhatsApp Business Platform, where partners such as WABB provide the inbox, flows and an AI Agent can answer first; our guide to building a WhatsApp AI Agent walks through it. If you would rather not write the snippet at all, WABB has a free chat button generator and a link generator.

Checklist before you ship

The number is digits only, with the country code.
The pre-filled text is encoded and short.
The link is tested on a real phone and on a computer.
The button does not cover a cookie banner on a small screen.
A click event is on the page.