This article explains how to add a WhatsApp Messenger button to your Booking Engine (as a clickable image or floating button), allowing your guests to communicate with you more quickly and effectively.
Get to know Cloudbeds Guest Experience - Cloudbeds Guest Engagement Software allows hotels and guests to communicate via SMS, WhatsApp, and mobile messaging pre-, during, and post-stay. Cloudbeds Guest Experience enhances customer service through real-time guest engagement, helping boost service scores while streamlining internal operations.
WhatsApp Messenger for your Booking Engine Plus
To add WhatsApp Messenger to your Booking Engine Plus as a floating button, follow the steps below:
- Go to the Settings page
in the Account menu
and click on the Booking Engine section
- Click on the Customize tab
- Copy the customization code below and paste it into the Custom Meta Tags section.
- Save
Important: to redirect your guests to your WhatsApp correctly, edit the phone number after the comment line starting with the text 'replace the phone number below':
<!-- **START** Adds a floating WhatsApp button with a styled close (X) button 19.07.2024 **START** -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Replace the phone number below, '1234567890' with your phone number, including country code. Optionally, replace the text 'Hello' below, with your own introduction text. Do not edit anything else or erase quotation marks. -->
<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="Close WhatsApp button">
<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>
<!-- **END** Adds a floating WhatsApp button with a styled close (X) button 19.07.2024 **END** -->- Copy the customization code below and paste it into the JavaScript section
- Save
<!-- **START** JavaScript floating WhatsApp button Script for styled close (X) button function 19.07.2024 **START** -->
<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>
<!-- **END** JavaScript floating WhatsApp button Script for styled close (X) button function 19.07.2024 **END** -->Important: If you have the Booking Engine implemented in your website, such as with the Immersive Experience, or if you make any adjustments to the sizes and position of the WhatsApp button, please ensure the button does not block other essential buttons of the Booking Engine, on Desktop and Mobile devices. Like any website change, it is important to check the results and count on the help of an experienced website designer or developer.
This Booking Engine customization includes a simple 'X' button that guests can use to dismiss the WhatsApp button if they'd like. Contact support if any concerns arise.
Comments
This sounds like a great feature... could you please provide the code for the "Booking Engine Plus" users?
Hello, Karl BROCHARD!
You can find the required instructions for Booking Engine Plus in the section WhatsApp Messenger for Booking Engine Plus of this article.
Please let us know if you need any other information.
Kind regards! 💙
Please sign in to leave a comment.