Customize Cloudbeds Booking Engine - Code for both List Design (Reference only) and Gallery Design

Follow

Cloudbeds Booking Engine offers a number of customization options for those who are either familiar with HTML/CSS or employ a web-designer.

On this article you can find the codes applicable for both Gallery and List Designs (Reference only).

  • The List Design is no longer available on the Booking Engine as of September 1st, 2022. Use this code as a reference only, to transfer your customization code from the List Design to the Gallery Design. Find more details here.
  • Note that these Gallery Design customization code may be affected by future improvements applied to the Booking Engine.

Contents

The following code can be added to the Custom Meta Tags field to display your Booking Engine custom design. See: Customize Cloudbeds Booking Engine - How to add HTML and CSS Custom Meta Tags

Change text styles (font, color, size)

Change all fonts
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{
font-family:'Open Sans', "Arial", sans-serif;
}
/* Calendar Icon - Don't Change or Remove */
i.fa
{
font: normal normal normal 14px/1 FontAwesome !important;
}
</style>

If no arrow icon is shown on the calendar after inserting this code and applying another font to all the tags, remove the <span> tag from the code and save the changes.

Change color of Your Reservation text

Add the following code in the' Custom Meta Tag' section:

<style>
div.col-md-3.reserve_info > h2 {
color: #FF000F;
}
</style>
Change the color of the blue line under Your Reservation
<style>
.bold_blue { background: red; }
</style>
Change hotel name font, color

Add the code below to Custom Meta Tags section and replace the color and font in red.

<style>
/* Hotel Name Font */.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif !important;
}
</style>
Change font for the Search button

Add the code below to Custom Meta Tags section and replace the font name in red.

<style>
/* Change Search Button */
.btn.btn-warning.btn-block {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 12px;
} 
</style>
Slack | Saurabh Satralkar | Cloudbeds - Google Chrome
Change font for the Book Now and Select Accommodations buttons
  • color - changes the color of font for word BOOK NOW and Select Accommodation
  • background - changes the color of the button
<style>
/* Buttons font */.green.btn,
.green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active {
background:#da1176!important;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 12px;
color: #b7f9fd;
}
</style>
Change size/style of text appearing when there is no availability

Add the code below to Custom footer section and duplicate it for all the needed languages:

<style>
.message_container 
{font-size: 16px;
color: #ff5722; 
font-weight: normal; /*font weight - normal, bold, light, etc...*/  
font-style: normal; /*font style - normal, italic*/}
</style>
Change font style of property information

Add the following code on the Custom Meta Tag section and replace the red text with the desired font name

<style>
/*Header*/
.caption {
font-family: "Georgia" !important;
}/*Info inside section*/
.map_info {
font-family: "Courier New" !important;
}
</style>
Change the font size and text color of the Property Information

Replace the font-size and color ID in red, on the code below:

<style>
div.portlet-body h6:nth-child(n) {
font-size: 18px;
color: #0B468C;
}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Change font in date picker (when selecting check-in and check-out)

Paste the code below in the Custom Meta Tags (Gallery Design) section, and replace the font name.

<style>
//*change font (Calendar title)*//*change font (Calendar days/dates)*/
#ui-datepicker-div {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;}
</style>
Change selected room price font and color

Paste the code below in the Custom Meta Tags (Gallery Design) section, and replace the data in red.

Each color has a different code. If you need any reference, use this guide to find your color code for this customization.

<style>
/*Room price*/
.selected_rooms_price {
font-family: 'Roboto',sans-serif !important;
font-style: italic;
    font-size: 30px;
    color: #da26b2;
    margin-top: 5px;
    text-align: center;
}   
</style>
Change the room name font, size and color

Paste the code below in the Custom Meta Tags (Gallery Design) section, and replace the data in red.

Each color has a different code. If you need any reference, use this guide to find your color code for this customization.

