This article explains how to add a WhatsApp Messenger button to your Booking Engine, (as a clickable image or as a floating button), allowing your guests to communicate with you more quickly and effectively.
Get to know Whistle for Cloudbeds - Cloudbeds Guest Engagement Software that allows hotels and guests to communicate via SMS, WhatsApp and mobile messaging pre, during, and post-stay. Whistle for Cloudbeds enhances customer service through real-time guest engagement, helping boost service scores while streamlining internal operations.
How to Add WhatsApp Messenger to your Booking Engine
Select only one of the options below to add the WhatsApp button to your Booking Engine. Note that it is not possible to use both options/codes together.
- Click on the Account icon
- Go to the Settings
- Click on Customize the Booking Engine
- Copy the customization code below and paste it in the Custom Meta Tags - Gallery Design section
- Save your changes
When copying and pasting the customization code, remember to replace the text in red below:
- Your WhatsApp number in the API link - It can be a business or a personal number, depending on your requirements. Remember to copy the + sign next to the number, and include your country code as well.
- Your text here - Add a custom text to invite your potential guests to keep in touch with you via this WhatsApp Messenger button.
<!-- Following code is for the adding WhatsApp under Book Now button -->
<div class="socialMedia">
<a href="https://api.whatsapp.com/send?phone=+1234567890" class="socialWhatsapp" target="_blank">
<i class="fa fa-whatsapp"></i>
</a>
<p style="font-size: 13px; margin-top: 10px;">Add your text here</p>
</div>
<style>
.socialWhatsapp {
background-color:#25d366;
color:#FFF;
border-radius:50px;
box-shadow: 2px 2px 3px #999;
font-size: 40px !important;
width:50px;
height:50px;
line-height: 0px !important;
margin-top:25px;
}
.fa-whatsapp { margin-top:18px; font-size: 38px !important; }
.socialMedia {
display: none;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
text-align: center;
place-items: center;
}
</style>
<!-- Following code logic will append the icons below the text under Book Now button -->
<script type="text/javascript">
window.addEventListener("load", function(event) {
let social2 = document.querySelector(".socialMedia");
let content2 = document.querySelector(".group-code");
content2.insertAdjacentElement('afterend', social2);
social2.style.display = "grid";
});
</script>
Clickable image preview
Once the steps above are complete, go to your Booking Engine to review the final result and verify your WhatsApp Messenger button. The clickable image will appear below the Book Now button:
Add the following code to the Customize Meta Tags - Gallery Design section in your Cloudbeds PMS, and replace the text in red with your own details:
<a href="https://api.whatsapp.com/send?phone=+1234567890&text=Hello%21%20" class="floating" target="_blank">
<i class="fa fa-whatsapp float-button"></i>
</a>
<style>
.floating {
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
.fa.float-button{
font-size: 40px !important;
margin-top:23px;
}
</style>Floating button preview
The floating button will appear on the bottom right corner of your Booking Engine:
See more customization options for your Cloudbeds Booking Engine.
