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
<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:
- Before adding the code
- 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>
.rate-check {display:none !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:
<style>
#channel-Airbnb {display: none;}
</style>
- 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';}

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;}
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>
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
- 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>
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>
Customize iFrame
Check this article to learn more about using an iframe with the Cloudbeds Booking Engine.
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
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:
<meta property="og:title" content="PUT TITLE HERE" />
<meta property="og:description" content="PUT DESCRIPTION HERE" />
<meta property="og:image" content="https://PUT_PREFERABLE_IMAGE_URL_HERE?format=2500w" />
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
- Add the following code in Custom Meta Tag section:
<style>
img.logo{
cursor: pointer;
}
</style>
- 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):
- Copy the code below and paste it in the Custom Meta Tags field of the Customize Booking Engine section on Cloudbeds PMS.
- 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.
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.
<!-- **START** [Desktop Currency Selector Customization CSS] **START** -->
<style>
/* ---------------------------------- Hide all the currencies ---------------------------------- */
#currency-selector > li {
display: none;
}
/* --------------------------------------------------------------------------------------------- */
/* ----------------------- Display only USD & BRL ---------------------------------------------- */
#currency-selector > li.selected,
#currency-selector > li:nth-child(147),
#currency-selector > li:nth-child(20) {
display: block;
}
/* --------------------------------------------------------------------------------------------- */
</style>
<!-- **END** [Desktop Currency Selector Customization CSS] **END** -->
<!-- **START** [Mobile Currency Selector Customization CSS] **START** -->
<style>
/* Hide all currency options */
#lang_currency_switchers .lang_cur > option {
display: none;
}
/* Show only BRL and USD options, plus the selected option */
#lang_currency_switchers .lang_cur > option[data-value="BRL"],
#lang_currency_switchers .lang_cur > option[data-value="USD"],
#lang_currency_switchers .lang_cur > option.selected {
display: block;
}
</style>
<!-- **END** [Mobile Currency Selector Customization CSS] **END** -->
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 |
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>
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:

When loading the booking engine, 2 adults/guests will be automatically selected:
The following code does not work if you allow guests to book specific accommodations on the Booking Engine.

- 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>
- 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>
When loading the booking engine, 2 adults/guests will be automatically selected for a specific room type.
The following code does not work if you allow guests to book specific accommodations on the Booking Engine.

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