WhatsApp chat button generator

The Zero That Sends Nobody Anywhere

Type 07700 900123 into a chat link and it goes nowhere. Take the zero off the front, put the country code before it, and the same number works. That zero is a national dialling convention rather than part of the number, and the WhatsApp chat button generator above takes it off for you, along with every space, bracket and hyphen you happened to paste in with it.

What comes back is one line of HTML. No plugin, no script tag, no stylesheet: a single link with everything it needs written inside it. Paste it into your site and a floating button appears in the corner you picked, in the colour you picked, opening a chat with your greeting already sitting in the customer’s compose box.

What the WhatsApp Chat Button Generator Actually Builds

The code box at the bottom of the panel is the whole product. Everything above it is a way of filling that box in.

Inside it is one anchor tag. It carries the chat link, it opens in a new tab, it has an aria-label so a screen reader announces it as something other than “link”, and the WhatsApp glyph is drawn as inline SVG rather than fetched as an image. The styling is written into the tag itself: fixed position, twenty pixels off the bottom and twenty off your chosen side, a stacking order of 9999, your colour, white text, a soft shadow.

One line of that is worth pointing out. The font is set to inherit, which means the button takes whatever typeface the page around it already uses instead of importing one. On a site with any personality at all, that is the difference between a button that belongs and a button that was bolted on.

Nothing in the snippet reaches out to anything. It names no plugin, no stylesheet and no remote file, so it does not stop working when this page is closed, when the site it was pasted into changes theme, or when whatever built it goes away.

The Seven Fields, and What Each One Decides

Seven controls, and the preview and the snippet both repaint as you touch them.

• Code. The dial code picker, 249 countries and territories deep. It opens on the United Kingdom at +44, which is a default and not a guess about you.
• WhatsApp number. The national number, in whatever shape you have it. Digits are all that survives, and leading zeros are dropped.
• Button label. The words on the button. It opens on “Chat on WhatsApp”. Empty it and you get an icon-only button, and the aria-label quietly falls back to those same words so the link is never unlabelled.
• Message they arrive with. The greeting waiting in the customer’s compose box. It opens on “Hi, I have a question about your prices.”
• Colour. Four swatches: WhatsApp green, Deep green, Ink and Slate blue. It opens on WhatsApp green.
• Position. Bottom right or bottom left. It opens on bottom right.
• Shape. Pill or Rounded, which is a corner radius of 999 pixels against one of 12. It opens on Pill.

The mock browser beside the fields, the one with your-website.com in its address bar, is showing you the real thing. The preview button is painted from the same colour value and the same corner radius the snippet is built from, so what you see there is what lands on your site.

Until a number is typed, the code box holds a sentence rather than markup: “Enter your WhatsApp number and the snippet appears here.” That sentence is not HTML, and copying it into a site does nothing at all. The number is the one field the tool cannot do without.

Where the WhatsApp Chat Button Generator Snippet Goes

The kicker above the code reads “Paste before </body>”, and that is genuinely the whole instruction. Because the button is fixed to the viewport rather than sitting in the flow of the page, where you put it in the source barely matters. Near the end is the habit worth keeping, so the rest of the page has already painted before the browser gets to it.

In practice it goes anywhere your site lets you enter raw HTML. A custom HTML block, a footer code field, a site-wide scripts box. What it needs is somewhere that will hand your markup through untouched.

That last part is where it usually goes wrong. Some editors sanitise what you paste and strip the style attribute out of it, which leaves a working link that has lost every instruction about where to sit and what colour to be. If your button arrives as blue underlined text in the middle of a paragraph, the markup was cleaned rather than broken. Look for a raw HTML or custom code field rather than the visual editor.

Test it on the published page, not in the editor’s preview. Previews sanitise differently from the live template often enough that a button can pass one and fail the other.

The Greeting Is Not a Promise

The message field is the one people leave alone and should not. Whatever you type there arrives in the customer’s compose box before they have written a word, and they can edit it, delete it or send it as it stands.

That makes it a routing tool rather than a script. “Hi, I have a question about your prices” tells you nothing you did not already know. “Hi, I would like a quote for a bathroom floor” tells you which of your three trades this is, before you have read a word the customer wrote.

Two practical notes. Put the page or the offer in it if the button only appears in one place, because a message reading “About the September service” saves you a round trip. And keep it short: it is sitting in a compose box on a phone, and a paragraph in there reads as something the customer has to get rid of before they can type.

Leave the field empty and the greeting disappears from the link entirely. What you get then is a plain chat link with no pre-filled text, which is the right answer when you would rather hear the question in the customer’s own words.

Colour, Corner and Shape

Four colours, two corners, two shapes, and no colour picker. That is deliberate rather than unfinished, and the two position choices are structural: the snippet pins the button with a single CSS property, left or right, and a third corner has nothing to pin it with.

