Aller au contenu

Bouton WhatsApp flottant

Un bouton WhatsApp fixe en bas de l'écran qui ouvre une bulle d'accueil avec sujets fréquents et message pré-rempli, sans widget tiers.

  • Tailwind
  • React
  • CSS
  • WordPress
Ouvrir dans un nouvel onglet

Description

Le bouton reste en bas à droite de l'écran, sur mobile comme sur ordinateur. Il ouvre une bulle d'accueil : qui répond, le délai de réponse habituel, trois sujets fréquents qui remplissent le message d'un clic, et un champ modifiable. Le lien « Continuer sur WhatsApp » est un simple lien wa.me construit à partir du message : aucun script ni cookie WhatsApp n'est chargé avant le clic, ce qui allège la page et simplifie le RGPD par rapport aux widgets tiers. Remplacez le numéro (chiffres seulement, indicatif 33 sans le zéro) et les textes, c'est tout.

Accessibilité : bouton natif avec aria-expanded et aria-controls, nom accessible « Nous écrire sur WhatsApp », focus placé dans le message à l'ouverture, fermeture par Échap ou par le bouton « Fermer » avec retour du focus, sujets en boutons aria-pressed, champ étiqueté, lien qui annonce l'ouverture d'un nouvel onglet, cibles de 44 px minimum, contours de focus de 3 px, contrastes AA mesurés en clair comme en sombre, et aucune animation avec prefers-reduced-motion. Sans JavaScript, le bouton reste un lien qui ouvre WhatsApp avec le message par défaut.

Code

Chargement du code…

Contenu de l'archive

bouton-whatsapp-flottant-html-tailwind.zip3 fichiers · 7 Ko

  • index.html13 Ko
  • README.md4 Ko
  • LICENSE.md1 Ko

Mots-clés

Mis à jour le 16 octobre 2026.

Dans le même esprit

  • Une barre collée en bas de l'écran mobile avec « Appeler » et « Itinéraire », et l'état d'ouverture en direct, pour artisans et commerces locaux.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Des boutons circulaires à icône avec une infobulle accessible au survol et au focus.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Bouton scindé avec menu

    Bientôt disponible

    Une action principale accolée à un menu d'options secondaires.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant
  • Un bouton épais qui s'enfonce sous le doigt, pour les actions principales.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant