How to add a WhatsApp chat button to your website

Before you start

• Your WhatsApp number in international format
• Access to edit your site

The steps

1. 1

   Build the click-to-chat link

   The format is wa.me/<number in international format, digits only>. Add ?text= with a URL-encoded message to pre-fill what the visitor sends.

2. 2

   Pre-fill a useful first message

   Something that tells you where they came from — "Hi, I'm asking about the Linen Co-ord Set". It costs the visitor nothing and saves your team the first two exchanges.

3. 3

   Generate the button markup

   Use our free generator to produce a floating button you can paste in, or write your own anchor. No script tag is required for a plain link.

4. 4

   Paste it before the closing body tag

   Any site builder with an HTML or custom-code field will take it. Put it on the pages where people hesitate — pricing, product, contact.

5. 5

   Decide where the conversation lands

   On a personal phone it reaches one person. On a shared inbox the whole team sees it, and it survives that person leaving. This is the decision that actually matters.

6. 6

   Test it on a phone and a desktop

   Desktop opens WhatsApp Web, mobile opens the app. Check the pre-filled text renders correctly in both, particularly if it has punctuation in it.

Where this usually goes wrong

• Using a local number format

  wa.me needs the full international number with no plus, spaces or dashes.

• Forgetting to URL-encode the pre-filled text

  Spaces and punctuation break the link silently. The generator handles this.

• Pointing it at a number nobody watches out of hours

  A button that produces an unanswered message is worse than no button.