WhatsApp widget generator

A Chat Widget With No JavaScript In It

There is no script tag in the code this page hands you. The little panel opens and closes on a hidden checkbox and one CSS rule, which is an old trick and a deliberate one: site builders have a habit of stripping or quietly sandboxing a script you paste into them, and a chat launcher that never opens is the sort of failure you hear about from a customer rather than from your own site.

So the WhatsApp widget generator above produces a block of plain HTML with its styling written into it. Nothing loads from anywhere, nothing depends on this page still existing, and every rule in it is scoped to one class name so your theme cannot repaint the widget and the widget cannot repaint your theme.

What the WhatsApp Widget Generator Puts on Your Site

Two things, stacked in the bottom right corner and pinned to the screen rather than to the page.

The first is a round green launcher, 58 pixels across, with the WhatsApp glyph in it. That is all a visitor sees until they tap it.

The second is the card that appears above it, 320 pixels wide and narrower than that on a small phone. Its header is a coloured bar carrying a circular avatar with your agent’s initials, the name in bold, and a line underneath giving the role and a small green dot. Below the header sits the welcome message in a grey speech bubble, and under that a full width green button that opens WhatsApp.

The preview on this page draws all of it from the same values the code is built from, so what you are looking at in the panel is what your visitors get.

Five Fields and a Row of Colours

The left hand card is short on purpose.

• Code and WhatsApp number. The dial code picker covers 249 countries and territories and opens on the United Kingdom at +44. The hint under the number field is the whole instruction: without the country code, and without a leading zero. Paste it however you have it and everything that is not a digit is discarded anyway.
• Agent name. Opens on Amy. The avatar takes the first letter of the first two words and puts them in capitals, so Amy is A and Amy Okafor is AO.
• Role. Opens on Front desk. It is printed with the word online after it. Clear the field and the line reads Online on its own rather than leaving a stray separator behind.
• Welcome message. A four line box, opening on a sentence about telling you what you need. Line breaks you type in there survive into the widget, so a two line greeting stays two lines.
• Header colour. Four chips: WhatsApp green, Deep green, Teal and Ink. It opens on WhatsApp green.

Clear the agent, the role or the welcome message entirely and the widget does not go blank. Each field falls back to the words sitting in it as a placeholder, which is why the preview can never show you a nameless widget with an empty bubble.

Until there is a number, the code box holds a sentence instead of markup: “Enter your WhatsApp number to build the widget code.” A widget whose button opened a chat with nobody would look finished and fail only once it was live, so the panel refuses to build one.

The Word Online Is Text, Not a Status

The role line always ends in the word online, and the little dot beside it is always green. Neither of them knows anything. There is no connection to your phone, no opening hours, no away mode and no way to switch either of them off from this panel.

That matters more than it sounds. A visitor who reads online, sends a message and hears nothing for eighteen hours has been told something that was not true, by you, on your own site.

There is one lever, and it is the welcome message. Put the honest version in there. “We are usually back within the hour, Monday to Saturday” costs you a line and buys you the thing the green dot was pretending to promise. If your trade runs on appointments rather than instant answers, say that instead: “Send us a message and we will confirm a slot today.”

The alternative, if you genuinely cannot answer quickly, is to take the widget off the site out of hours. Nobody does this, and it is worth saying out loud that the reason nobody does it is that it is a nuisance, not that it would not work.

The Welcome Message Is Not Sent to Anyone

This is the part people misread. The welcome message is not a WhatsApp message. It never leaves your website. It sits inside the card as a picture of a message, from a person who has not said anything yet, and it disappears the moment the visitor taps through.

By default the chat that then opens has an empty compose box. No pre-filled text, nothing for the customer to delete before they can start typing. That is the right way round: the widget has already said hello, so making them send your words back to you would be a strange thing to ask.

The cost of that choice is context. You get the customer’s own first sentence, which is more useful than a canned one, but you do not get any hint of which page they were reading. If you need that, put a pre-filled link on the page instead of relying on the widget.

Keep the message to a couple of lines. The bubble is 320 pixels wide, and a paragraph in there turns into a wall the visitor has to read before they get to the button.

Where the WhatsApp Widget Generator Code Goes

Before the closing body tag, once, on every page. The panel prints that instruction above the code box and it really is the whole of it.