WhatsApp green is the obvious pick and it is right more often than not, because it is the one colour that tells somebody what will happen when they tap it without using any words at all. Ink is the one to choose when your site is already busy and the green would be the loudest thing on the screen. Slate blue and Deep green are there for sites where the green fights the brand.

Position deserves more thought than colour. The bottom right corner is crowded on a modern website: cookie banners, back-to-top arrows, live chat bubbles and support widgets all default to it. If something already lives there, move the button to the left rather than stacking two floating things on top of each other. On a phone that corner is also where the thumb naturally rests, which cuts both ways: easy to reach, and easy to hit by accident while scrolling.

Reading the Link the WhatsApp Chat Button Generator Writes

The link inside the snippet is a wa.me address, which is WhatsApp’s own click to chat format. It has two parts and nothing else.

First the number, as digits only, with your dial code welded to the front of the national number. No plus sign, no spaces, no zeros. Then, if you wrote a greeting, a question mark, the word text, an equals sign and your message with its spaces and punctuation percent-encoded.

A few characters are deliberately left alone in that encoding: exclamation marks, apostrophes, brackets and asterisks. Those turn up constantly in real greetings, and a browser leaves them as they are, so the panel does too. It means the snippet you read before the page finished loading is character for character the snippet you copy afterwards.

You can check the whole thing without pasting anything into a site. Pull the address out of the snippet, put it in a browser tab, and see whether WhatsApp opens a chat with the right business and the right message. If that works, the button will work, because the button is that address with a coat of paint on it.

Six Ways a Chat Button Ends Up Going Nowhere

Almost every failure is one of these, and all six are visible before you paste anything.

• The wrong dial code. The picker opens on the United Kingdom. A South African number sitting behind a +44 produces a link that is somebody else’s problem, quite literally.
• A country code typed into the number field. The dial code is already in front of it. Typing it twice gives you a number carrying the code twice, and no amount of zero-stripping saves that.
• The prompt copied instead of the code. If the box still reads “Enter your WhatsApp number and the snippet appears here”, there is no number and there is no snippet.
• An editor that strips inline styles. A button that lands as ordinary blue link text was sanitised on the way in. Find a raw HTML field.
• Something else already in that corner. The button stacks at 9999, which is high, and a cookie banner that stacks higher will sit on top of it. Move the button, or move the banner.
• A number that is not on WhatsApp. Nothing here is looked up. The panel builds a link to whatever digits you gave it, and a landline builds a link that opens to an error.

The most useful habit is the dullest one: tap your own button on a phone that is not yours, from a number that has never messaged you. It is the only test that goes through the same door your customer does.

What the Button Will Not Do

It is a link. That is the whole of it, and the limits follow from it.

There is no click tracking, no event fired and no analytics of any kind, so your website statistics will not tell you how many people tapped it. It has no rules either: it cannot appear after somebody scrolls, hide on mobile, wait a few seconds, or show up on some pages and not others. It has no chat window, no agent name and no greeting bubble, because it opens WhatsApp rather than opening anything on your site.

The offsets are fixed at twenty pixels from the bottom and twenty from the side, on a phone exactly as on a desktop, because the snippet carries no responsive rules and no media queries. And nothing about you is kept anywhere. There is no account, no login and no record: the number and the message exist in the snippet you copied and nowhere else.

The panel itself is built on the server before any JavaScript runs, which is why the code box already holds a complete, copyable answer the moment the page appears. The script only recomputes what is already sitting there.

A Button, a Widget, a Link or a Code

Four tools here do overlapping jobs, and picking the wrong one is the commonest reason people end up dissatisfied with the right one.

Use this button when you want the least possible interference with your site. If you want a small chat window instead, with an agent name, a role and a greeting bubble that opens before the conversation moves to WhatsApp, the WhatsApp widget generator builds that. If you do not need anything on your site at all, and just want an address for a bio, an ad or an email signature, the WhatsApp link generator gives you the link on its own. For print, a window, a van or a menu, the WhatsApp QR code generator turns the same address into something a camera can read.

Worth doing before any of them: work out what the greeting should say. The welcome message generator is about the reply rather than the opener, and the two want to fit together.

Somebody Still Has to Answer It

A chat button converts better than a contact form for one reason, and it is not the button. It is that a message feels like a conversation somebody is going to reply to, whereas a form feels like a note going into a drawer.

Which makes the reply the whole bet. A tap at nine in the evening that gets answered at eleven the next morning has already been beaten by whoever answered at nine fifteen, and every button on every site is making that promise on your behalf. With DMly those chats land in a shared inbox your whole team can see, with an automatic first reply while somebody is on their way to it.

Put the button up first. It costs you one line of HTML and five minutes, and it will tell you inside a week whether the answering is a problem you actually have.