Customize mybookings - Codes for both List & Gallery Designs

Follow

Mybookings 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 that work for both Gallery and List Designs.

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 after inserting this code and applying another font to all the tags you see no arrow icon on calendar (like in screenshot below) - remove <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
<style>
/* Hotel Name Font */.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif !important;
}
</style>
Change font for 'SEARCH' button
<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 buttons 'BOOK NOW' and 'SELECT ACCOMMODATIONS'

'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>
Property Information: change the font size and text color

Please replace the font-size and color ID 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)
<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
<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
<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

For customized backgrounds/images, check out further information on the FAQ section of this article: Mybookings Booking Engine Overview and FAQ

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 mybookings 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 - you need to upload it to any image hosting website or Google Drive and then get the image URL. Here's one of the examples:  https://www.codecademy.com/articles/host-images-on-dropbox

1. add background + keep header line

<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 + remove header line

To show the background image on the full page use this code instead:

<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

You need to replace the color code to the needed one

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

You need to replace the color code to the needed one

<style>
#promo_code_input {
background-color: #efc0ff;
}
</style>
Change background of available dates in date picker
<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.

The #007D8A can be changed to any desired color code

<style>
.bg-green-jungle {
border-color: #007D8A !important;
background: #007D8A !important;
}
</style>

Hide/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 mybookings map

You can also check this article for more instructions on how to Replace mybookings map with Google Maps.

<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 to "Custom Meta Tags" section:

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

Insert the following meta code to 'Custom Meta Tags' field:

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

Go to mybookings and scroll down to Property Information section, the fields with contact details are basically a numeric list on CSS side.
On the following example, 'Address' is the field number 1, 'City' is the field number 2 and so on

To hide a certain field add the following code, specifying number of field you want to hide after 'p:nth-child' part in brackets.
In example below 4th field (Contact Name) is hidden:

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

Insert the code to 'Custom Meta Tags' section

Recommended for properties that only have dorm beds and no private rooms

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

Insert the following code to 'Custom Meta Tags' ssection

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

In this section you can find codes which replace the default mybookings text with your custom text. You shouldn't necessarily put the text provided in code templates - you can enter any other text.

Please note that the text entered will be displayed:

  • Similarly for all languages on mybookings (those which are available) - if code was entered to 'Custom Meta Tags' section
  • For selected language only if the code was 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 '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 '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 '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 the code to '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>

If you do not want to change one of the text or leave it as it is, just comment out the code. For example, to leave the 'Children' text as it is and not changing it to other text, you must comment out by putting // (two forward slashes) in front of the code line:

// $(this).html($(this).html().replace("Children", "Kids"));
Replace the text 'Choose a Room' to any other text on Confirmation Page

Add the code to '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 'Availability' text (above the search button) with 'View Availability Calendar'

Add this code 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 'Select Accommodations' text inside the button

This code is applicable for properties which have "Allow guests to book specific accommodations on mybookings"

<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 '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 similary 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 text 'CHOOSE A ROOM' 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

To change the text from any specific room yype, always use the code line [data-room-type-id="Room ID here"] before the code as shown below

In order to confirm the myfrontdesk room type ID, please  visit the following article: Where to find myfrontdesk room type ID?

<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 text 'Advance Amount' 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>
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" (please 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 checkin/checkout)
  • 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 restrictions triangle on the availability calendar

We use black in example, change #000000 to desired color

<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
<style>
.pink { background: none !important; }
</style>
Make the  strikethrough 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 mybookings 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 mybookings

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 Rate Checker button color to be the same as 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>

Please, check the examples on the screenshot below:

1 - before adding the code.

2 - after the code was applied. The rate checker button is the same as search button.

Add your own arrow to Rate checker
<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 Mybookings 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'
.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 one word needs to be hidden:

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

When two words 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 rate checker when clicking 'Learn More'
  • Add to "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 text 'Prices above may or may not include taxes' 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

You can prevent the Google search results from displaying a direct link to mybookings 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 mybookings 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 'Mybookings Customization' section:

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

/*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 'Mybookings 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 text 'Search' on the widget button to any other text

This code should be copied and pasted to your website page! Do not add it to 'Mybookings Customization' section:

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

iframe

Please, check this article to learn more about using an iframe with mybookings.

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

Please, pay attention that the part of the code which contains a link to your mybookings 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_MYBOOKINGS_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