WhatsApp Chat Button Widget

Place a 'Chat on WhatsApp' button inside your content - under a product, beside a booking form, at the end of an FAQ - so the conversation starts with context: your number is filled in and so is the first message, for example 'Hi! I'm interested in the oak dining table'.

Website Essentials Website component No trackers, no cookies Free · no ads

Customize your widget

Chat
International format with the country code.
Style
Light or dark
Match page reads the background behind the component.

Live preview

Exactly what your visitors will see

Embed code

Fill in the required fields above - until then this code shows nothing on your site.

<div data-a2z-kit="whatsapp-chat-button"></div>
<script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>

One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.

Works with

How it works

Unlike the floating version, this button sits in the flow of the page, so you can give each product or service its own prefilled message. It follows WhatsApp's click-to-chat format: wa.me, then your number in full international form with digits only, then ?text= and the message. The number is cleaned (spaces, brackets, dashes removed; a leading + or 00 dropped) and must start with a country code, 7 to 15 digits long - 07700 900123 is refused, +44 7700 900123 becomes 447700900123. The message keeps its line breaks and is percent-encoded including the characters encodeURIComponent leaves alone (! ' ( ) *), so a message such as "Is the 10% discount still on? (order #42)" arrives exactly as written. An hours note can sit under the button, such as 'Replies 8am-8pm, 7 days'. The button is WhatsApp green by default, with dark text where white would fail the contrast check; it can also take your accent colour, an outline or a soft tint.

Method

  • number: strip spaces ( ) . -, drop + or 00, require ^[1-9][0-9]{6,14}$
  • href: https://wa.me/<number>?text=<encodeURIComponent(message) with ! ' ( ) * also encoded>; line breaks -> %0A
  • opens in a new tab or the WhatsApp app (target=_blank, rel=noopener)

Worked examples

A product enquiry

Inputs: whatsapp +1 555 010 0123; message Hello! Can I book for Friday?

Result: https://wa.me/15550100123?text=Hello%21%20Can%20I%20book%20for%20Friday%3F

The plus sign and spaces are removed from the number; ! and ? are encoded.

A message with symbols and a line break

Inputs: whatsapp +44 20 7946 0123; message Is the 10% offer on?\n(order #42)

Result: https://wa.me/442079460123?text=Is%20the%2010%25%20offer%20on%3F%0A%28order%20%2342%29

% becomes %25, # becomes %23, the line break %0A and the brackets %28 %29, so nothing is cut off at the #.

Limitations

  • The visitor must have WhatsApp (app, desktop or WhatsApp Web).
  • It cannot confirm that the number uses WhatsApp; test the link after publishing.
  • The message is fixed per button - it does not change with the page automatically.

Where publishers use it

  • A furniture shop adding a button under each product with that product's name already in the message
  • A tour operator letting travellers ask about availability with the tour date field in the first message
  • A bakery taking custom cake enquiries next to its gallery
  • A recruiter's job advert inviting candidates to send a quick WhatsApp instead of filling in a long form

Questions

Can each button on a page have a different message?

Yes - that is what this widget is for. Add one button per product or section with its own message; they all go to the same or different numbers as you choose.

Can the message contain line breaks and emoji?

Yes. Line breaks are sent as %0A and emoji or non-Latin text are UTF-8 percent-encoded; WhatsApp shows them as written. Messages are limited to 1,000 characters to keep links a sensible length.

Is this an official WhatsApp button?

It uses WhatsApp's documented click-to-chat link and the WhatsApp mark to say where the button leads, but it is not made or endorsed by WhatsApp. No WhatsApp script or SDK is involved.

Does it work for WhatsApp Business numbers?

Yes. Click-to-chat works the same for personal and WhatsApp Business numbers. Make sure the number is the one registered on WhatsApp, including the country code.

Sources

  1. How to use click to chat - WhatsApp Help Center . https://wa.me/<number>?text=<urlencodedtext>

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools WhatsApp Chat Button
https://a2z.tools/embed/whatsapp-chat-button

Related widgets

More Website Essentials widgets →

  • Floating WhatsApp Button

    Website Essentials Website component New

    A green WhatsApp bubble in the corner that opens a chat with your number and a ready-written first message.

    Get code

  • Telegram Chat Button

    Website Essentials Website component New

    A 'Message us on Telegram' button that opens a private chat with your public Telegram username.

    Get code

  • Contact Buttons

    Business & Contact Tool New

    Large Call, Text, Email, WhatsApp and custom-link tap targets in a stack, row or pill bar.

    Get code

  • Business Card Widget

    Business & Contact Tool New

    A digital business card with call, email, website and directions buttons plus a .vcf contact download.

    Get code

  • Floating Contact Button

    Website Essentials Website component New

    A round corner button that unfolds into labelled Call, WhatsApp, Email, Directions and booking actions.

    Get code

  • Back to Top Button

    Website Essentials Website component New

    A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.

    Get code

Preview

CustomizeGet code
A2Z EMBEDS FOR YOUR WEBSITE