Groups Booking Engine - How to Customize

Groups Booking Engine offers a number of in-depth customization for those who are either 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:

Groups Booking Engine

How to Access the Groups Booking Engine
  1. Login to your organization (group)
  2. Click on the organization name

Groups will open on a new page and on the browser tab you can see the url:

Where 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 section: Custom Meta Tag Examples

All fields are intended for code, not plain text. Please do not insert simple text here or 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 on the GO button will take you to the Booking Engine page of the property selected.

Change the landing page

Change the landing page to your own website or any other by inserting the URL of the page in the field Promotion Code / External URL inside the Properties tab on Groups:

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

Example:

Enter rate plan promo code

It is also possible to enter your rate plan promo code to redirect your guest to the Booking Engine page with the corresponding rate plan being displayed.

Example:

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. The color can be changed by using theHTML hex code - Link to an HTML color tool on this page

Note: The codes inserted should be between <style> code </style> as shown below:

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

Starting From Tag Codes

Color of Starting From Tag on Hover

Replace the color code #008000 to any other 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>
Click to copy
Mygroup Custom Meta Tag, CSS, and HTML Examples – myfrontdesk - Google Chrome
DEMO - Mygroups - Google Chrome

Unavailable Tag Codes

Color of Unavailable Tag on Hover

Change the color of the tag on hover. Replace the color code #008000 to 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>
Click to copy
DEMO - Mygroups - Google Chrome
DEMO - Mygroups - Google Chrome
Unavailable Background Color

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>
Click to copy
Mygroup Custom Meta Tag, CSS, and HTML Examples – myfrontdesk - Google Chrome
DEMO - Mygroups - Google Chrome
Switch the Unavailable word

Go ahead and switch the word 'ADD TEXT HERE' to the desired word on the code below and apply the code 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>
Click to copy
DEMO - Mygroups - Google Chrome
DEMO - Mygroups - Google Chrome

Search Button Codes

Background Color

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>
Click to copy
Mygroup Custom Meta Tag, CSS, and HTML Examples – myfrontdesk - Google Chrome
DEMO - Mygroups - Google Chrome
Background Color - On Hover

Change the color of the button on mouse hover. 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>
Click to copy
DEMO - Mygroups - Google Chrome
DEMO - Mygroups - Google Chrome
Search text Color

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>
Click to copy
DEMO - Mygroups - Google Chrome
DEMO - Mygroups - Google Chrome

Replace Default Images

Replace Default Map with Google Map

Step 1 - Copy your Google Maps location code

  • Instructions are taken from Google Maps Help
  • Traffic and other Maps info is sometimes not available in the embedded map.
  1. Open Google Maps
  2. Find your property location
  3. Click Share
  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 the language of your browser and the map will be displayed in that language.

Example: The code highlighted 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>

Step 2 - Add the Customization code on Cloudbeds PMS

Add the following code in the Custom Meta Tags section and replace the red sentence with your Google Map 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>
Slack | Saurabh Satralkar | Cloudbeds | 38 new items
Was this article helpful?
1 out of 2 found this helpful

Comments

0 comments

Please sign in to leave a comment.