Customize mybookings - HTML and CSS Custom Meta Tags

Insert the code under “Custom Meta Tags”:

To only have certain rooms hide the Children column and display it for some rooms, make sure that the code to remove the Children column from all of the rooms is taken off or erased. Add the following code along with the particular room id.

This will work when you don’t allow guest to book a particular room in Mybookings Settings:

This will work when you allow guest to book a particular room in Mybookings Settings. The code below will remove the Children column from all of the room types

This will work when you allow guest to book a particular room in Mybookings Settings:

For example, we have hidden children column only for Standard room now:

Insert the code under “Custom Meta Tags”:

Insert the code under “Custom Meta Tags”:

Insert the code under “Custom Meta Tags”:

Insert the code under “Custom Meta Tags”:

<style>
[data-package-id="0"] ~ label > em { display: none; }
[data-package-id="0"] ~ label:before { content: "Insert your text here"; }
</style

Insert the code under “Custom Meta Tags”:

Insert the code under “Custom Meta Tags”:

Insert the code under “Custom Meta Tags”:

1. Add the following code in Custom footer for your hotel booking page in order to see "Pitch" on the top line:

2. Add the following code in the Custom Meta Tags to change from "Room" to "Pitch" in the right menu

3. Add the following code in Custom footer to change from "Accommodations" to Pitch(es)

4. To change from "Room Type" to "Pitch type" in Confirmation Page (after the reservation is completed), add the following code in Custom Meta Tag (Confirmation Page Only) section

5. In order to change from "Room Name" to "Pitch Name" in Confirmation Page (after the reservation is completed) add the following code in Custom Meta Tag (Confirmation Page Only) section

• Please add the code below in <style> code here </style>.
• Replace "00000" with the room type ID.
• The following code can be applied to only one room type. To add to other room types as well, the same code needs to be copied again but with another room type ID.

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

Save the following code in the Custom Footer section

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

Save the following code in the Custom Footer section and replace the XXXX with the desired myfrontdesk room type ID

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 sandard rate, replace the number 2 with 3.
The sequence means the numbering of the package on your booking engine page, as shown below

Save the following code in the Custom Footer section 

• Replace XXXX with the myfrontdesk 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 myfrontdesk room type ID.

If the time format of your myfrontdesk account is Gregorian Format (DD/MM/YYYY), apply the following code keep the code

If the time format of your myfrontdesk account is USA (MM/DD/YYYY), apply the following code:

/* Remove Children Column */
.choose_room .room_types .custom-children, .choose_room .room_types .custom-adults,
/* Remove Adult Column  */
.choose_room .roomtype .custom-adults, .choose_room .roomtype .custom-children
{ visibility: hidden !important; }

/* Remove Children Column */

.room_types .children, .kids_block, .roomtype .col_kids, .total_child, .nb_kids, .book_child {
visibility: hidden !important;
}
.choose_room .room_types .custom-children {
visibility: hidden !important;
}
.tarife.kids_tarife {
display: none !important;
}

/* Remove "Price From" column */

.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}

.only_left
{display:none;}

#wizard-container > div.choose_room > div.available_rooms > div.col-md-9.padding-left-0.col-sm-12.col-xs-12 > div.room_types > div > div.detailed > div.room_more > div > div {visibility: hidden !important;}

This code can be helpful for properties who has a lot of intervals in promotion and the guest applies the Promotional Code

.promo_info
{
display: none !important;
}.package_warning .alert-danger {
 font-size: 0;
}
.package_warning .alert-danger:after{
 content: "insert the needed text here";
 font-size: 12px;
 line-height: 1;
}

00000 in code below is myfrontdesk room id, you can find it using dev console in browser or contact our Suport Team to help providing it.

[data-room-type-id="00000"] .roomtype.vertical-align.visible-md-block.visible-lg-block .children.custom-children{
visibility: hidden !important;
}

.room_types .stay tr:nth-child(2) {
  display: none;
}

.room_more {
display: none;
}

.custom-adults.text-center,.col-sm-3.col-xs-3.custom-adults {
  font-size: 0!important;
}.custom-adults.text-center:after,.col-sm-3.col-xs-3.custom-adults:before{
  
content: "Guests"; 
  font-size: 12px;
}

Some hotels sell accommodation to children starting from specific age for the price of an adult. In this case the guest should book correct amount of adults including the children there. The code below will help to change 'Adults' column name to 'Adults and children +5 years old'. You may change the text or age to any number.

.alert.alert-warning.booking_helper {font-size: 0;}
.alert.alert-warning.booking_helper:after {font-size: 14px;  content: 'YOUR TEXT HERE';}

.col-md-12.room_image {
visibility:hidden;
}
.col-md-12.room_image:after{
content: "Apartment type";
visibility:visible;
margin-left: -35px;
}

Save the code below in Custom Meta Tags section

