Add a banner or a pop-up notification in your Booking Engine to let your guests know any important information about your property, such as health and safety measures (COVID-19-related, special procedures, etc), or current external situations (weather alerts, travel requirements, etc).
This article explains the process to add this feature in the Cloudbeds PMS Booking Engine.
To view the settings below, make sure that your user has the corresponding Roles and Permissions
Step 1 - Access Customize Booking Engine
- Click the Account icon
- Go to Settings
- Click on Customize the Booking Engine
Step 2 - Add Customization Code
Choose one of the following options to show your message in the Booking Engine:
A bold banner is an eye-catching colored message that appears in the availability window of your booking engine. Customers will see this banner when looking for dates to stay:
- Copy the following code, paste it in Custom Meta Tags. Change the font color, size, or background color by replacing the texts below in red.
<style>
/* Styling of the message added in the Booking Engine */
div.choose_room div.available_rooms div.col-md-9.padding-left-0.col-sm-12.col-xs-12 h5 {
color: white;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
background-color: red;
font-size: 19px;
}
</style>- Copy the following code and paste it in Custom footer for your hotel booking page
/* Javascript code to add a message in Booking Engine */
<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('h5');
NewEl.innerHTML = "Due to unforeseen circumstances of Covid-19, we will remain closed for the period of May 2020 - June 2020. Apologies for any inconvenience. However, we would like to inform you that we take every precaution to keep our accommodations, beds, common areas cleaned and sanitized twice a week. For any questions, please feel free to reach out to us via email or phone call";
NewEl.appendAfter( document.querySelector('.message_container'));
</script>- Click Save
![[Demo] Bali Jungle, Resort - Customize mybookings](https://media.screensteps.com/image_assets/assets/005/488/660/original/8e449cfe-b1bd-44ff-a370-44bd0fc19b51.png)
Add the Banner in multiple languages
To add a translated text for other languages, duplicate the code you previously entered in the Custom footer for your hotel booking page to the specific field for the desired language:
- In the Custom footer for your hotel booking page, click the language drop-down
- Select the desired language. For example, Português (Portuguese)
- Copy, paste the code below and replace the text in red by your custom message in Portuguese
- Repeat the same process for other languages as needed and click Save.
/* Javascript code to add a message in Booking Engine */
<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('h5');
NewEl.innerHTML = "Due to unforeseen circumstances of Covid-19, we will remain closed for the period of May 2020 - June 2020. Apologies for any inconvenience. However, we would like to inform you that we take every precaution to keep our accommodations, beds, common areas cleaned and sanitized twice a week. For any questions, please feel free to reach out to us via email or phone call";
NewEl.appendAfter( document.querySelector('.message_container'));
</script>
This is how the message would look like when the guest selected the language Português in the booking engine:
Display a pop-up notification on the website that will be shown to your guests the moment they access your Booking Engine. Guests will be able to close the pop-up by clicking (x) or anywhere else outside the notification:
- Copy, paste this code in the Gallery Design Custom Meta Tags and replace the text in red by your custom message:
<style>
/* Styling of the pop-up window */
.modal-open .modal {
z-index: 99999; /* Bring the pop-up in front of all of content*/
margin-top: 5%; /* Move the pop-up box to the center */
}
.modal-header{
display: grid;
grid-template-columns: 14fr 0.5fr;
}
.modal-footer{
background-color: #EAEAEA;
text-align: center;
}
.popup-close {
font-size: 15px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #fff;
background-color: #12234E;
border: 1px solid;
box-shadow: 1px 1px #fff;
}
</style>
<div id="popupmodal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Important message</h2>
<button type="button" class="popup-close" data-dismiss="modal">X</button>
</div>
<div class="modal-body">
<h4> Add your text message here </h4>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
- Copy the code below and paste it in the Custom header for your hotel booking page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>- Copy the code below and paste it in the Custom footer for your hotel booking page:
<script>
$(window).load(function(){
$('#popupmodal').modal('show');
});
</script>
- Click Save:
Learn more about Health and Safety Procedures.
