Cloudbeds Booking Engine - Gallery Design Code

Follow

Gallery Design is the default Booking Engine display setting for Cloudbeds PMS accounts.

There are multiple customization options available for those who are either familiar with HTML/CSS or employ a web-designer. This article shows codes that work exclusively for the Gallery Design.

  • The List Design is no longer available on the Booking Engine as of September 1st, 2022. Use this code as a reference only, to transfer your customization code from the List Design to the Gallery Design. Find more details here.
  • Note that these Gallery Design customization code may be affected by future improvements applied to the Booking Engine.

Contents

  1. Change/Custom Colors
  2. Hide/Remove Elements
  3. Replace Booking Engine Default Text with Custom Text
  4. Other Customization Options

2. 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>
Hide/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>

Hide/Remove the Children Column for certain rooms only

To hide the Children column and display it only 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 the Cloudbeds Booking Engine 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 the Cloudbeds Booking Engine 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 types

This will work when you allow guest to book a particular room in the Cloudbeds Booking Engine Settings.

Add the following code to the Custom Meta Tag section and replace the red text with the desired room type code:

<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 for the Standard Room only:

Remove the 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 the Standard/Online Rate and the Additional Person Pricing from all of the room types
<style>
.av-per-person-price {
visibility: hidden !important;
display: none;
}
</style>
Remove the Maximum Occupancy field (all room types)

Add the following code to Custom Meta Tag section

<style>
.av-occupancy {
display: none !important;
}
</style>
Remove the 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:

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

3. Replace Booking Engine Default Text with Custom Text

Replace the 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 Standard Rate text  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 Standard Rate text 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.

<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;
} 
/* 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 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 Select Accommodation text 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:

<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 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 Price for x nights text 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

Allow guest to book a specific accommodation in the Cloudbeds Booking Engine Settings before continuing with the steps below.

  1. Add the following code to the 'Custom Meta Tag' section
  2. Replace the XXXX with your 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>

4. Other Customization Options

Reload Booking Engine when the booking is complete by clicking on the hotel logo on top
  1. Add the following code in Custom Meta Tag section:
<style>
img.logo{
cursor: pointer;
}
</style>
  1. Add the following code in Custom footer for your hotel booking page and replace the text in red:
<script>
document.getElementsByClassName('logo')[0].addEventListener('click', function() {window.location.href = 'http://www.website-name.com';});
</script>
Limit the number of 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).

To limit the number of adults and children who can sleep in that room, add the codes below to the Custom Meta Tags section:

  • Change the number in the parenthesis (n+5) and (n+4) based on the order of adults and children you want to hide. In this example, from total of 6 guests, there could only be maximum 4 adults and 2 children:
    • (n+5)= The fifth adult onward will not be shown
    • (n+4)= The third child onward will not be shown (in the drop-down, number of children start from 0)
<style>
[data-room-type-id="Room Type ID"] .adults.custom-adults ul li:nth-child(n+5), [data-room-type-id="Room Type ID"] .children.custom-children ul li:nth-child(n+4) {
display: none;
}
</style>
Automatic field selection when loading the Booking Engine

To apply the codes 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). 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:

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

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

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

Save the following code in the Custom Footer section and replace the XXXX with the desired Cloudbeds 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 Cloudbeds room type ID
  • Replace the number 2 with any other number of the sequence of other Rate Plans.

Example: If the desired rate plan to be loaded is in the sequence number 3 from the standard rate, replace the number 2 with 3.

The sequence means the numbering of the package on the booking engine page as shown below.

<script>
/* ----------------------- Select the rate plan for specific roomtype on load ----------------------- */
 $(document).ready(function () {
$(window).load(function() {
    setTimeout(function() {  $('[data-room-type-ID="XXXX"] div.av_roomtype>div.av-info>div.av-rates>div.av-roomrate-wrapper>div:nth-child(2)>div.md-radio>input[type=radio]').trigger('click');
    },2000);
});
}); 
/*  ----------------------- Select the rooms on load ends here ----------------------- */
</script>
Slack | Threads | Cloudbeds | 37 new items
Select the room automatically and keep the room selected even after changing the dates

Save the following code in the Custom Footer section and replace the XXXX with the Cloudbeds room type ID.

<script>
/* ----------------------- Select the rooms on date change ----------------------- */
$(window).on("hashchange", function() {
setTimeout(function() {
$('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
});
/* ----------------------- Select the rooms on date change ends here ----------------------- */
</script>
<script>
/* ----------------------- Select the rooms on load ----------------------- */
$(window).load(function() {
setTimeout(function() {
$('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
});
/* ----------------------- Select the rooms on load ends here ----------------------- */
</script>
Make the additional guest fields mandatory

Allow additional guests and make additional guest's fields mandatory by adding 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

Find codes that work for both Gallery and List Designs.

Powered by Zendesk