Customize mybookings - Gallery Design Codes

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 exclusively for Gallery Design.

Hide/Remove Elements

Remove the text and number of 'children' from the 'See Details' Online rate

Insert the code under 'Custom Meta Tags' section:

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', (event) => {
function deferLoadingJQuery() {
	if (window.jQuery) {
		// Initial page.
		setInterval(function() {
			if ($(".av-room-details .basic_prices").get(0)) {
                              $(".av-room-details .basic_prices").each(function() {
					$(this).html($(this).html().replace("adult", "guest"));
                                       $(this).html($(this).html().replace(/and.*$/i, ""));
                                       $(this).html($(this).html().replace(/and^\s+|\s+$/g, ""));
				});                     
			}
			// Change no results error message.
		}, 50);
	} else {
		setTimeout(function() { deferLoadingJQuery() }, 50);
	}
}
deferLoadingJQuery(); });
</script>
<style>
.av-per-person-price p.basic_prices::after {content: ")";}
</style>
Remove the Children Column

Insert the code under 'Custom Meta Tags' section:

<style>
th.children.custom-children {
visibility: hidden !important;
display: none;
}
td.children {
visibility: hidden !important;
display: none;
}
.av-children {
visibility: hidden !important;
display: none;
}
</style>

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 only work when you do not allow guest to book a particular room in Mybookings Settings

<style>
[data-room-type-id="Room ID here"] .av-children {
visibility: hidden !important;
display: none;
}
</style>
zpcq2cr49IH26cpNz4qrzW9gbUJjiinytKysJ2tix-hQlMbSZyzLRbvQlihc9zoRPrre1pNT2zZ-QY1UYJxZrl2cwXTh_TE2LOPtMBuMvvmNRucJL3eoIxYGL2ADlG9Yf4xEOJH- (814×340) - Google Chrome
Remove children column when the option of selecting rooms to the guests is enabled

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

<style>
th.children.custom-children {
visibility: hidden;
display: none !important;
}

.btn-group.bootstrap-select.children_select.accommodation-select {
visibility: hidden !important; 
display: none !important;
}
</style>
Remove children column when the option of selecting rooms to the guests is enabled for specific room type

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

Add the following code to the 'Custom Meta Tag' section and replace the red text with the desired room type code. Click the article to check: Where to find myfrontdesk room type ID?

<style>
[data-room-type-id="00000"] th.children.custom-children {
visibility: hidden;
display: none !important;
}
[data-room-type-id="00000"] .btn-group.bootstrap-select.children_select.accommodation-select {
visibility: hidden; 
display: none !important;
}
</style

On the following example, we have hidden children column only for Standard room:

Remove 'Adults' column

Insert the code under 'Custom Meta Tags' section:

<style>
th.adults.custom-adults {
visibility: hidden !important;
display: none;
}td.adults {
visibility: hidden !important;
display: none;
}.av-adults {
visibility: hidden !important;
display: none;
}
</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
Remove the 'Price From' text

Insert the code under the 'Custom Meta Tags' section

<style>
.av-rates .price-from {
visibility: hidden !important;
display: none;
}
</style>
Remove 'Standard/Online rate' and 'Additional Person Pricing' from all of the room types
<style>
.av-per-person-price {
visibility: hidden !important;
display: none;
}
</style>
Remove maximum occupancy field (all room types)

Add the following code to 'Custom Meta Tag' section

<style>
.av-occupancy {
display: none !important;
}
</style>
Remove maximum occupancy field (specific room type)

Add the following code to the 'Custom Meta Tag' section and replace the red text with the desired room type code - Click on the following article to check Where to find myfrontdesk room type ID?

<style>
[data-room-type-id="ROOM_ID_HERE"]  .av-occupancy {
display: none !important;
}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Remove the strikethrough rate after applying promo code
<style>
.av-roomrate .av-rate-price .old-price {
display: none;
}
</style>
cpAFW3NoCyEenQ_LSbYHlfOcEp1SLRMHyGPyqs58_GaOrFwdAkCYka0dDbYHSJmDX5Qr7Z1hAfUDheP1qZaTgRCuvmdnn8jmCOTwU7o0JmLMRmDdXmljxuAIC0g0kT3uJDo7vsT0 (814×598) - Google Chrome
Remove the number of rooms left 'Only x left' from all room types
<style>
.av-left-rooms {
visibility: hidden !important;
display: none;
}
</style>
Remove the 'Have a group code?' field
<style>
.show_group_code {
display: none;
}
</style>
[Demo] Mountain Resort & SPA - Kyiv, Ukraine - Best Price Guarantee - Google Chrome
Remove 'Minimum Stay' column

The code below will remove the 'Minimum Stay' text from all of the room types

<style>
.av-max-stay {
display: none !important;
}
</style>

Replace mybookings default text with custom text

Replace 'Have a group code' with other text and color

Insert the code under 'Custom Meta Tags' section and replace the sentence in red:

<style>
.show_group_code 
{ 
font-size: 0;
} .show_group_code a:after {
content:"HAVE A GROUP DISCOUNT CODE?";   
font-size: 13px; 
color: red;
}
</style>
[Demo] Mountain Resort & SPA - Kyiv, Ukraine - Best Price Guarantee - Google Chrome
Replace the 'Price From' text to any desired text

Insert the code under 'Custom Meta Tags' section:

<style>
.price-from {
font-size: 0 !important;
}
.price-from:after {
content: "Price per night";
font-size: 12px;
}
<style>
Replace the text 'Standard Rate' with any other text (all room types)

Insert the code under 'Custom Meta Tags' section and replace the sentence in red:

<style>
[data-package-id="0"] ~ label > em { display: none; }
[data-package-id="0"] ~ label:before { content: "Insert your text here"; }
</style>
Replace the text 'Standard Rate' with any other text (specific room type)

Insert the code under 'Custom Meta Tags' section and replace the sentences in red. The room type ID must be the specific room type that you want to replace the Standard Rate text

In order to find your myfrontdesk room type ID, check the following instructions: Where to find myfrontdesk room type ID?

<style>
[data-room-type-id="XXXX"] [data-package-id="0"] ~ label{
font-size: 0;
}
[data-room-type-id="XXXX"] [data-package-id="0"] ~ label::before {
content: "Write your text here";
font-size: 14px;
}
</style>
Replace the text 'Adults' to some other text

Insert the code under 'Custom Meta Tags' and change the text from 'Adults' to the desired text.

Example: 'Guests'

<style>
.av-room-options .av-adults .type_of_room {
font-size: 0 !important;
}
.av-room-options .av-adults .type_of_room:after {
content: "Insert your text here";
text-align: center;
font-size: 10px;
} 
</style>
/* Change the text "Adults" to "Guests" when option for the guests to select the particular room is enabled */
th.adults.custom-adults {
font-size: 0 !important;
}
th.adults.custom-adults:after {
content: "Insert your text here";
font-size: 14px;
text-align: center;
} 
/* --------------------------------------------------- */
</style>
Replace the text 'Children' to some other text

Insert the code under 'Custom Meta Tags' and change the text from 'Children' to the desired text.

Example: 'Children Over 3'

<style>
.av-room-options .av-children .type_of_room {
font-size: 0 !important;
}
.av-room-options .av-children .type_of_room:after {
content: "Insert your text";
text-align: center;
font-size: 10px;
}
/* Change the text "Children" to "Children over 3" when option is changed to allow guests to select room */
th.children.custom-children {
font-size: 0 !important;
}
th.children.custom-children:after {
content: "Insert your text";
text-align: center;
font-size: 14px;
}
</style>
Replace the text 'Rooms' to some other text

Insert the code under 'Custom Meta Tags' and replace the sentence in red from 'Room' to the desired text:

Example: 'Select'

<style>
.av-room-options .no-rooms .type_of_room {
font-size: 0 !important;
}
.av-room-options .no-rooms .type_of_room:after {
content: "Insert your text";
text-align: center;
font-size: 10px;
} 
</style>
Replace the text 'Room' to 'Pitch' through the whole booking process
  1. Add the following code in 'Custom footer for your hotel booking page' in order to see 'Pitch' on the top line:
<script type="text/javascript">
document.querySelector("#wizard > ul > li:nth-child(1) > span > b").innerHTML = 'CHOOSE A PITCH';
</script>
  1. Add the following code in the Custom Meta Tags to change from 'Room' to 'Pitch' in the right menu
/* The following code will change the text "Room Selection" to "Pitch Selection:"  */
div.checkout div div.col-md-3.reserve_info p:nth-child(3) {
font-size: 0;
}
div.checkout div div.col-md-3.reserve_info p:nth-child(3):after {
content: "Pitch Selection:";
font-size: 13px;
}
/* The following code will change the text "Room Nights" to "Pitch Nights:" */
div.checkout div div.col-md-3.reserve_info p:nth-child(14) {
font-size: 0;
}
div.checkout div div.col-md-3.reserve_info p:nth-child(14):after {
content: "Pitch Nights:";
font-size: 13px;
}
/* The following code will change the text "Room Total" to "Pitch Total" */
div.reserve_total div:nth-child(1) div:nth-child(1) p {
font-size: 0;
}
div.reserve_total div:nth-child(1) div:nth-child(1) p:after {
content: "Pitch Total:";
font-size: 13px;
}
Checkout - [Demo] Mountain Resort &amp; SPA - Google Chrome
  1. Add the following code in 'Custom footer' to change from 'Accommodations' to 'Pitch(es)'
