DEV Community

Cover image for How to Build WhatsApp Click-to-Chat Links (wa.me) in JavaScript and Python
Sagor Ahamed
Sagor Ahamed

Posted on

How to Build WhatsApp Click-to-Chat Links (wa.me) in JavaScript and Python

#webdev #javascript #python #tutorial

A quick guide to the wa.me URL format, URL-encoding pre-filled messages, and generating links in code.

If you build landing pages, e-commerce sites, or small business tools, you'll eventually be asked: "Can we add a WhatsApp button?"

The good news is that you don't need an API for this. WhatsApp supports click-to-chat links using the wa.me format.

The URL format 

https://wa.me/<number>
https://wa.me/<number>?text=<url-encoded message>
Enter fullscreen mode Exit fullscreen mode

Rules for <number>:

  • Use the full international format: country code + number.
  • No +, no spaces, no dashes, and no leading zeros.

For example, a Bangladeshi number 01712345678 becomes:

https://wa.me/8801712345678
Enter fullscreen mode Exit fullscreen mode

(880 is the country code, and the leading 0 is dropped.)

Adding a pre-filled message

The message goes in the text query parameter and must be URL-encoded:

https://wa.me/8801712345678?text=Hi%21%20I%27d%20like%20to%20know%20more.
Enter fullscreen mode Exit fullscreen mode

JavaScript 

function waLink(phone, message = "") {
  const digits = phone.replace(/\D/g, "").replace(/^0+/, "");
  const base = `https://wa.me/${digits}`;
  return message ? `${base}?text=${encodeURIComponent(message)}` : base;
}

console.log(waLink("+880 1712-345678", "Hi! I'd like to know more."));
// https://wa.me/8801712345678?text=Hi!%20I'd%20like%20to%20know%20more.
Enter fullscreen mode Exit fullscreen mode

Note: if you pass a local number that starts with 0, you still need to prepend the country code yourself.

Python 

from urllib.parse import quote
import re

def wa_link(phone: str, message: str = "") -> str:
    digits = re.sub(r"\D", "", phone).lstrip("0")
    base = f"https://wa.me/{digits}"
    return f"{base}?text={quote(message)}" if message else base

print(wa_link("+880 1712-345678", "Hi! I'd like to know more."))
Enter fullscreen mode Exit fullscreen mode

Simple message templates

For things like order confirmations or support buttons, a placeholder pattern keeps messages consistent:

function fillTemplate(template, vars) {
  return template.replace(/\{(\w+)\}/g, (_, key) => vars[key] ?? "");
}

const msg = fillTemplate("Hello {name}, my order #{id} needs help.", {
  name: "Rafi",
  id: "10482",
});
const link = waLink("8801712345678", msg);
Enter fullscreen mode Exit fullscreen mode

Common mistakes

  1. Including + or spaces in the number. The link will fail or open the wrong chat.
  2. Forgetting to encode the message. Special characters like &, # and emoji can break the URL.
  3. Not testing on mobile and desktop. Behavior differs slightly: mobile opens the app, desktop may open WhatsApp Web or the desktop app.
  4. Very long messages. Keep them short for reliable behavior.

QR codes

You can turn any wa.me link into a QR code for printed menus, flyers, or business cards. Any QR library works, because the link is just a normal URL.

Don't want to code it?

If you just need a link or QR code without writing anything, I've been using a free generator at waurl.online. It builds wa.me links, supports pre-filled messages, and can create QR codes and short links with click stats. (Disclosure: I'm connected to this project.)

What's your approach for WhatsApp buttons on your sites? Let me know in the comments.

Top comments (0)