WhatsApp Chat Button Generator.
A WhatsApp chat button is a small floating button on your website that opens a WhatsApp chat with your business when a visitor clicks it. Enter your number and a pre-filled message, choose the label, colour and corner, and copy a short HTML and CSS snippet that works on any website with no plugin or script.
Paste the snippet just before the closing </body> tag of your site, or into a custom HTML block in WordPress, Wix, Squarespace, Webflow or Shopify. It is plain HTML and CSS: no script, no tracking, and nothing is sent to Neweb.
Put this on a website of your own, so customers can find you and get in touch.
Start freeWhatsApp Chat Button Generator is a free online tool from Neweb (neweb.ai) for small businesses, with no sign-up. A WhatsApp chat button is a small floating button on your website that opens a WhatsApp chat with your business when a visitor clicks it. Enter your number and a pre-filled message, choose the label, colour and corner, and copy a short HTML and CSS snippet that works on any website with no plugin or script.
| Cost | Free, no account, no sign-up |
|---|---|
| Built for | small businesses, freelancers and sole proprietors |
| Made by | Neweb, the AI website builder and online presence manager (free plan; paid plans from $9/month billed yearly) |
Facts checked October 2026.
What you'll get.
A real example of what this tool produces. Run it above with your own inputs.
For many small businesses, WhatsApp is where customers actually ask questions and place orders. A chat button on the website removes a step: instead of copying your number into their phone, the visitor taps once and the chat opens with a message already typed.
This generator builds that button as a few lines of plain HTML and CSS. It uses WhatsApp’s own click-to-chat format, https://wa.me/ followed by your number in full international form, with an optional ?text= pre-filled message. Because there is no script, it loads instantly, works on any site builder that accepts custom HTML, and does not add tracking or cookies.
Chat button or chat link: which do you need?
The WhatsApp link generator gives you a wa.me link and a QR code to share in a bio, an email, a flyer or a message. This tool wraps the same kind of link in a floating button with its own styling, for the one place a bare link does not work well: pinned to the corner of every page of your website. Use the link generator for sharing, and this one for your site.
The tool is free, needs no sign-up and runs in your browser, so nothing you type is uploaded. It comes from Neweb, the AI website builder for small businesses, which has a free plan and paid plans from $9/month billed yearly ($19 month-to-month). If you do not have a website yet, a Neweb site gives you somewhere to put the button.
How to use the whatsapp chat button generator
Enter your WhatsApp number with the country code, for example +44 7700 900123. Spaces, dashes and the plus sign are removed for you.
Write a pre-filled message so the chat opens with a clear first line, and edit the button label.
Choose the style (icon and label, or a round icon), the corner, the colour and the distance from the edges.
Check the live preview and click Test the link to confirm it opens a chat with your number.
Click Copy snippet and paste it just before the closing
</body>tag of your site, or into a custom HTML block.
Why this matters for your business
It shortens the path to a conversation. A visitor who has to find your number, save it and open WhatsApp may not bother. A visitor who taps a button usually sends the message.
It works without a plugin. Chat widgets often load third-party scripts that slow pages down and need cookie consent. A link and a few lines of CSS do neither.
What the snippet contains, and why
- A wa.me link. The number is in full international format with no plus sign, spaces or leading zero, which is the format WhatsApp’s click-to-chat links use.
- An encoded pre-filled message. Spaces and punctuation are URL-encoded so the message arrives intact.
- An accessible label. The link carries an aria-label, so screen-reader users hear what the button does, including in the icon-only style.
- Readable text colour. The tool picks white or near-black text, whichever contrasts better with your button colour.
- A generic chat icon. The snippet draws a simple speech bubble rather than the WhatsApp logo, which is a Meta trademark with its own brand guidelines.
- rel="noopener" and target="_blank". The chat opens in a new tab without giving that tab access to your page.
Tips for better results
- Use a WhatsApp Business number that someone actually monitors, and say in the label or on the page when you reply.
- Keep the pre-filled message short and specific, for example "Hi, I would like a quote for…", so chats start with context.
- Bottom right is where most visitors expect a chat button; use bottom left if it would cover a cookie banner or a back-to-top button.
- Test on a phone as well as a desktop. On desktop the link opens WhatsApp Web or the desktop app.
- Mention in your privacy policy that visitors can contact you on WhatsApp and that the chat happens on WhatsApp’s service.
Example
A real-world walkthrough
A bakery in San Francisco wants cake enquiries to arrive on WhatsApp. The owner enters +1 415 555 0132, the message "Hi, I would like to order a cake", keeps the label "Chat on WhatsApp" and leaves the position at bottom right. The tool shows the link https://wa.me/14155550132?text=Hi%2C%20I%20would%20like%20to%20order%20a%20cake and a snippet of one link and four CSS rules.
She pastes the snippet into a custom HTML block in her site footer. The button now appears on every page, and each enquiry opens with the same first line, so she can tell at a glance that it came from the website.
Frequently asked questions
How do I add a WhatsApp chat button to my website?
Create the button with this generator, copy the snippet and paste it into your site’s HTML just before the closing body tag, or into a custom HTML or embed block if you use a site builder. The button then floats in the corner of the page. No plugin, account or script is needed.
What is the difference between this and the WhatsApp link generator?
The WhatsApp link generator produces a wa.me link and a QR code that you share anywhere. This tool produces a styled, floating button for your website that uses the same kind of link. If you only need a link for a bio or a message, use the link generator; if you want a button pinned to your web pages, use this one.
Does the button work on WordPress, Wix, Squarespace and Shopify?
It works anywhere you can add custom HTML, because it is only a link and a small style block. In WordPress use a Custom HTML block or widget; other builders have an equivalent embed or code block. Some builders limit custom code on certain plans, and some strip style blocks from content areas, in which case put the CSS in the site’s custom CSS setting instead.
Do visitors need WhatsApp installed?
They need a WhatsApp account. On a phone the link opens the WhatsApp app; on a computer it opens WhatsApp Web or the desktop app. A visitor without WhatsApp will be prompted to install it, so keep a phone number or contact form on the page as well.
Does the snippet track visitors or slow my site down?
No. It contains no JavaScript, no external files and no cookies. It adds one link, one small inline icon and a few CSS rules, so it has no measurable effect on page speed. Once a visitor clicks, the conversation takes place on WhatsApp under WhatsApp’s own terms.
Can I use the WhatsApp logo on the button?
WhatsApp’s name and logo are trademarks of Meta, which publishes brand guidelines for using them. This generator deliberately uses a generic chat-bubble icon and a plain text label. If you want to use the official logo, download it from WhatsApp’s brand resources and follow their guidelines.
Keep building.
WhatsApp Link Generator
A wa.me link and QR code to share anywhere.
WhatsApp Greeting Generator
Greeting and away messages for new chats.
Google Review Link Generator
A direct link that asks for a review.
QR Code Generator
Put any link on a counter card or flyer.
Payment Reminder Generator
Short reminder messages for WhatsApp.
Donation Receipt Generator
For charities and clubs that take donations.
Your entire online presence, on one subscription.
All industries and more. AI website builder, managed hosting and AI search optimization. Free to start; paid plans from $9/month billed yearly ($19 month-to-month) include a free domain for the first year.