<!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>