The Cloudbeds PMS has a new look! As we work to update our knowledgebase some steps in our articles might not match our new design. Click here for more details.

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

Follow

This article includes the code to customize other elements such as the the Rate Checker, the Date Picker or the iFrame in your Cloudbeds Booking Engine.

  • For the Custom Meta Tags applicable code: Use the Gallery Design tab.
  • For color customization: Each color has a different code. If you need any reference, use the Color Picker tool to get your preferred color code.

Customize 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>
Click to copy
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 the 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>
Click to copy
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
  • To hide a one word channel name:
<style>
#channel-Airbnb {display: none;} 
</style>
Click to copy
  • 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>
Replace the text Learn more with another text on the 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';}

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;}
Click to copy

Change the background color:

/*Background color and text color*/
.CloudBedsWidget .float_bg2 {background-color:#7dc3ac;  color:#000;}
Click to copy
Customize the color of the calendar dates and the button of the 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>

Date Picker and Availability Calendar

Change colors in Date Picker (selector of check-in/check-out)
  • background: changes the background color
  • color: changes the font color

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>
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('.button-container .availability').click();
  }, 1000);
}, false);
</script>
Click to copy
Сhange the color of the restrictions dot on the Availability Calendar

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>
Remove the restrictions dot on the Availability Calendar

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>

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

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.

Other Customization Options

Reload Booking Engine when the booking is complete by clicking on the hotel logo on top
  1. Add the following code in Custom Meta Tag section:
<style>
img.logo{
cursor: pointer;
}
</style>
Click to copy
  1. 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>
Limit the Number of Currencies displayed in the Booking Engine

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(104), with the currency order number that corresponds to the currencies you would like to display.

The number in parenthesis refers to the order of the existing currencies in the Booking Engine. Review to the table below to find the currency order number that corresponds to the currencies to be displayed.

<style>
/* ----------------------------------Hide all the currencies ----------------------------------*/

#currency-selector > li {
 display: none;
}
/* ----------------- ----------------- ----------------- ----------------- ----------------- -----------------*/


/* ---------------------------------- Display only USD, MXN & EURO ----------------- ----------------- -----------------*/

#currency-selector > li.selected, #currency-selector > li:nth-child(104), #currency-selector > li:nth-child(47) {
 display: block;
}

/* ----------------- ----------------- ----------------- ----------------- ----------------- ----------------- -----------------*/

</style>
Click to copy

Booking Engine Currency Order Numbers

