Add WhatsApp Messenger to your Booking Engine

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.

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.
  • The following options are only compatible with the Cloudbeds Booking Engine (not compatible with Cloudbeds Booking Engine Plus)
Option 1 - As a clickable image
  1. Go to the Settings page in the Account menu and click on the Booking Engine
  2. Click on the Customize tab
  3. Copy the customization code below and paste it in the Custom Meta Tags section
  4. 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 add your phone number with the country code (without the + sign) or use a website like this one to generate a link; access and copy it, replacing the existing one in full, without erasing the quotation marks
  • Your text here - Add a custom text to invite your potential guests to keep in touch with you via this WhatsApp Messenger button.

Customization code

<!-- Following code is for the adding WhatsApp under Book Now button -->
<div class="socialMedia">
<a href="https://api.whatsapp.com/send?phone=12345678910" class="socialWhatsapp" target="_blank">
<i class="fa fa-whatsapp"></i>
</a>
<p style="font-size: 13px; margin-top: 10px;">Whatsapp - YOUR CUSTOM 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(".secure-sm");
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:

Option 2 - As a floating button

Add the following code to the Customize Meta Tags section in your Cloudbeds PMS, and replace the example phone number 1234567890 with your preferred phone number (the Hello text can also be replaced with your custom text or otherwise removed)

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

Was this article helpful?
2 out of 3 found this helpful

Comments

0 comments

Please sign in to leave a comment.