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

Follow

In order to make sure your guests are aware of the COVID19 situation at your property, you may add a banner or notification to your booking engine page.

Where to enter the CSS codes

1. In myfrontdesk go to manage > 'Customize mybookings'

2. Enter the code to the mybookings design type which you use (gallery or list design)

3. Enter the customization code to the necessary field (Custom meta tags, Custom header, Custom footer)

1. Adding a notification to your webpage above the Availability section:

a. Add the following code in Custom Meta Tags

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

Note: You can change the color and size of font, and background color here

c. This results in the following message:

2. Adding a pop-up banner to your webpage

a. Add the following code in Custom Meta Tags:

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

b. Add the following code 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>
Powered by Zendesk