Currency Order Number Currency Code and Name
1 AED - Utd. Arab Emir. Dirham
2 AFN - Afghanistan Afghani
3 ALL - Albanian Lek
4 AMD - Armanian Dram
5 ANG - NL Antillan Guilder
6 AOA - Angolan Kwanza
7 ARS - Argentine Peso
8 AUD - Australian Dollar
9 AWG - Aruban Florin
10 AZN - Azerbaijan New Manat
11 BAM - Bosnian Mark
12 BBD - Barbados Dollar
13 BDT - Bangladeshi Taka
14 BGN - Bulgarian Lev
15 BHD - Bahraini Dinar
16 BIF - Burungi Franc
17 BMD - Bermudian Dollar
18 BND - Brunei Dollar
19 BOB - Bolivian Boliviano
20 BRL - Brazilian Real
21 BSD - Bahamian Dollar
22 BTC - Bitcoin
23 BTN - Bhutan Ngultrum
24 BWP - Botswana Pula
25 BYN - Belarusian Ruble
26 BZD - Belize Dollar
27 CAD - Canadian Dollar
28 CDF - Congolese Franc
29 CHF - Swiss Franc
30 CLF - Chilean Unidad de Fomento
31 CLP - Chilean Peso
32 CNY - Chinese Yuan Renminbi
33 COP - Colombian Peso
34 CRC - Costa Rican Colon
35 CUC - Cuban Convertible Peso
36 CUP - Cuban Peso
37 CVE - Cape Verde Escudo
38 CZK - Czech Koruna
39 DJF - Djibouti Franc
40 DKK - Danish Krone
41 DOP - Dominican Republic Peso
42 DZD - Algerian Dinar
43 EGP - Egyptian Pound
44 ERN - Eritrean Nakfa
45 ETB - Ethiopian Birr
46 EUR - Euro
47 FJD - Fiji Dollar
48 FKP - Falkland Islands Dollar
49 GBP - British Pound
50 GEL - Georgian Lari
51 GGP - Guernsey Pound
52 GHS - Ghanaian New Cedi
53 GIP - Gibraltar Pound
54 GMD - Gambian Dalasi
55 GNF - Guinea Franc
56 GTQ - Guatemalan Quetzal
57 GYD - Guyanese Dollar
58 HKD - Hong Kong Dollar
59 HNL - Honduran Lempira
60 HRK - Croatian Kuna
61 HTG - Haitian Gourde
62 HUF - Hungarian Forint
63 IDR - Indonesian Rupiah
64 ILS - Israeli New Shekel
65 IMP - Isle of Man Pound
66 INR - Indian Rupee
67 IQD - Iraqi Dinar
68 IRR - Iranian Rial 
69 ISK - Iceland Krona
70 JEP - Jersey Pound
71 JMP - Jamaican Dollar
72 JOD - Jordanian Dinar
73 JPY - Japanese Yen
74 KES - Kenyan Shilling
75 KGS - Kyrgyzstanian Som
76 KHR - Cambodian Riel
77 KMF - Comoros Franc
78 KPW - North Korean Won
79 KRW - South Korean Won
80 KWD - Kuwaiti Dinar
81 KYD - Cayman Islands Dollar
82 KZT - Kazakhstan Tenge
83 LAK - Lao Kip
84 LBP - Lebanese Pound
85 LKR - Sri Lanka Rupee
86 LRD - Liberian Dollar
87 LSL - Lesotho Loti 
88 LYD - Libyan Dinar
89 MAD - Moroccan Dirham
90 MDL - Moldovan Leu
91 MGA - Malagasy Ariary
92 MKD - Macedonian Denar
93 MMK - Myanmar Kyat
94 MNT - Mongolian Tugrik
95 MOP - Macau Pataca
96 MRU - Mauritanian Ouguiya
97 MUR - Mauritius Rupee
98 MVR - Maldive Rufiyaa
99 MWK - Malawi Kwacha
100 MXN - Mexican Peso
101 MYR - Malaysian Ringgit
102 MZN - Mozambique New Metical
103 NAD - Namibia Dollar
104 NGN - Nigerian Naira
105 NIO - Nicaraguan Cordoba Oro
106 NOK - Norwegian Kroner
107 NPR - Nepalese Rupee
108 NZD - New Zealand Dollar
109 OMR - Omani Rial
110 PAB - Panamanian Balboa
111 PEN - Peruvian Nuevo Sol
112 PGK - Papua Nueva Guinea Kina
113 PHP - Philippine Peso 
114 PKR - Pakistan Rupee
115 PLN -  Polish Zloty
116 PYG - Paraguay Guarani
117 QAR - Quatari Rial
118 RON - Romanian New Lei
119 RSD - Serbian Dinar
120 RUB - Russian Rouble 
121 RWF - Rwandan Franc
122 SAR - Saudi Riyal
123 SBD - Solomon Islands Dollar
124 SCR - Seychelles Rupee
125 SDG - Soudanese Pound
126 SEK - Swedish Krona
127 SGD - Singapore Dollar
128 SHP - St. Helena Pound
129 SLL - Sierra Leone Leone
130 SOS - Somali Shilling 
131 SRD - Suriname Dollar
132 STN - São Tomé and Príncipe Dobra
133 SVC - El Salvador Colon
134 SYP - Syrian Pound
135 SZL - Swaziland Lilangeni
136 THB - Thai Baht
137 TJS - Tajikistani Somoni
138 TMT - Turkmenistan New Manat
139 TND - Tunisian Dinar
140 TOP - Tonga Pa'anga
141 TRY - Turkish New Lira
142 TTD - Trinidad/Tobago Dollar
143 TWD - Taiwan Dollar
144 TZS - Tanzanian Shilling
145 UAH - Ukraine Hryvnia
146 UGX - Uganda Shilling
147 USD - United States Dollar
148 UYU - Uruguayan Peso
149 UZS - Uzbekistani Som
150 VES - Venezuelan Bolívar Soberano
`151 VND - Vietnamese Dong
152 VUV - Vanuatu Vatu
153 WST - Samoan Tala
154 XAF - CFA Franc BEAC
155 XCD - East Caribbean Dollar
156 XOF - CFA Franc BCEAO
157 XFP - CFP Franc
158 YER - Yemeni Rial
159 ZAR - South American Rand
160 ZMW - Zambian Kwacha
161 ZWL - Zimbabwean Dollar
Limit the Number of Adults or Children to be selected from the drop-down menu

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)
<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>
<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>
Automatic Field Selection when loading the Booking Engine

To apply the code from this section, save the following scripts in the Custom Header field.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Click to copy

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

*ms = millisecond (this is how fast the code being run)

See where the interval is placed below:

Select 2 Adults automatically (all room types)

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

DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
  1. Copy and paste the following code in the Custom Header section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Click to copy
  1. Save the following code in the Custom Footer section
<script>
/* ----------------------- Select 2 Adults on load ----------------------- */ 
 $(document).ready(function () {
$(window).load(function() {
    setTimeout(function() {
        $('div.av_roomtype>div.av-info>div.av-details>div>div.av-adults>div>div>ul>li:nth-child(2)>a').trigger('click');
    },3000);
});
}); 
</script>
Click to copy
Select 2 Adults automatically (specific room types)

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

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

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>
Select the Rate Plan automatically (all room types)

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>
Slack | Threads | Cloudbeds | 37 new items
Select the Rate Plan automatically (specific room type)

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>
Slack | Threads | Cloudbeds | 37 new items
Select the room automatically and keep the room selected even after changing the dates

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>

What to do if my customization code is not working?

If the desired customization code is not working as expected, try the following troubleshooting steps:

  • Confirm that the code has been correctly copied and pasted, without typos or unnecessary/extra spaces.
  • Paste the code in the correct field, in the Customize the Booking Engine section (For example: Some codes should be placed in the Custom header section, and some other codes need to be pasted in the Custom footer section)
  • Save your changes after the customization codes are added to the correct fields, and reload/open the Booking Engine on your browser to see the effect
  • The List Design View is no longer supported in Cloudbeds PMS. Find more details here.

Reach out to our Support Team if none of the solutions above fix the issue.

Powered by Zendesk