Cloudbeds Booking Engine - Add a notification or banner to the Availability Page

Follow

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

  1. Click on Manage (gear icon)
  2. Click Customize the Booking Engine
  3. Enter the Customization Code in the appropriate fields. Find the code for each type of notification in the next sections.

Step 2 - Add Customization Code

The code can be used on both, List and Gallery designs. To know more about your Booking Engine customization, see Customize Booking Engine- Codes for List & Gallery Designs

Option A: Bold banner in the availability window

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:

  1. Copy the following code and paste it in Custom Meta Tags. Depending on your Booking Engine Design Type, input the code in the Gallery Design or List Design field.

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>
  1. 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>
  1. Click Save

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:

  1. In the Custom footer for your hotel booking page, click the language drop-down
  2. Select the desired language. For example, Português (Portuguese)
  3. Copy, paste the code below and replace the text in red by your custom message in Portuguese
  4. 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:

Option B: Pop-up notification

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:

  1. Copy and paste this code in Custom Meta Tags. Depending on your mybookings design type, input the code in the Gallery Design or List Design field. 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: 10%; /* Move the pop-up box to the center */
}
</style>
<div id="popupmodal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h2 class="modal-title">Important message</h2>
      </div>
      <div class="modal-body">
        <h4> 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. </h4>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div> 
  1. 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>
<script src="js/jquery.reveal.js"></script>
  1. Copy the code below and paste it in the Custom footer for your hotel booking page:
<script>
	 $(window).load(function(){
       $('#popupmodal').modal('show');
    });
</script>
  1. Click Save:
Powered by Zendesk