<script type="text/javascript">
document.querySelector("div.reserve_success div div.col-md-9 div div.table-responsive.visible-lg-block.visible-md-block h4").innerHTML = 'Pitch(es)';
</script>
  1. To change from 'Room Type' to 'Pitch type' on the Confirmation Page (after the reservation is completed), add the following code in Custom Meta Tag (Confirmation Page Only) section:
<style>
/* The following code will change the text "Room Type" to "Pitch Type" */div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(1) {
font-size: 0;
}div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(1):after {
content: "Pitch type";
font-size: 14px;
}
</style>
  1. 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:
<style>
/* The following code will change the text "Room Name" to "Pitch Name" */div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(2) {
font-size: 0;
}div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(2):after {
content: "Pitch Name";
font-size: 14px;
}
</style>
Replace the text 'Select Accommodation' to any desired text
<style>
.btn.green.btn-block.select-accommodation-btn {
  font-size: 0;
}
.btn.green.btn-block.select-accommodation-btn:after {
  content: "Make a selection / Your desired text here";
  font-size: 12px;
}
</style>
Replace the 'Beds' of the dorm room to any desired text

The following code can be applied to only one room type. To add to other room types, the same code needs to be copied again but with another room type ID.

Replace "00000" with the room type ID - On the following article, you can learn Where to find myfrontdesk room type ID

<style>
[data-room-type-id="00000"] .type_of_room {
font-size: 0 !important;
}
[data-room-type-id="00000"] .type_of_room:after {
content: "Any desired text";
text-align: center;
font-size: 10px;
}
</style>
Replace the ‘Check-in’ & ‘Check-out’ to some other text

Insert the following codes under the 'Custom Meta Tags' section:

‘Check-in’

Replace the 'Arrival Date' below with your custom text

<style>
#rooms-search-form > div:nth-child(3) > label {
font-size: 0;
}
#rooms-search-form > div:nth-child(3) > label::after {
content: 'Arrival Date';
font-size: 16px;
}
</style>

‘Check-out’

Replace the 'Departure Date' with your custom text

<style>
#rooms-search-form > div.form-group.checkout-date > label {
font-size: 0;
}
#rooms-search-form > div.form-group.checkout-date > label:after {
content: 'Departure Date';
font-size: 16px;
}
</style>
Replace the text “Price for x nights” to any other text

Insert the code under 'Custom Meta Tags' and replace the sentences in red to the desired text:

<style>
.av-rates .price-from {
font-size: 0;
}
.av-rates .price-from:before {
content: "Per Person for";
font-size: 12px;
}
.nights_count {
font-size: 12px;
}
.av-rates .price-from:after {
content: " Night(s)";
font-size: 12px;
}
</style>
Replace the text “Adult” to other text for a specific room type

This will work when you allow guest to book a specific accommodation in Mybookings Settings.

Follow steps:

  1. Add the following code to the 'Custom Meta Tag' section
  2. Replace the "XXXX" with your room type ID. Click the article to check: Where to find myfrontdesk room type ID?
  3. Replace the text ''Insert your text here'' with your custom text
<style>
[data-room-type-id="XXXX"].av-room-options .av-adults .type_of_room {
font-size: 0 !important;
}
[data-room-type-id="XXXX"] .av-room-options .av-adults .type_of_room:after {
content: "Insert your text here";
text-align: center;
font-size: 10px;
} 
/* Change the text "Adults" to "Guests" when option for the guests to select the particular room is enabled */
[data-room-type-id="XXXX"] th.adults.custom-adults {
font-size: 0 !important;
}
[data-room-type-id="XXXX"] th.adults.custom-adults:after {
content: "Insert your text here";
font-size: 14px;
text-align: center;
} 
/* --------------------------------------------------- */
</style>
Reload Booking Engine when the booking is complete by clicking on the hotel logo on top

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>
Customize the color of 'Only x left'
<style>
.av-left-rooms {
background-color: #3267B8;
text-color: white;
}
</style>
How to 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 maximum occupancy 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).

Some properties would want to limit the number of adults and children who can sleep in that room.

Add the codes below to the 'Custom Meta Tags' section:

  1. 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 onwards will not be shown
  • (n+4)= The third child onwards will not be shown (in the drop-down, number of children start from 0)
  1. On the following article, you can learn Where to find myfrontdesk room type ID
