Floating WhatsApp button
A WhatsApp button pinned to the bottom of the screen that opens a welcome bubble with common topics and a pre-filled message, with no third-party widget.
- Tailwind
- React
- CSS
- WordPress
Description
The button stays at the bottom right of the screen, on mobile and desktop alike. It opens a welcome bubble: who answers, the usual reply time, three common topics that fill in the message in one click, and an editable field. The Continue on WhatsApp link is a plain wa.me link built from the message: no WhatsApp script or cookie is loaded before the click, which keeps the page light and makes GDPR simpler than with third-party widgets. Replace the number (digits only, country code without the leading zero) and the texts, and you are done.
Accessibility: a native button with aria-expanded and aria-controls, accessible name "Nous écrire sur WhatsApp", focus moved to the message on opening, closing with Escape or the Close button with focus returned, topics as aria-pressed buttons, a labelled field, a link that announces it opens a new tab, targets of at least 44 px, 3 px focus outlines, AA contrast measured in light and dark, and no animation with prefers-reduced-motion. Without JavaScript the button stays a link that opens WhatsApp with the default message.
Code
Loading the code…
Archive contents
bouton-whatsapp-flottant-html-tailwind.zip3 files · 7 Ko
- index.html13 Ko
- README.md4 Ko
- LICENSE.md1 Ko
Tags
Updated on October 16, 2026.
In the same spirit

A bar pinned to the bottom of mobile screens with Call and Directions buttons and a live open-now status, built for trades and local shops.
- Tailwind
- React
- CSS
- WordPress

Circular icon buttons with an accessible tooltip on hover and focus.
- Tailwind
- React
- CSS
- WordPress

Split button with menu
Coming soonA primary action joined to a menu of secondary options.
- Tailwind
- React
- CSS
- WordPress

Raised button
FreeA chunky button that sinks under the finger, for primary actions.
- Tailwind
- React
- CSS
- WordPress