Skip to content

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
Open in a new tab

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
    Component
  • Circular icon buttons with an accessible tooltip on hover and focus.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A primary action joined to a menu of secondary options.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A chunky button that sinks under the finger, for primary actions.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component