How to customize your Groups Booking Engine

Groups Booking Engine offers several in-depth customizations for those who are familiar with HTML/CSS or employ a web designer.

This article offers some options to customize the Groups Booking Engine

  Cloudbeds does not offer web development services or consultation, but if you'd like to learn more about HTML and CSS, here are a couple of great places to start:

Main group booking engine actions

How to access the Groups Booking Engine

  1. Log in to your organization (group account) by using your group portal URL: YOURURL.cloudbeds.com/login
  2. Click on the organization's name

  1. Groups will open on a new page, and on the browser tab, you can see the URL:

How to customize the Groups Booking Engine

  1. Click on your username in the upper-right-hand corner
  2. Select Settings
  3. Click Customize Booking Engine

Use the custom meta tags box in the Customize Booking Engine section to add JavaScript, CSS, and other codes to the header or footer section of your Groups site's HTML. See the section: Custom Meta Tag Examples.

 All fields are intended for code, not plain text. Please do not insert simple text here, as it can break the page. Learn more about each field here: Where can I customize the Group Booking Engine.

How to change the landing page (Promotion Code/External URL)

By default, clicking the GO button will take you to the Booking Engine page of the property selected.

  1. Click on Properties
  2. Replace the external URL hyperlink
  3. Click to Save

Change the landing page with an external URL.gif

You can also enter your rate plan promo code to redirect your guest to the Booking Engine page, where the corresponding rate plan will be displayed.

Enter the rate plan promo code to the landing page.gif

Custom Meta Tag examples for the Groups Booking Engine

Below are some custom CSS examples. You need to change the values in the code according to your needs. You can change the color by using the HTML hex code—there is a link to an HTML color tool on this page.

Notes: The codes inserted should be between <style> and </style> as shown below:

<style>
.price_box a {background:#aaa}
</style>

Starting From tag codes

Color of Starting From Tag on Hover

Replace the color code #008000 with any desired color and add this code to the Custom header for your hotel booking page section:

<style>
.starting_from i.fa-tag:hover {
  color: #008000;
  cursor: pointer;
}
</style>

Unavailable tag codes

Change the color of the tag when the mouse hovers over it. Replace the color code #008000 with any other color and add the code on the Custom header for your hotel booking page section:

<style>
.not_available i.fa-tag:hover {
  color: #008000;
  cursor: pointer;
}
</style>

Change #aaa to any desired color code. Add the following code on the Custom header for your hotel booking page section:

<style>
.not_available {background: #aaa}
</style>

unavailable-background-color-with_background_code.png

Go ahead and replace the words 'ADD TEXT HERE' with the desired word in the following code and apply it to the Custom Meta Tags section:

<style>
.price_box .not_available {
  font-size: 0;
}
.price_box .not_available:after {
  content: "ADD TEXT HERE";
  font-size: 10px;
}
</style>

switch-the-unavailable-word-with_code.png

Search button codes

Add the following code to the Custom header for your hotel booking page section and change #fff to any desired color code:

<style>
.sidebar_white_box button {
  background: #fff none repeat scroll 0 0;
}
</style>

Change the button's color when the mouse hovers over it. Use any code in place of #000. Add the following code to the Custom header for your hotel booking page section:

<style>
div.sidebar_white_box.form-group button:hover 
{
background: #000;
} </style>

Change the font color to any other color. Change #fff to any desired color code:

<style>
div.sidebar_white_box.form-group button
{
color: #fff
}
</style>

Replace the default map with Google Maps

Step 1 - Copy your Google Maps location code

  Things to know:

  • Instructions are taken from Google Maps Help.
  • Traffic and other maps information may not be available in the embedded map.
  1. Open Google Maps.
  2. Find your property location
  3. Click Share.

Share button in Google Maps

Google Maps share menu

  1. Click Embed a map.
  2. Click Copy HTML (this will copy the entire code). The code should start with <iframe> and end with </iframe>.

 The code will be generated in your browser's language, and the map will be displayed in that language.

Example: The code highlighted in red below is the language of the map, English (en). If necessary, you can change it to other languages (e.g., Spanish (es), Portuguese (pt), etc.).

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7886.465207518082!2d115.1726561!3d-8.764173!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd244f35b8a5d05%3A0xd42d4da6a44aa938!2sJimbaran%20Beach!5e0!3m2!1sen!2sid!4v1596624024065!5m2!1sen!2sid" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Example iframe code

Step 2 - Add the Customization Code on Cloudbeds PMS

Add the following code in the Custom Meta Tags section. Replace "Put your Google Map URL here" with your Google Maps URL from Step 1.

<style>
#map_canvas, #map_canvas_big
display: none;
}
</style>
<script type="text/javascript">
window.addEventListener("load", function(event) {  
//append google maps iframe  
var d1 = document.getElementById('map_canvas');  d1.insertAdjacentHTML('afterend', '
Put your Google Map URL here'); }, false);
</script>
<script type="text/javascript">
window.addEventListener("load", function(event) {  
//append google maps iframe  
var d1 = document.getElementById('map_canvas_big');  d1.insertAdjacentHTML('afterend', '<iframe src="
Put your Google map URL here" width="100%" height="274">'); }, false);
</script>

Was this article helpful?
1 out of 2 found this helpful

Comments

0 comments

Please sign in to leave a comment.