Floating WhatsApp Button Widget

Put the familiar green WhatsApp bubble in the corner of your site. Tapping it shows a small card with your business name, your greeting and a Start chat button - or, if you prefer, jumps straight into WhatsApp - with a first message already typed so the visitor only has to press send.

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

Customize your widget

Chat
International format, country code first.
Card
Blank shows your initials.
Your own words; nothing is calculated.
Button
Advanced
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="floating-whatsapp-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

WhatsApp documents one public way to open a chat from a website: a link to wa.me followed by the full international number, digits only, with an optional text parameter. This widget builds exactly that link and nothing else - no unofficial API, no business-account login. Your number is cleaned of spaces, brackets and dashes; a + or 00 prefix is removed; a number that starts with 0 is refused because WhatsApp could not tell its country. The prefilled message is percent-encoded character by character, so line breaks become %0A, an apostrophe %27 and an ampersand %26, and emoji or Arabic text survive the trip. In card mode the button first opens a compact chat-style card: a header in WhatsApp green with your logo (https only) or your initials, your business name and your own 'typically replies' sentence, then your greeting shown as a message bubble, then a Start chat button. The card is labelled as a dialog, Escape closes it, and it never pretends that someone is typing or online. In direct mode the green button is itself the link.

Method

  • Number: remove spaces ( ) . -, drop a leading + or 00, require ^[1-9][0-9]{6,14}$ (country code first)
  • Link: https://wa.me/<number>?text=<message, UTF-8 percent-encoded including ! ' ( ) *>; no text parameter when the message is blank
  • Card: avatar = https logo or up to two initials of the business name; reply-time line = publisher text, never computed
  • Button colour: WhatsApp green #25D366 with the readable ink chosen by WCAG contrast (or your accent / the A2Z gradient)

Worked examples

A US number and a question

Inputs: whatsapp (555) 010-0123 with +1; message Hi! Do you have the blue jacket in M?

Result: https://wa.me/15550100123?text=Hi%21%20Do%20you%20have%20the%20blue%20jacket%20in%20M%3F

Brackets, dashes and the plus sign are removed; ! and ? are percent-encoded so the link stays valid.

A UK number written with 00

Inputs: whatsapp 0044 20 7946 0123; message I'd like to book (2 nights)

Result: https://wa.me/442079460123?text=I%27d%20like%20to%20book%20%282%20nights%29

The 00 international prefix is dropped; the apostrophe and brackets are encoded too.

A national number

Inputs: whatsapp 07700 900123

Result: No button on the live page; the builder preview asks for the number in international format

A leading 0 means the country code is missing.

Limitations

  • The visitor needs WhatsApp (app, desktop or web) to send the message; the widget cannot deliver it itself.
  • It cannot check that the number is registered on WhatsApp - test it once after publishing.
  • One number per button; route different departments with separate buttons or the Floating Contact Button.

Where publishers use it

  • An online boutique in a market where customers expect to ask about sizes on WhatsApp before buying
  • A holiday rental owner who wants enquiries to arrive as a WhatsApp message that already names the property and dates field
  • A driving school or tutor taking lesson requests from parents who rarely use email
  • A local repair shop that answers WhatsApp between jobs and wants the card to say so honestly: 'Typically replies within a few hours'

Questions

Do I need the WhatsApp Business API or an account with A2Z?

No. The button uses WhatsApp's public click-to-chat link, which works with an ordinary WhatsApp or WhatsApp Business number. Messages arrive in your normal WhatsApp app; A2Z is not in the conversation at all.

How must the number be written?

With the country code and without the national leading zero: a US number (555) 010-0123 is +1 555 010 0123, a London number 020 7946 0123 is +44 20 7946 0123. Spaces and brackets are fine - they are removed. A number starting with 0 is refused, because wa.me would not know which country it is in.

Can the first message include the page the visitor was reading?

Write any fixed text you like - for example 'Hi! I'm asking about the Lake View cottage'. The card does not add the page address automatically; put a different button on each page if each needs its own message.

Why does the card not show a green 'online' dot?

Because the page cannot know whether you are available, and inventing it would mislead visitors. The line under your name is the sentence you type, such as 'Typically replies within a few hours', and the greeting bubble is your own text shown as a message from you.

What happens on a desktop computer?

wa.me opens WhatsApp Desktop if it is installed, otherwise WhatsApp Web in a new tab, with the message ready to send.

Sources

  1. How to use click to chat - WhatsApp Help Center . wa.me/<number>; full phone number in international format, omitting zeros, brackets and dashes; ?text= prefilled message, URL-encoded
  2. RFC 3986: Uniform Resource Identifier, section 2 (percent-encoding) - IETF . reserved characters in the text parameter

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 Floating WhatsApp Button
https://a2z.tools/embed/floating-whatsapp-button

Related widgets

More Website Essentials widgets →

  • WhatsApp Chat Button

    Website Essentials Website component New

    An inline 'Chat on WhatsApp' button that opens a chat with your number and a message you prepared.

    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

  • WhatsApp Channel Button

    Social Media Social New

    A green Follow us on WhatsApp button for your Channel, community group invite or click-to-chat number.

    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

  • 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