A WhatsApp chat box is the small floating button in the corner of a website that opens a WhatsApp conversation when someone taps it. For most small businesses it is the highest-converting contact option on the site, because it costs the visitor nothing to start - no form, no email address, no waiting.
It is also one of the few website changes you can make in about two minutes without a developer or a paid plugin.
What you need first
Only one thing: a phone number with WhatsApp active on it. That can be a personal WhatsApp account, a WhatsApp Business app account, or a number on the WhatsApp Business API.
You do not need the WhatsApp Business API for a chat box. This confuses a lot of people because plugin vendors imply otherwise. The chat box simply opens a normal conversation with your number. The Business API is for sending template campaigns and running automated replies at scale - a different problem.
One caution if you are on the Business API: a number registered to the API no longer receives messages in the WhatsApp app. If your chat box points at an API number and nobody is watching the API inbox, those conversations go nowhere.
The fastest route
Use a generator, paste the output, done. The WhatsApp chat widget generator asks for your number, a greeting and a colour, and gives you a snippet. It is free, there is no signup, and the code is yours - it does not phone home to us or add anyone's branding to your site.
Paste the snippet immediately before the closing </body> tag. That placement matters: put it in <head> and it may run before the page exists to attach to.
Where to paste it, by platform
WordPress. Appearance, then Theme File Editor, then footer.php, before </body>. If your theme has a "custom scripts" or "footer code" box - most modern themes do - use that instead, because theme updates overwrite footer.php.
Shopify. Online Store, Themes, Edit code, theme.liquid. Paste before </body>. This applies the widget across every page including checkout-adjacent pages.
Wix. Settings, Custom Code, Add Custom Code. Choose "Body - end" and apply to all pages.
Webflow. Project Settings, Custom Code, Footer Code. Publish afterwards - custom code does not appear in the designer preview.
Squarespace. Settings, Advanced, Code Injection, Footer.
Plain HTML. Paste before </body> on each page, or into whatever shared footer include your site uses.
Choosing the number and the greeting
Two decisions do more for conversion than any styling choice.
Use a number a human actually watches. The most common failure is not technical: the chat box works, messages arrive, and nobody replies for two days. A WhatsApp conversation carries an expectation of speed that email does not. If you cannot answer within a few hours during business hours, say so in the greeting rather than losing the lead silently.
Pre-fill a specific first message. The generator lets you set the text that appears in the visitor's compose box. Do not leave it as "Hi". Something like "Hi, I'm looking at the pricing page and have a question" tells you where they came from and lowers the effort of starting. If your site has distinct sections, set a different pre-filled message per section - a visitor from your pricing page has a different question than one from your careers page.
When it does not show up
In rough order of likelihood:
Pasted in the wrong place. In <head> rather than before </body>, or inside a page builder block that strips scripts. Check the page source for your snippet - if it is not there, the platform removed it.
Caching. WordPress and Shopify both cache aggressively. Clear the site cache, then hard-refresh your browser.
An ad blocker. Some blockers hide elements with "chat" or "whatsapp" in the class name. Test in a private window with extensions disabled before concluding it is broken.
A z-index conflict. The button is there but sitting behind a sticky header or cookie banner. Raise the widget's z-index above the element covering it.
Wrong number format. The number must be in international format with country code and no plus sign, spaces or dashes - 919876543210, not +91 98765 43210. A wrongly formatted number produces a button that opens WhatsApp to nothing.
Chat box, chat button, or click-to-chat link?
The terms get used interchangeably and mean slightly different things.
A click-to-chat link is a wa.me/919876543210 URL. It opens WhatsApp when clicked, but you have to place it somewhere yourself - a menu item, a button, an email signature.
A chat button or chat box is the floating element pinned to the corner of every page, visible as the visitor scrolls. Same underlying mechanism, but it follows the reader rather than waiting to be found.
Use the link where you already have a call to action. Use the widget when you want the option always available. Most sites benefit from both.
What comes after the first message
A chat box solves getting the conversation started. It does not solve what happens next, and that is where most WhatsApp channels quietly fail.
Once volume grows past a few conversations a day, three things start to matter: more than one person needs to answer from the same number, common questions should not need a human at all, and you need to reach customers who messaged you more than 24 hours ago - which requires an approved template.
That is the point at which the WhatsApp Business API becomes worth the setup. Not before.
Related tools
- WhatsApp chat widget generator - build the snippet
- WhatsApp message preview - see how a message renders before sending
- WhatsApp message template builder - for when you move to the Business API
The short version
Get a generator to produce the snippet, paste it before </body>, use a number someone actually watches, and pre-fill a first message that tells you where the visitor came from. If it does not appear, check the page source first - it is almost always placement or caching rather than the code.