<style>
[data-room-type-id="Room type ID"] .av-adults ul li:nth-child(n+5), [data-room-type-id="Room type ID"] .av-children ul li:nth-child(n+4) {
display: none;
}
</style>
Automatic field selection when loading the Booking Engine

In order to apply the codes from this section, as your first step, save the following scripts 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>

If you wish to apply multiple codes at once (e.g Select 2 Adults automatically  & Select a rate plan automatically), you would need to use different intervals for each code (one code with 1000 ms* and the other with 2000 ms, etc).

See where the interval is placed below:

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

Select 2 Adults automatically (all room types)

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

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

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>
Select 2 adults automatically (specific room type)

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

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 XXXX with the desired myfrontdesk room type ID

Check out this article to learn where to find the myfrontdesk room type ID

<script>
/* ----------------------- Select 2 Adults on load ----------------------- */ 
 $(document).ready(function () {
$(window).load(function() {
    setTimeout(function() {
$('[data-room-type-id=”XXXX”] div.av_roomtype>div.av-info>div.av-details>div>div.av-adults>div>div>ul>li:nth-child(2)>a').trigger('click');
    },2000);
});
}); 
</script>
Select a 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 myfrontdesk room type ID
  • Replace the number 2 with any other number of the sequence of other rate plans

Check out this article to learn where to find the myfrontdesk room type ID

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 myfrontdesk room type ID.

Check out this article to learn where to find myfrontdesk room type ID

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

<script> 
/* ----------------------- Select the rooms when date is changed ----------------------- */
$(window).on('hashchange', function(e) {
//Get Check-in date
 var CheckInDate = $('#start_date_not_mobile').val();
CheckInDate = CheckInDate.split("/");   // Adding for change
CheckInDate = CheckInDate[1] + "/" + CheckInDate[0] + "/" + CheckInDate[2]; //Adding for change
 var DateIn = new Date(CheckInDate);
//Get Check-out date
var CheckOutDate = $('#end_date_not_mobile').val();
CheckOutDate = CheckOutDate.split("/");   // Adding for change
CheckOutDate = CheckOutDate[1] + "/" + CheckOutDate[0] + "/" + CheckOutDate[2]; //Adding for change
var DateOut = new Date(CheckOutDate);
//Get difference between the time of those dates
  var GetTime = DateOut.getTime() - DateIn.getTime();
//Math formula to find the difference between two dates
var GetDaysAfterTimeCalculation = GetTime/(1000 * 3600 * 24);
//Condition on the what do to if the result is equal or more than 1
if (GetDaysAfterTimeCalculation >= 1) 
{ 
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);
}
}).trigger('hashchange'); // End of window hash.
</script>
<script>
/* ----------------------- Select the rooms on load ----------------------- */ 
 $(document).ready(function () {
$(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>

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

<script> 
/* ----------------------- Select the rooms when date is changed ----------------------- */
$(window).on('hashchange', function(e) {
//Get Check-in date
 var CheckInDate = $('#start_date_not_mobile').val();
 var DateIn = new Date(CheckInDate);
//Get Check-out date
var CheckOutDate = $('#end_date_not_mobile').val();
var DateOut = new Date(CheckOutDate);
//Get difference between the time of those dates
  var GetTime = DateOut.getTime() - DateIn.getTime();
//Math formula to find the difference between two dates
var GetDaysAfterTimeCalculation = GetTime/(1000 * 3600 * 24);
//Condition on the what do to if the result is equal or more than 1
if (GetDaysAfterTimeCalculation >= 1) 
{ 
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);
}
}).trigger('hashchange'); // End of window hash.
</script>
<script>
/* ----------------------- Select the rooms on load ----------------------- */ 
 $(document).ready(function () {
$(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>
Make the additional guest fields mandatory

This code is helpful for properties that allow additional guests and want to make additional guest's fields mandatory. Add the following code in 'Custom footer for your hotel booking page' section

<script>
  window.addEventListener("load", function () {
    let bookNowBtn = document.querySelector("#general-info > div > a");
    bookNowBtn.addEventListener("click", function () {
      setTimeout(() => {
        let addGuest = document.querySelector(
          "#reservationDetailsForm > div.additional_guests > button"
        );
        addGuest.click();
        let cancelBtn = document.querySelector(
          "#reservationDetailsForm > div.additional_guests > div > div.add_guest_block.row > div:nth-child(2) > button"
        );
        cancelBtn.style.display = "none";
      }, 1000);
    });
  });
</script>
Checkout - Esencia Hotel Boutique - Google Chrome

On the following article you can find codes that work for both Gallery and List Designs

Powered by Zendesk