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 floating button), allowing your guests to communicate with you more quickly and effectively.

Add WhatsApp Messenger to your Booking Engine

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

<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></<a>

WhatsApp Messenger for your Booking Engine Plus

To add WhatsApp Messenger to your Booking Engine Plus as a floating button, follow the steps below:

1. Go to the Settings page in the Account menu and click on the Booking Engine section
2. Click on the Customize tab
3. Copy the customization code below and paste it into the Custom Meta Tags section.
4. 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** -->

5. Copy the customization code below and paste it into the JavaScript section
6. 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** -->