Cloudbeds Booking Engine - Customize Rate Checker, Widget, Date Picker, and Other Elements

Add the  following code in Custom Meta Tags section:

<style>
.rate-check-arrow + .rate-check-container {
width: 284px;
display: block;
}.rate-check-arrow-text {
width: 0px;
padding-right: 0px;
display: none;
}
.rate-check-title, .rate-check-arrow {
background-color: #ff5722 !important;
}
</style>

Examples:

1. Before adding the code
2. Code applied: The rate checker button is the same as search button.

<style>
.rate-check-arrow.arrow-left {
background-image: url(path to your image left) !important;
}
.rate-check-arrow.arrow-left {
background-image: url(path to your image right) !important;
}
</style>

<style>
.acessa_float_left.acessa_float_description {
display: none;
}
</style>

<style>
div.rate-check-content.channel-container > img {
display: none;
}
</style>

Please replace the name in red with your desired name:

<style>
.rate-check-arrow-text {font-size: 0;  padding-right: 0;}
.rate-check-arrow-text::after {content: "Price Comparison";  font-size: 11px;  line-height: 1.25;}
</style>

<style>
.rate-check-prices .room-details .room-channel-details:first-child .room-channel-name {
  font-size: 0;
}
.rate-check-prices .room-details .room-channel-details:first-child .room-channel-name:before {
  content:"Desired text here";
  font-size: 14px;
}
</style>

• To hide a one word channel name:

• To hide a two words channel name:

<style>
#channel-Hotel\ Bonanza {display: none;}
</style>

• To hide Booking.com:

<style>
#channel-Booking\2e com {display: none;}
</style>

• To hide Airbnb (API):

<style>
#channel-Airbnb\20 \28 API\29{display: none;}
</style>

• To hide Hostelworld:

<style>
#channel-Hostelworld\ \&\ Hostelbookers { display: none; }
</style>

<style>
button.rate-check-button.rate-check-learn-more {font-size: 0;}
/*change text content below*/
button.rate-check-button.rate-check-learn-more::after {content: "Text go here";  font-size: 15px;}
</style>

Add the following code to the Custom footer section and copy to all the languages needed:

<script>
document.addEventListener('DOMContentLoaded', function(event) {
  document.querySelector(".rate-check-why .rate-check-content").innerText = "test";
}, false);
</script>

.prices-without-taxes {font-size: 0;}
.prices-without-taxes:after {font-size: 14px;  content: 'YOUR TEXT HERE';}

Add the code below in the Custom Meta Tags section to change the color of the check-in and check-out dates in the Booking Engine calendar.

Replace the color code (in red) with your preferred one. Learn more here.

<style>
/* Code below changes the background color of today's date - Only visible if the check-in date is in future. Change the hex code #256D85 to any other hex color code */
.ui-datepicker .days-container .today { border: 1px solid #256D85; background: #256D85; color: #fff; } 

/* Code below changes the background color of the check-in date. Change the hex code #5DA7DB to any other hex color code  */
.ui-datepicker .days-container .startDate { border: 1px solid #5DA7DB; background: #5DA7DB; } 

/* Code below changes the background color of the check-out date. Change the hex code #5DA7DB to any other hex color code  */
.ui-datepicker .days-container .endDate { border: 1px solid #5DA7DB; background: #5DA7DB; } 

/* Code below changes the background color of the date range. Change the hex code #81C6E8 to any other hex color code  */
.ui-datepicker .days-container .range { border: 1px solid #81C6E8; background: #81C6E8;  }
</style>

Add this code to Custom footer for your hotel booking page section:

Use this code to change the color of the default restriction blue dot. Copy it and paste it in the Custom Meta Tags section and replace the code in red with the desired color code.

Read more about color codes here.

<style>
.ui-datepicker .days-container .day .dot, .footer-content .notes .dot { background: #A8E890 !important; }
</style>

To remove the restriction dots from the applicable date, copy the code below, and paste it in the Custom Meta Tags section:

<style>
.ui-datepicker .days-container .day .dot, .footer-content .notes { display: none !important; }
</style>

Add this code to your website within a <div> </div> element:

<iframe src="YOUR_BOOKINGENGINE_URL" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>

Add this code to the footer of your web page:

<!-- Add script to auto-resize the iFrame -->
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"></script><script>window.iFrameResize({}, '#cloudbeds')</script>

Background

When sharing the booking engine link on Facebook, it will automatically scan the HTML and try to generate a nice looking snippet, usually it adds the text Cloudbeds uses PCI-Compliant security.

Replace the text

Override the text by adding specific markup tags that Facebook is looking for. Add the following code to the booking engine Custom Meta Tags section in Cloudbeds PMS:

Prevent the Google search results from displaying a direct link to the booking engine with the code below. Add the following code in the Custom header section:

<script>
$(document).ready(function () {
$('head').append('<meta name="googlebot" content="noindex" />');
$('head').append('<meta name="robots" content="noindex" />');
});
</script

Add the following two lines of code in the Custom Meta Tags Section:

<meta name="robots" content="noindex">
<meta name="googlebot" content="noindex">

1. Add the following code in Custom Meta Tag section:

2. Add the following code in Custom footer for your hotel booking page and replace the text in red:

<script>
document.getElementsByClassName('logo')[0].addEventListener('click', function() {window.location.href = 'http://www.website-name.com';});
</script>

By default, the Booking Engine shows all the available currencies in the system, for the potential guests to select their preferred ones.

To limit the number of currencies displayed (and show only the required ones):

1. Copy the code below and paste it in the Custom Meta Tags field of the Customize Booking Engine section on Cloudbeds PMS.
2. Replace the number in red, in parenthesis: #currency-selector > li:nth-child(147), with the currency order number that corresponds to the currencies you would like to display.

By default, the system shows the maximum number of adults and children to be chosen in the column based on the maximum occupancy setup for that room type.  

Example:

• The Family Room has a maximum occupancy of 6 guests
• The Adults column will display 6 adults and the Children column will display 5 children (children must be accompanied by an adult).
• This way guests can choose any number of adults and children in total of 6 (e.g guest can choose 2 adults and 4 children or 4 adults with 2 children, etc).

To limit the number of adults and children who can sleep in that room, add the codes below to the Custom Meta Tags section:

• Change the number in the parenthesis (n+5) and (n+4) based on the order of adults and children you want to hide. In this example, from total of 6 guests, there could only be maximum 4 adults and 2 children:
  • (n+5)= The fifth adult onward will not be shown
  • (n+4)= The third child onward will not be shown (in the drop-down, number of children start from 0)

• If the Allow guests to book specific accommodations on the Booking Engine option is enabled, use the code below:

<style>
[data-room-type-id="Room Type ID"] .adults.custom-adults ul li:nth-child(n+5), [data-room-type-id="Room Type ID"] .children.custom-children ul li:nth-child(n+4) {
display: none;
}
</style>

• If the Allow guests to book specific accommodations on the Booking Engine option is disabled, use the code below:

<style>
[data-room-type-id="Room Type ID"]  .av-adults .dropdown-menu ul li:nth-child(n+5), 
[data-room-type-id="Room Type ID"] .av-children .dropdown-menu ul li:nth-child(n+4) {
display: none;
}
</style>

To apply multiple codes at once (e.g Select 2 Adults automatically  & Select a rate plan automatically), use different intervals for each code (one code with 1000 ms* and the other with 2000 ms, etc).

See where the interval is placed below:

When loading the booking engine, 2 adults/guests will be automatically selected:

1. Copy and paste the following code in the Custom Header section:

2. Save the following code in the Custom Footer section

When loading the booking engine, 2 adults/guests will be automatically selected for a specific room type.

Save the following code in the Custom Footer section and replace the room ID text in red, with the desired Cloudbeds room type ID:

<script>
window.addEventListener("load", function() {
setTimeout(function(){
var adultNumber = document.querySelector("[data-room-type-id='room id'] div.av_roomtype>div.av-info>div.av-details>div>div.av-adults>div>div>ul>li:nth-child(2)>a")
adultNumber.click();
}, 2000);
});
</script>

To select 2 adults automatically (also when the guests change the reservation dates), copy the code below, replace the room ID text in red, and paste it after the code above (in the same Custom Footer section):

<script>
/* ------------------- Select the rooms on date change ------------------- */
$(window).on("hashchange", function() {
setTimeout(function() {
var adultNumber = document.querySelector("[data-room-type-id='room id'] div.av_roomtype>div.av-info>div.av-details>div>div.av-adults>div>div>ul>li:nth-child(2)>a")
adultNumber.click();
},2000);
});
/* -------- Select the rooms on date change ends here ------ */
</script>

Save the following code in the Custom Footer section and replace the number 2 with any other number of the sequence of other rate plans. Example: if the desired rate plan to be loaded is in the sequence number 3 from the standard rate, replace the number 2 with 3.

The sequence means the numbering of the package on your booking engine page, as shown below:

<script>
/* ----------------------- Select the rate plan on load ----------------------- */
 $(document).ready(function () {
$(window).load(function() {
    setTimeout(function() {  $('div.av_roomtype>div.av-info>div.av-rates>div.av-roomrate-wrapper>div:nth-child(2)>div.md-radio>input[type=radio]').trigger('click');
    },2000);
});
}); 
/*  ----------------------- Select the rooms on load ends here ----------------------- */
</script>

Save the following code in the Custom Footer section 

• Replace XXXX with the Cloudbeds room type ID
• Replace the number 2 with any other number of the sequence of other Rate Plans.

Example: If the desired rate plan to be loaded is in the sequence number 3 from the standard rate, replace the number 2 with 3.

The sequence means the numbering of the package on the booking engine page as shown below:

<script>
/* ----------------------- Select the rate plan for specific roomtype on load ----------------------- */
 $(document).ready(function () {
$(window).load(function() {
    setTimeout(function() {  $('[data-room-type-ID="XXXX"] div.av_roomtype>div.av-info>div.av-rates>div.av-roomrate-wrapper>div:nth-child(2)>div.md-radio>input[type=radio]').trigger('click');
    },2000);
});
}); 
/*  ----------------------- Select the rooms on load ends here ----------------------- */
</script>

Save the following code in the Custom Footer section and replace the XXXX with the Cloudbeds room type ID.

<script>
/* ----------------------- Select the rooms on date change ----------------------- */
$(window).on("hashchange", function() {
setTimeout(function() {
$('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
});
/* ----------------------- Select the rooms on date change ends here ----------------------- */
</script>
<script>
/* ----------------------- Select the rooms on load ----------------------- */
$(window).load(function() {
setTimeout(function() {
$('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
});
/* ----------------------- Select the rooms on load ends here ----------------------- */
</script>