Ajouter WhatsApp Messenger à votre moteur de réservation

Cet article explique comment ajouter un bouton WhatsApp Messenger à votre moteur de réservation (sous forme d’image cliquable ou de bouton flottant), permettant à vos clients de communiquer avec vous plus rapidement et efficacement.

WhatsApp Messenger pour votre Booking Engine Plus

Pour ajouter WhatsApp Messenger à votre Booking Engine Plus sous forme de bouton flottant, suivez les étapes ci-dessous :

1. Accédez à la page Paramètres dans le menu Compte et cliquez sur la section Booking Engine
2. Cliquez sur l’onglet Personnaliser
3. Copiez le code de personnalisation ci-dessous et collez-le dans la section Balises méta personnalisées.
4. Enregistrez

Important : pour rediriger correctement vos clients vers votre WhatsApp, modifiez le numéro de téléphone après la ligne de commentaire commençant par le texte « remplacez le numéro de téléphone ci-dessous » :

<!-- **DÉBUT** Ajoute un bouton WhatsApp flottant avec un bouton de fermeture (X) stylisé 19.07.2024 **DÉBUT** -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Remplacez le numéro de téléphone ci-dessous, '1234567890', par votre numéro, incluant l’indicatif pays. Optionnellement, remplacez le texte 'Hello' par votre propre message d’introduction. Ne modifiez rien d’autre et ne supprimez pas les guillemets. -->
<a href="https://api.whatsapp.com/send?phone=1234567890&text=Hello" class="cb-floating-whatsapp" target="_blank">
<i class="fa-brands fa-whatsapp"></i>
</a>
<button class="cb-floating-whatsapp-close" aria-label="Fermer le bouton WhatsApp">
<i class="fa-solid fa-xmark"></i>
</button>
<style>
.cb-floating-whatsapp {
position: fixed;
width: 60px;
height: 60px;
bottom: 70px;
right: 25px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 30px;
z-index: 10000;
}
.cb-floating-whatsapp-close {
position: fixed;
width: 20px;
height: 20px;
bottom: 125px;
right: 20px;
background-color: #25d366;
color: white;
border: none;
font-size: 20px;
z-index: 10001;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.cb-floating-whatsapp-close i {
font-size: 15px;
font-weight: 700;
}
</style>
<!-- **FIN** Ajoute un bouton WhatsApp flottant avec un bouton de fermeture (X) stylisé 19.07.2024 **FIN** -->

5. Copiez le code de personnalisation ci-dessous et collez-le dans la section JavaScript
6. Enregistrez

<!-- **DÉBUT** Script JavaScript pour bouton WhatsApp flottant avec fonction bouton de fermeture stylisé (X) 19.07.2024 **DÉBUT** -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var whatsappButton = document.querySelector('.cb-floating-whatsapp');
var closeButton = document.querySelector('.cb-floating-whatsapp-close');
closeButton.addEventListener('click', function() {
whatsappButton.style.display = 'none';
closeButton.style.display = 'none';
});
});
</script>
<!-- **FIN** Script JavaScript pour bouton WhatsApp flottant avec fonction bouton de fermeture stylisé (X) 19.07.2024 **FIN** -->