<style>
/*Room names*/
.av-name {
font-family: 'Belleza', sans-serif !important;
    font-size: 30px;
    color: #da26b2;}
</style>

 

DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome

Change colors/backgrounds of elements, buttons

There is an automated customization function which will help you to easily change the following:

  • Background Color
  • Header Color
  • Navigation Arrows
  • Search Button
  • General Button Color

Check How to use Color Pickers for the Cloudbeds Booking Engine for more details.

Add an image to the background

To add a background image to the main area of the booking engine use the code below:

  • You need to have background image URL, it should end with .jpg.
  • If you have an image on PC, upload it to any image hosting website, like Google Photos (Drive) and then get the image URL.
  • Remember to keep this image as public in the hosting website.

1. Add Background and Keep Header Line

Paste this code in the Custom Meta Tags (Gallery Design) section:

<style>
.add_white {background: transparent;}
.container1{background-color: transparent;}

/* Change URL here */
.container2 {background: url("http://addbackgroundurlhere.com/file.jpg"); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-color:#ffffff; }
.chooser, .property center {opacity: 1}
</style>

2. Add Background and Remove Header Line

To show the background image on the full page paste this code instead, in the Custom Meta Tags (Gallery Design) section:

<style>
/* Background to the full page */ 
.page-boxed {
background: url("http://addbackgroundurlhere.com/file.jpg") !important;
background-position: center center;
background-attachment: fixed !important;
background-repeat: no-repeat;
background-size: cover !important;
background-color:#ffffff; 
}
.chooser, .property center {opacity: 1}

/* Add  Transparency */
.page-footer, .page-header.navbar {background: transparent; } /* Transparent Header & Footer */ 
.container1, .container2 {background-color: transparent;} /* Transparent Main Background */
</style>
Change the background color of the promo code section

Add the code below in the Custom Meta Tags (Gallery Design) section, and replace the color code #091b48 for your desired color code:

Each color has a different code. If you need any reference, use this guide to find your color code for this customization.

Replace the color code in red with the required one:

<style>
.rooms_book {
    background: #091b48;}
</style>
Change the color of the promo code search bar

Add the code below in the Custom Meta Tags (Gallery Design) section, and replace the color code #efc0ff for your desired color code:

Each color has a different code. If you need any reference, use this guide to find your color code for this customization.

<style>
#promo_code_input {
background-color: #efc0ff;
}
</style>
Change background of available dates in date picker

Add the code below in the Custom Meta Tags (Gallery Design) section, and replace the color code #ffcc00 for your desired color code:

Each color has a different code. If you need any reference, use this guide to find your color code for this customization.

<style>
/*Changes background of available dates*/
.legend.av {
    background: #ffcc00;
}
.half_year .ui-datepicker td, .half_year_popup .ui-datepicker td, .one_month .ui-datepicker td {
  background-color: #ffcc00;
}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Change the color of the round box where the check-marks are surrounded

Add the following code in both Custom Meta Tags and Custom Meta Tags (Confirmation Page Only) sections. Change the the #007D8A code to any other desired color code:

Each color has a different code. If you need any reference, use this guide to find your color code for this customization.

<style>
.bg-green-jungle {
border-color: #007D8A !important;
background: #007D8A !important;
}
</style>
Change the calendar icon color when your property doesn't have availability

By default, when your property doesn't have availability, the following screen will be displayed, and the calendar icon has red color.

Add the following code into Custom Meta Tags section to change the icon color. Replace the color name with the desired color or use a code (example – #00FF00).

Each color has a different code. If you need any reference, use this guide to find your color code for this customization.

<style>
div.message_container:before
{
color: Green; /*You can add your color here*/
}
</style>
yCxTpIHP3fBvKxXkiMn87RcRc (1137×627) - Google Chrome
Change background color of the no availability message

When your property doesn't have availability, the following screen will be displayed, and highlighted area is white color by default.

Add the following code into Custom Meta Tags section to change the background color. Replace the highlighted code with the desired color name / code (example – #00FF00).

Each color has a different code. If you need any reference, use this guide to find your color code for this customization.

<style>
div.message_container
{
background-color: #D9D2E9; /*You can add your color here*/
}
</style>

Hide or remove elements

Remove currency switch
<style>
.last.dropdown {display:
none!important;
}
</style>
Remove language and currency switches
<style>
#lang_currency_switchers { display:
none;
</style>
Remove Availability Calendar
<style>
/* Remove Availability Calendar */

.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}
</style>
Remove property address and contacts
<style>
/* Remove Address */ 
.map_info {display:none;} 
</style>
Remove the Booking Engine map

See this article to hide your Booking Engine map with only one click: Cloudbeds Booking Engine - How to Hide or Replace the Booking Engine Map

<style>
/* Remove Map */ 
#map_canvas {display:none;} 
</style> 
Remove Check-in/Check-out policies
<style>
.checkin-checkout-terms-block{
display: none;
}
</style>
Remove Cancellation Policies
<style>
.checkin-checkout-terms-block, .property_info h5, .cancellation_policy {
display: none;
}
</style>
Remove the Property Information section

Insert the following code in the Custom Meta Tags field:

<style>
.portlet.property_info>.portlet-title {
   display: none;
}.portlet.property_info>.portlet-body {
   display: none;
}
</style>
Remove the Have a promo code? section

Insert the following meta code in the Custom Meta Tags field:

<style>
.show_promo_code{
display: none;
}
</style>
Hide certain Property Information (address, phone, email)

Go to the booking engine and scroll down to the Property Information section, the fields with contact details are basically a numeric list on CSS side.


On the following example, Property Name is the field number 1, Address 1 is the field number 2 and so on.

To hide certain fields, add the following code and specify the number of field to hide after the code p:nth-child in brackets.


Example below, the 8th field on the list (Email) is hidden:

<style>
div.page-container.property_info > div > div > div.portlet-body > div.map_info > p:nth-child(8) {display:none; }
</style>
Remove extra person charge from Your Reservation section

Insert the following code in the Custom Meta Tags section:

The code below is recommended for properties with dorm beds only (no private rooms)

<style>
.reserve_total .row.total_adults, .reserve_total .row.total_child {
 display: none;
}
</style>
Remove Child and Extra Child row from the reservation summary

Insert the following code in the Custom Meta Tags section:

<style>
.row.total_child, .nb_kids {
 display: none;
}
</style>
Remove the Extra Adult row from the reservation summary

Insert the following code to Custom Meta Tags section:

<style>
.row.total_adults {
display: none;
}
</style>
Remove Children column on the reservation confirmation page

Insert the following code in the Custom Meta Tags (Confirmation Page Only) section:

<style>
.kids_column.book_child, .book_child {
display: none;
}
</style>
Hide Restrictions Apply option
<style>
.legend_booking>div>div:nth-child(4) {
display: none;
}
</style>
Hide Advance Amount on the Reservation Summary

Add the following code in Custom Meta Tags section and replace the sentence in red

<style>
.advance_amount {
visibility: hidden !important;
display: none;
}
</style>
Checkout - DEMO - Karina's Hostel - Google Chrome
Remove Maximum number of nights from the Calendar

Add the following code in Custom Meta Tags section to remove the maximum number of nights allowed from the date picker drop-down:

<style>
.max_l_yes {
display: none !important;
}
</style>
Slack | Threads | Cloudbeds | 36 new items

Replace the default text with custom text

This section shows the code which replace the default booking engine text with your own custom text.

The text entered will be displayed:

  • Similarly for all languages on the booking engine (those which are available), if code is entered to Custom Meta Tags section.
  • For the selected language only, if the code is entered to sections Customer header/footer for your hotel booking page.
Replace the text Thank you! on the reservation confirmation page
  • Add the code to the Custom Meta Tags section
  • The phrase/word which replaces the original will be displayed for all languages.
<script type="text/javascript">
document.querySelector('.medium.blue').innerHTML = 'Insert Text Here';
</script>
Replace the text Search on the search button
  • Add the code to the Custom Meta Tags section
  • The phrase/word which replaces the original will be displayed for all languages.
<style>
.check_availability_group .btn {
font-size: 0;
}
.check_availability_group .btn:after {
content: "Your text here";
font-size: 15px;
}
</style>
Replace Your Reservation text with any other text
  • Add the code to the Custom Meta Tags section
  • The phrase/word which replaces the original will be displayed for all languages.
<style>
div.col-md-3.reserve_info > h2 {
font-size: 0;
}
div.col-md-3.reserve_info > h2:after {
content: "Your text here";
font-size: 27px;
}
</style>
Replace the text Checkout to any other text throughout the Booking process (Main page and Confirmation Page)

Add this code to the Custom Footer field:

<script type="text/javascript">
// Change the Checkout text to any other text
document.querySelector("#wizard > ul > li.col-md-6.col-sm-6.second > span > b").innerHTML = 'Enter your text here';
</script>
<script type="text/javascript">
// Change the Checkout text to any other text on Confirmation Page
document.querySelector("#wizard > ul > li:nth-child(2) > span > b").innerHTML = 'Enter your text here';
</script>
Replace the texts Adults/Children/Extra Adults/Extra Children with any other text in the reservation summary

Add the code to Custom Footer field:

<script type="text/javascript"> 
function ChangeDefaultTextReservationSummary() {
	if (window.jQuery) {
		setInterval(function() {
			// Checkout page
			$(".col-md-3.reserve_info").each(function() {
                                $(this).html($(this).html().replace("Adults", "Guests"));
				$(this).html($(this).html().replace("Children", "Kids"));
                                $(this).html($(this).html().replace("Extra Adults", "Extra Guests"));
				$(this).html($(this).html().replace("Extra Child(ren)", "Extra Kids"));
			});
		}, 500);
	} else {
		setTimeout(function() { ChangeDefaultTextReservationSummary() }, 50);
	}
}
ChangeDefaultTextReservationSummary();  
</script>
  • To leave one of the text as it is (without any change), just comment out the code.
  • Example: To leave the Children text as it is (and not changing it to other text), comment out by putting // (two forward slashes) in front of the code line (example code below)
// $(this).html($(this).html().replace("Children", "Kids"));
Replace the text Choose a Room to any other text on Confirmation Page

Add the code to the Custom Footer field:

<script type="text/javascript">
// Change the Choose a room text to any other text on Confirmation Page
document.querySelector("#wizard > ul > li:nth-child(1) > span > b").innerHTML = "Enter your text here";
</script>
Replace the text Adults with Guests on Confirmation Page under the Accommodations table

Add the code to Custom Meta Tags (Confirmation Page Only):

<style>
div.table-responsive.visible-lg-block.visible-md-block > table > thead > tr > th:nth-child(4) {
font-size: 0;
}
div.table-responsive.visible-lg-block.visible-md-block > table > thead > tr > th:nth-child(4):after {
content: "Guest(s)";
font-size: 14px;
}
</style>
Replace the Availability text (above the search button) with View Availability Calendar

Add the code below to Custom footer for your hotel booking page and duplicate for all desired languages:

<script type="text/javascript">
document.querySelector('.show_avail_calendar a').innerHTML = 'View Availability Calendar';
</script>
Replace the Select Accommodations text inside the button

This code is applicable for properties which have the Allow guests to book specific accommodations on the booking engine option enabled.

<style>
button.btn.green.btn-block.select-accommodation-btn {
  font-size: 0;
}
button.btn.green.btn-block.select-accommodation-btn:before {
  font-size: 12px;
  content: "text";
}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Replace the Book Now text inside button

Add this code to Custom footer for your hotel booking page and duplicate for all desired languages:

<script type="text/javascript">
document.querySelector('.green.btn.disabled').innerHTML = 'Insert Text Here';
</script>
button.btn.green.btn-block.select-accommodation-btn {
  font-size: 0;
}
button.btn.green.btn-block.select-accommodation-btn:before {
  font-size: 12px;
  content: "text";
}
Replace Have a Promo Code? with another text

Enter the code to Custom Meta Tags section (will be displayed similarly for all languages):

<style>
.show_promo_code {font-size: 0;} 
.show_promo_code a:after {content:"HAVE A DISCOUNT CODE?";   
font-size: 13px; 
color: red;
}
</style>
Replace the Choose a Room text with custom text

Enter the code below to Custom footer for your hotel booking page section. The phrase/word which replaces the original will be displayed for all languages.

<script type="text/javascript">
document.querySelector("#wizard > ul > li.col-md-6.col-sm-6.active.first > span > b").innerHTML = 'INSERT TEXT';
</script>
Replace Grand Total to any other text on the Reservation Summary

Add the following code in Custom Meta Tags section and replace the sentence in red

<style>
div.grand_total > div > div.col-md-4.col-sm-4.col-xs-6 > p {
font-size: 0;
}
div.grand_total > div > div.col-md-4.col-sm-4.col-xs-6 > p:after {
content: "YOUR TEXT HERE";
font-size: 13px;
}
</style>
Checkout - DEMO - Karina's Hostel - Google Chrome
Replace the text Adults to any text on a specific room type

Add the code below to the Custom Meta Tags section and use the code line [data-room-type-id="Room ID here"] before the code as shown below.

To confirm your Cloudbeds PMS room type ID, see: How to Find the Room Type ID on Cloudbeds PMS

<style>
[data-room-type-id="Room ID here"] .av-room-options .av-adults .type_of_room {
font-size: 0 !important;
}
[data-room-type-id="Room ID here"] .av-room-options .av-adults .type_of_room:after {
content: "Insert your text here";
text-align: center;
font-size: 10px;
} 
</style>
Replace the Advance Amount text to any other text on the Reservation Summary

Add the following code in Custom Meta Tags section and replace the sentence in red:

<style>
div.advance_amount > div > div.col-md-4.col-sm-4.col-xs-6 > p {
font-size: 0;
}
div.advance_amount > div > div.col-md-4.col-sm-4.col-xs-6 > p:after {
content: "Deposit 50%";
font-size: 13px;
}
</style>
Checkout - DEMO - Karina's Hostel - Google Chrome
Replace the Contact Permission and the message below it to any other text

Add the following code in Custom header for your hotel booking page section and replace the sentence in red (for translated text, save it in the respective custom header section for translations).

<style>
div.opt-in-confirmation > div > div > h4 { font-size: 0; }
div.opt-in-confirmation > div > div > h4::after { content:"Write your text here"; font-size: 17px; }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
$("label[for=is_opt_in]").each(function() {
     $(this).html($(this).html().replace("Please let us know if you would like us to contact you or not by selecting one of the options below", "Write your text here")); });
});
</script>
Replace the default text under the Bank Transfer method

Add the code below to the Custom Meta Tags section and replace the text in red with your property requirements about payments with the bank transfer method:

<style>
div.payment_method div.creditcard_info.choose_bank div.row.ebanking-default-instruction div {
font-size: 0;
}
div.payment_method div.creditcard_info.choose_bank div.row.ebanking-default-instruction div:after {
content: "Your text goes here. If you have an apostrophe s in the text, make sure to add a blackward slash before it, so it work\'s as intended"; 
font-size: 13px;
}
</style>
Adding Message at the end of the total amount on Confirmation Page

Add the code under Custom footer for your hotel booking page and replace the text in red

<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('p');
NewEl.innerHTML = '<br> Your message goes here......... As long as you need.... </br>';
NewEl.className += "text-center";
NewEl.style.fontSize = '15px';
NewEl.appendAfter( document.querySelector('div.col-md-3.reserve_info'));
</script>

Replace the text message under Payment Methods

Change Bank Transfer to any other text

Add the following code in Custom Meta Tags section and replace the text in red.

<style>
label[for=ebanking] > a {
font-size: 0;
}
label[for=ebanking] > a::after {
content: 'Cash on Arrival';
font-size: 14px;
}
</style>
Checkout - DEMO - Karina's Hostel - Google Chrome
Checkout - DEMO - Karina's Hostel - Google Chrome
Change Credit Card to any other text

Add the following code in Custom Meta Tags section and replace the text in red:

<style>
label[for=card] > a {
font-size: 0;
}
label[for=card] > a::after {
content: 'Credit/Debit card';
font-size: 14px;
}
</style>
Checkout - DEMO - Karina's Hostel - Google Chrome
Checkout - DEMO - Karina's Hostel - Google Chrome
Change PayPal to any other text

Add the following code in Custom Meta Tags section and replace the text in red:

<style>
label[for=rPayPal] > a {
font-size: 0;
}
label[for=rPayPal] > a::after {
content: 'Pay with Credit/Debit card via PayPal';
font-size: 14px;
}
</style>
Change the text Billing Zip and Billing State to any other text

Add the following code in Custom Meta Tags section and replace the text in red:

<script>
document.addEventListener("DOMContentLoaded", function(event) { 
$("label[for=zip_billing_address]").each(function() {
     $(this).html($(this).html().replace("Billing Zip", "Write your text here")); });
$("label[for=state_billing_address]").each(function() {
    $(this).html($(this).html().replace("Billing State", "Write your text here")); });
});
</script>

Replace default icon with custom icons

Replace the icons in front of the amenities

Add the following code under Custom Meta Tags section.

As a suggestion, the codes for icons can be found on this website. Those code numbers can be replaced with the XXXX in code line content: " \XXXX" (keep the slash /)

<style>
.amenities_tab li::before, ul.amenities li::before{
content: " \XXXX ";
color: #3267B8;
}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome

Resize photos/elements

Increase the size of add-ons photos
@media screen and (min-width: 992px) {
.about .col-md-4 {
  min-width: auto;
  width: 40%;
}
.about .col-md-8 {
  width: 60%;
}
.about .img {
  width: 100%;
  height: auto;
  padding-top: 50%;
}
.room_services .img div {
  top: 0;
  position: absolute;
}
Customize mybookings - HTML and CSS Custom Meta Tags – myfrontdesk - Google Chrome
Customize mybookings - HTML and CSS Custom Meta Tags – myfrontdesk - Google Chrome

Date Picker and Availability Calendar

Change availability calendar month background and border
<style>
.ui-widget-header, .ui-datepicker-title, .one_month .ui-datepicker-header, .half_year .ui-datepicker-header, .half_year_popup .ui-datepicker-header, .one_month .ui-datepicker-header{ 
color: #fff;
background: #cfeef8;
border: 1px solid #e0a240;}
</style>
Change colors in Date Picker (selector of check-in/check-out)
  • background: changes the background color
  • color: changes the font color
<style>
/*Changes highlighted dates - checkin and checkout*/
.ui-datepicker .ui-state-checkin, .ui-datepicker .ui-state-checkin .ui-state-default, .ui-datepicker .ui-state-checkout, 
.ui-datepicker .ui-state-checkout .ui-state-default {
background: #f48224;  
color: #ecfd02;
}

/*Changes dates style between checkin and checkout*/
.ui-state-default {
background: #f2f7cc;
color: #4b694c;
}
</style>
Сhange the color of the restrictions triangle on the availability calendar
  • Each color has a different code. We used black (which color code is #000000) in the example below. To add your color, replace the code #000000 to your desired color.
  • Use this guide to find your color code.

Add the following code in the Custom Meta Tags section:

<style>
.pink {position: relative; }
.pink:after {content: ""; position: absolute; border: 4px solid #000000; top: 0; right: 0; border-left: 4px solid transparent; border-bottom: 4px solid transpa
rent;}
</style>
Remove the restrictions triangle on the availability calendar

Add the following code in the Custom Meta Tags section:

<style>
.pink { background: none !important; }
</style>
Make the strike-through for unavailable dates more visible on the availability calendar
<style>
/* Following code will apply a strike on the entire table cell for umavailable dates */
.calendar_table tbody>tr>td.unavailable:before {
  content: " ";
  position: absolute;
  top: 50%;
  border-bottom: 1px solid #111;
  width: 100%;
}
</style>
Display availability calendar once user opens the Booking Engine page

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

<script type="text/javascript">
window.addEventListener("load", function(event) {
  setTimeout(function() {
      document.querySelector('.show_avail_calendar a').click();
  }, 1000);
}, false);
</script>

Rate Checker

Open Rate Checker instantly after loading the Booking Engine

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;
}
</style>
Change the Rate Checker button color to be the same as the Search button
<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.
Add your own arrow to Rate checker style
<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>
Hide the Rate Checker
<style>
.rate-check {display:none !important;}
</style>
Hide Book Direct With Us on the Booking Engine widget
<style>
.acessa_float_left.acessa_float_description {
display: none;
}
</style>
Hide the Powered by Cloudbeds within the Rate Checker
<style>
div.rate-check-content.channel-container > img {
display: none;
}
</style>
Rename the Rate Checker

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>
Jing
Jing
Rename Direct Rate
<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>
Jing
Jing
Hide the channels in Rate Checker

When a one word channel name needs to be hidden:

<style>
#channel-Airbnb {display: none;} 
</style>

When a two words channel name needs to be hidden:

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

When Booking.com needs to be hidden:

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

When Airbnb (API) needs to be hidden:

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

When Hostelworld needs to be hidden:

<style>
#channel-Hostelworld\ \&\ Hostelbookers { display: none; }
</style>
Replace the text Learn more with another text on Rate Checker
<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>
Jing
Change the text in the Rate Checker when clicking Learn More

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>
Jing
Jing
Replace the Prices above may or may not include taxes text with custom text
.prices-without-taxes {font-size: 0;}
.prices-without-taxes:after {font-size: 14px;  content: 'YOUR TEXT HERE';}

Facebook / Google

Google Search Result

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

It may take a day or two to show the results on Google Search Engine. Alternatively, the procedure of removing the booking engine link from Google search can be found here.

Widget

Change the look of floating widget

This code should be copied and pasted to your website page. Do not add it to the Booking Engine Customization section.

Change the text message:

/*change text*/
.acessa_float_left.acessa_float_description {font-size:0;}
.acessa_float_left.acessa_float_description:after {content: "text here";  font-size:14px;}

Change the background color:

/*Background color and text color*/
.CloudBedsWidget .float_bg2 {background-color:#7dc3ac;  color:#000;}
Customize the color of the calendar dates and the button of horizontal widget

This code should be copied and pasted to your website page. If the widget is pasted in an iframe, the following styling should be saved right after the widget script. Do not add it to the Booking Engine Customization section.

<style>
/* Background color of the “GO” button */
.widgetHotelsForm .horizontal-widget a {
background: #007d8a!important;
border-color: #007d8a!important;
top: 5px;
}
/* Background color of the selected date */
.CloudBedsDatePicker.pika-single .is-selected .pika-button {
background: #007D8A !important;
}
/* Background color of today’s date when we hover on it */
.CloudBedsDatePicker.pika-single .is-today .pika-button:hover {
background: #007D8A !important;
font-weight: bold;
}
/* Background color of the dates that are hovered around */
.CloudBedsDatePicker .pika-button:hover {
background: #888;
}
</style>
Change the Search text on the widget button to any other text

This code should be copied and pasted to your website page. Do not add it to the Booking Engine Customization section.

<script>
document.querySelector("body > div.CloudBedsWidget.ver- > div > div > a").innerHTML = 'Search';
</script>

iFrame

Check this article to learn more about using an iframe with the Cloudbeds Booking Engine.

Full height iframe (to fit 100% of the content):

The part of the code which contains a link to your booking engine page needs to be updated every time you copy a code from this article.

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>
Powered by Zendesk