Mygroup's booking engine offers a number of in-depth customization for those who are either familiar with HTML/CSS or employ a web-designer.
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:
Getting Started
Login to your mygroup account:
- Click on your username in the upper-right hand corner
- Select 'Settings'
- Click 'Customize Booking Engine'
You can 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 mygroup site's HTML.
Please do not insert normal/simple text there. If inserted, it can break the page layout
Custom Meta Tag Examples
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>'Starting From' Tag Codes
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>
'Unavailable' Tag Codes
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>
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>
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>
'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 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>
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>
'GO' button
By default, clicking on the 'GO' button will take you to mybookings page of the property selected.
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 mygroups
- Click on Properties
- Replace the external URL hyperlink
- Click to Save
Example:
It is also possible to enter your rate plan promo code to redirectyour guest to mybookings page with the corresponding rate plan being displayed.
Example: