How to add a notification/banner to your booking engine about COVID-19

Follow
  • You can add a banner or a pop-up notification in your mybookings Booking Engine to let your guests know any important information at your property related to COVID-19.
  • If you can't access the below settings, it means your user has not been granted permission to access the Booking Engine configuration. Please reach out to the Property Owner, they will be able to set up this permission under your user's role. Learn more about Roles and Permissions

1. Go to Customize mybookings page

  1. Click the gear icon 'Manage'
  2. Under the 'Booking Engine' section, select 'Customize mybookings'
  3. Enter the customization code in the appropriate fields. Find the code for each type of notification in the next sections.

2. Add the customization code into the correct fields

A. Displaying a bold banner in the availability window

You can display a banner in the availability window on mybookings page like shown below. You can customize the message you would like your guests to read.

Follow the steps:

  1. Copy the following code and paste it in 'Custom Meta Tags', depending on your mybookings design type, input the code in the 'Gallery Design' or 'List Design' field.

Note: You can change the font color and size, and the background color by replacing the text 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'

Note: You can customize your message by replacing the text in red.

/* 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'
Adding the banner in multiple languages

To add a translated text for other languages, you only need to duplicate the code you previously entered in the 'Custom footer for your hotel booking page' to the specific field for the desired language. Follow the steps:

  1. In the 'Custom footer for your hotel booking page', click the language drop-down
  2. Select the desired language, for example, in this case, Português
  3. Copy and paste the following code and replace the text in red to your custom message in Português:
/* 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. Repeat the same process for other languages as needed, then, click 'Save'

This is how the message would look like when the guest selected the language Português on mybookings:

B. Displaying a pop-up notification on mybookings page

You can also display a pop-up notification on the webpage that will be shown to your guests the moment they access your Booking Engine. The guests will be able to close the pop-up by clicking (x) or anywhere outside the pop-up.

Follow the steps:

  1. Copy the following code and paste it in 'Custom Meta Tags', depending on your mybookings design type, input the code in the 'Gallery Design' or 'List Design' field.

Note: You can customize your message by replacing the text in red.

<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 '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 'Custom footer for your hotel booking page'
<script>
	 $(window).load(function(){
       $('#popupmodal').modal('show');
    });
</script>
  1. Click 'Save'
Powered by Zendesk