Once is the word to notice. The card is opened by a checkbox with a fixed name, so two copies of the block on one page end up sharing the same control, and tapping one launcher can open the other one’s card. Put it in a site-wide footer or custom code field, not inside the body of a page that might get duplicated.

It needs a field that accepts raw HTML and hands it through untouched. Visual editors often strip a style block, and this widget is a style block with some markup attached: without the styles it lands as a stray line of text with a link in it, somewhere in the middle of your page. That is a sanitised paste, not a broken snippet.

Check the published page rather than the editor preview. The two do not always sanitise the same way, and the one that matters is the one your customer loads.

Colour, and the One Thing It Will Not Change

The four chips repaint the header bar and nothing else. The round launcher stays WhatsApp green, and so does the button inside the card.

That is deliberate rather than an oversight. Those two are the parts doing the explaining. A green circle in the corner of a website tells somebody what will happen when they tap it before they have read a single word, and a launcher in your brand colour is just a mystery button. The header is the piece that can afford to be yours.

All four colours are dark enough to carry white text, which is the only real constraint the header puts on a choice. Ink is the one to reach for when your site is already busy and a fifth green thing would be too much. Teal and Deep green are there for brands the WhatsApp green fights with.

How the Opening and Closing Actually Works

The launcher is a label wired to a hidden checkbox. Ticking the checkbox makes the card appear, unticking it makes the card go away, and that is the entire mechanism.

Some useful things follow from it. Because it is a real form control rather than a scripted div, a keyboard can operate it. Because there is no script, there is nothing to load, nothing to block rendering and nothing to go wrong on a slow connection.

And some limits follow from it too. There is no animation, no open after five seconds, no open when somebody scrolls halfway down, and no memory: every page load starts with the card closed, because a checkbox has no history.

One more detail worth knowing if you are also using a floating chat button elsewhere. This widget sets its own typeface, a plain system font stack, rather than inheriting whatever your site uses. On most sites nobody notices. On a site with a strong display font, the widget will look like a piece of the operating system rather than a piece of your brand, and that is a fair trade for text that renders identically everywhere.

What the WhatsApp Widget Generator Will Not Do

It is a card with a button on it. The honest list of what that rules out:

• It is not live chat. Nothing is typed inside the widget. There is no message box, no send, no reply, no history. The conversation happens in WhatsApp.
• No tracking of any kind. No events, no analytics, no counting of opens or taps. Your site statistics will not show you how many people used it.
• One agent. One name, one role, one avatar. There is no team, no routing and no department picker.
• Bottom right, always. Fixed twenty pixels from the bottom and twenty from the right, on a phone as on a desktop. There is no left option and no offset setting.
• Every page, all the time. No page rules, no hide on mobile, no schedule.
• No lookup on the number. Whatever digits you give it become the link. A landline builds a widget that opens to an error.
• Nothing is stored. No account, no login and no record anywhere. The number, the name and the message exist in the block you copied and nowhere else.

The panel builds all of that on the server before any script runs, which is why the code box holds a finished, copyable answer the moment the page appears.

A Widget, a Button, a Link or a Code

These overlap, and choosing the wrong one is the usual reason somebody ends up unhappy with a perfectly good tool.

Take the widget when you want to say something before the customer commits: a name, a face of sorts, and a sentence that sets expectations. Take the WhatsApp chat button generator instead when you want the lightest possible touch, a single floating button with no card, which can also sit bottom left and can carry a pre-filled message. If you want no furniture on the site at all, just an address for a bio, an ad or an email footer, the WhatsApp link generator gives you that. For a window, a van, a menu or a leaflet, the WhatsApp QR code generator turns the same address into something a camera reads.

Whichever you pick, the welcome message is the part worth ten minutes. The welcome message generator is about what you say once the conversation has started, and the two want to agree with each other.

The Widget Is a Promise About the Reply

Everything in that little card is a claim that somebody is there. The name, the role, the green dot, the sentence in the bubble. None of it is true on its own. It becomes true when a message gets answered, and false the first time one does not.

That is the real reason widgets underperform, and it is never the design. With DMly the messages your widget produces land in a shared inbox alongside Instagram and Messenger, with an automatic first reply going out while somebody is still walking to the desk, so the green dot is at least telling the truth about the first thirty seconds.

Put it up, write an honest welcome message, and watch what comes in for a fortnight. If the volume is small, you have lost nothing. If it is not small, you have just found out where your enquiries were going instead.