You can control width by changing the number of px in the element [.choose_room .roomtype .adults.custom-adults button.btn { max-width: 80px; ]

.choose_room .room_types .custom-children {
 display: none;
}
.choose_room .roomtype .adults.custom-adults {
 width: 20%;
}
.available_rooms .roomtype .adults .adults_select {
 width: 100% !important;
}
.choose_room .roomtype .adults.custom-adults button.btn {
 max-width: 80px;
}

Alternative code (with borders):

Add the following code in the Custom Meta Tag section:

<style>
div.col-md-3.reserve_info > h2 {
color: #FF000F;
}
</style>

<style>
.bold_blue { background: red; }
</style>

/* Change Search Button */
.btn.btn-warning.btn-block {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
} 

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

Please replace the font-size and color ID on the code below

/*change font (Calendar title)*/


/*change font (Calendar days/dates)*/
#ui-datepicker-div {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}

.selected_rooms_price {
font-family: 'Roboto',sans-serif;
font-style: italic;
    font-size: 30px;
    color: #da26b2;
    margin-top: 5px;
    text-align: center;
}   

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

Please note, 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

Please, feel free to replace the color code (#091b48) to the needed one:

.rooms_book {
    background: #091b48;}

You can use this code to change the color of the promo code search bar in Mybookings (please replace the color #)

You can use the following code to remove the the currency button

You can use the following code to remove the language and currency switches:

/* Remove Availability Calendar */

.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}

/* Remove Address */ 
.map_info {display:none;} 

/* Remove Map */ 
#map_canvas {display:none;}  

.checkin-checkout-terms-block{
display: none;
}

.checkin-checkout-terms-block, .property_info h5, .cancellation_policy {
display: none;
}

Insert the following code to "Custom Meta Tags" section:

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

Go to mybookings and scroll down to Property Information section, the fields with contact details are basically a numeric list on CSS side.
In example below '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>

Insert the code to 'Confirmation Only' section

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

.reserve_total .row.total_adults, .reserve_total .row.total_child {
 display: none;
}

Insert the following code to "Custom Meta Tags" field:

<style>
.row.total_child, .nb_kids {
 display: none;
}
</style>

Insert the following code to "Custom Meta Tags" field:

<style>
.row.total_adults {
display: none;
}
</style>

Insert the following code to "Custom Meta Tags (Confirmation Page Only)" field:

<style>
.kids_column.book_child, .book_child {
display: none;
}
</style>

<style>
.legend_booking>div>div:nth-child(4) {
display: none;
}
</style>

<style>
.check_availability_group .btn {
font-size: 0;
}
.check_availability_group .btn:after {
content: "Your text here";
font-size: 15px;
}
</style>

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

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

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

// $(this).html($(this).html().replace("Children", "Kids"));

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

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

<script type="text/javascript">
document.querySelector('.show_avail_calendar a').innerHTML = 'View Availability Calendar';
</script>

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

.show_promo_code {font-size: 0;} 
.show_promo_code a:after {content:"HAVE A DISCOUNT CODE?";   
font-size: 13px; 
color: red;
}

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

#rooms-search-form .check_availability_group:after {
  content: "YOUR TEXT HERE";
  color: #ff0000;
display: block;
}

<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 CUSTOM TEXT';
NewEl.className += "text-right";
NewEl.style.fontSize = '12px';
NewEl.appendAfter( document.querySelector('.book_now'));
</script>

<style>
label[for="ebanking"]>a:after {
  content: "text here";
  display: block;
}
/*add below code so options won't align bottom*/
.md-radio-inline .md-radio {
  vertical-align: top;
}
</style>

<style>
label[for="card"]>a:after {
  content: "text here";
  display: block;
}
/*add below code so options won't align bottom*/
.md-radio-inline .md-radio {
  vertical-align: top;
}
</style>

<script type="text/javascript">Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }, 
false;var NewEl = document.createElement('p');NewEl.innerHTML = '<a href="http://www.linktoyourcodehere." style="text-decoration:underline;">Get your promo code here</a>';
NewEl.className += "text-center";NewEl.style.fontSize = '12px';NewEl.appendAfter
( document.querySelector('.promo-code'));
</script>

<h4 style="text-align:left"><a href="https://www.cloudbeds.com/" target="_blank"><h4><b>Back to website</b></h4></a>

<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement("h1");
NewEl.innerHTML = "</br> Please note that the minimum length of stay is 2 days";
NewEl.className += "text-center";
NewEl.style.fontSize = "19px";
NewEl.appendAfter( document.querySelector(".message_container"));
</script>

.payment_method>.md-radio-inline::after {
 content: "";
 display: block;
 width: 174px;
 height: 58px;
 background-image: url(ADD URL HERE);
 background-size: cover;

.payment_method>.md-radio-inline::after {
 content: "";
 display: block;
 width: 216px;
 height: 29px;
 background-image: url(https://www.cloudbeds.com/wp-content/uploads/2018/05/ccs.png);
 background-size: cover;
}

Save the following code in Custom Meta Tags section

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

Add the  following code in Custom Meta Tags section

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

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.

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

.acessa_float_left.acessa_float_description {
display: none;
}

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

Please replace the name in red with your desired name

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

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

When one word needs to be hidden:

When two words needs to be hidden:

#channel-Hotel\ Bonanza {display: none;} 

When Booking.com needs to be hidden:

#channel-Booking\2e com {display: none;}

When Airbnb (API) needs to be hidden:

#channel-Airbnb\20 \28 API\29{display: none;}

• Add to "Custom footer" section and copy to all the languages needed
• This code doesn't require <style></style>

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

When sharing mybookings links 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...".

This can be overridden by adding specific markup tags that Facebook is looking for. The following code should be added to the mybookings 'Custom Meta Tags' section in myfrontdesk:

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

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

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>