Floating WhatsApp button generator for websites

What the code does

The generated snippet has two parts: an ordinary link (<a>) containing the WhatsApp icon drawn in SVG, and a <style> block with the button's look. There is no JavaScript, no library and no script loaded from another server. So the button does not slow your site down, sets no cookies and sends visitor data to no one — it is just a styled link.

The link behind the button

The button points to a https://wa.me/ link, the same one our WhatsApp link generator builds. The number is converted to international, digits-only format: the tool removes spaces, brackets, dashes and the + sign, and adds Brazil's country code 55 when the number has 11 digits or fewer (a Brazilian area code, the DDD, plus the number). The optional message is encoded with encodeURIComponent and placed after ?text=, so the chat opens with the text already typed. The link opens in a new tab (target="_blank" with rel="noopener").

The options

• Side: bottom-right corner (default) or bottom-left, always 20 px from the side edge.
• Colour: any hexadecimal colour (#25d366 is the default). If the value is not a valid hex code, the snippet falls back to the default green. The icon and label are white, so pick a background dark enough to keep good contrast.
• Label: optional. Without one, the button is a 56 px circle with the icon only; with one (e.g. “Chat with us”) it becomes a pill with icon and text. The label also becomes the aria-label read by screen readers; without it, the accessible name is “WhatsApp”.
• Bottom offset: 0 to 200 px from the bottom edge (default 20 px). Raise it if the button covers a cookie notice, a chat widget or the phone's navigation bar.

The button sits above the page content (z-index: 9999), shows a visible outline when focused with the keyboard and is hidden when printing (@media print), so it does not appear on printed pages or PDFs.

Where to paste it

• Plain HTML: paste the snippet just before </body> on every page (or in your shared footer file).
• WordPress: use a “Custom HTML” block in an area shown on every page, such as the theme footer, or a plugin that inserts code into the footer. Some themes have their own field for footer code.
• Wix: under Settings → Advanced → Custom Code, add the snippet to “Body – end” on all pages. The “Embed HTML” element runs inside a frame (iframe) and would trap the button inside it.

If your page already uses a class called wa-float, rename it in the snippet to avoid a clash. After publishing, test on a phone: tap the button and check that the chat opens with the right number.

This tool is not affiliated with WhatsApp or Meta. WhatsApp is a trademark of WhatsApp LLC.

A bakery with the fictitious number +55 41 99876-5432 wants the button in the bottom-left corner, because the right side already shows a delivery notice. Typing (41) 99876-5432 and the message “Hi! I'd like to place an order.”, the button's link starts with https://wa.me/5541998765432?text= followed by the encoded message. The chosen colour is #128c7e, a darker green that contrasts well with white text; the label is “Chat with us” and the bottom offset is 90 px so it does not cover the phone's navigation bar. The generated CSS contains left:20px;bottom:90px and background:#128c7e. The whole snippet is just over 1 KB and goes right before </body>.