Preview:
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bouton WhatsApp</title>
  <style>
    /* Style du bouton rectangulaire */
    .whatsapp-button {
      position: fixed;
      bottom: 20px; /* Position en bas */
      right: 20px; /* Position à droite */
      background-color: #25D366; /* Couleur officielle de WhatsApp */
      color: white; /* Couleur du texte */
      border: none;
      border-radius: 5px; /* Coins légèrement arrondis */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 15px; /* Espacement intérieur */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Ombre légère */
      cursor: pointer;
      font-size: 14px; /* Taille du texte */
      font-family: Arial, sans-serif; /* Police du texte */
      transition: transform 0.3s ease, background-color 0.3s ease; /* Animation au survol */
    }

    /* Icône WhatsApp dans le bouton */
    .whatsapp-button i {
      margin-right: 10px; /* Espace entre l'icône et le texte */
      font-size: 18px; /* Taille de l'icône */
    }

    /* Effet au survol */
    .whatsapp-button:hover {
      background-color: #1ebe57; /* Couleur légèrement plus foncée au survol */
      transform: scale(1.05); /* Légère augmentation de taille */
    }
  </style>
  <!-- FontAwesome pour l'icône WhatsApp -->
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
  <!-- Bouton WhatsApp -->
  <button class="whatsapp-button" id="whatsappBtn">
    <i class="fab fa-whatsapp"></i> Posez des questions
  </button>

  <script>
    // Fonction pour ouvrir WhatsApp
    document.getElementById('whatsappBtn').addEventListener('click', function() {
      const phoneNumber = "23058009839"; // Numéro WhatsApp sans "+" ni espaces
      const message = "Bonjour, j'ai une question à propos de ."; // Message par défaut
      const whatsappURL = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
      window.open(whatsappURL, "_blank"); // Ouvrir dans un nouvel onglet
    });
  </script>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter