Customize your Booking Engine and adjust it to your brand guidelines. This article offers a general overview of the Customize section of your Cloudbeds Booking Engine.
Access the customization section
- In your Account menu
, go to the Settings page
and click on the Booking Engine section
- Click on the Customize tab
Learn more about Cloudbeds Booking Engine.
Cloudbeds Booking Engine Plus customization options
Cloudbeds Booking Engine Plus is a re-imagined and upgraded version of your Cloudbeds Booking Engine.
Differences between the standard customization tab and the new Booking Engine Plus
Standard Booking Engine
The standard Booking Engine customization tabs are organized in a traditional page-by-page flow, as commonly seen in the booking process. Users can find different fields that are tailored to each stage of the booking journey, including a dedicated Confirmation page field to embed relevant scripts for the functionality of this page.
Booking Engine Plus
The new Booking Engine Plus operates as a single-page application, which combines multiple pages (such as the main page, accommodation page, guest details, payment details, and confirmation page)
As a result, the Booking Engine Plus customization tab reflects this integrated approach, and users will notice the absence of individual fields for each page component, including the Customization page script input field.
To customize scripts for the Booking Engine Plus, users only need to input relevant scripts once, as they will apply to the entire booking journey seamlessly integrated into a single page (this includes meta tags and JavaScript)
- The new Booking Engine streamlines the customization process by consolidating inputs and eliminating the need for page-specific script allocations.
Feature image
This setting is to determine the image that appears behind the date picker on the booking engine landing page.
The maximum pixel size for the Featured Image is 1600 x 1000. If a bigger picture is uploaded, the system will automatically resize/adjust it to the supported size.
- Click on the (x) icon in the image corner to delete it, if you need to.
Booking page background
This is the background color that will appear on the booking engine landing page if there is no image selected for the feature image or there is load time throttling.
Display your property logo as the main thumbnail in the Booking Engine header
- Set setting "Display your property's photos on the booking page?" to No
- Upload your Logo in the required image dimensions (270px x 270px)
Note: If setting "Display your property's photos on the booking page? " is set to YES, your property photos (thumbnails) will appear in the Booking Engine header.
Primary color setting
This is the primary color that will appear for all the call to action buttons, the date picker, and the Read More hyperlinks of the Terms and Conditions section.
Learn more about the How to Use Color Pickers.
Display Offers and the “View offers / Hide offers” drawer
When using the Cloudbeds Booking Engine Plus, accommodations can show a collapsed view by default. This introduces the “View offers / Hide offers” drawer at the bottom of each accommodation card.
This drawer uses an automatically generated variation of your Primary color. Even if the Header color is different, the drawer will not inherit it. This is expected behavior.
The drawer cannot be individually recolored using the customization panel.
If you choose to override its color using CSS in “Custom Meta Tags”, please note that this element does not use a fixed class. As a result, CSS overrides may not remain stable.
Property logo hyperlink
This field allows you to hyperlink your logo to your website.
Customize the No Availability text for the Booking Engine
When there's no availability for a guest to book a room, the booking engine displays a default message. This article explains how to customize this "no availability" text to better suit your brand's voice and communicate with your guests: Customize the No Availability text for the Booking Engine.
Embed Custom Code
Customize your Booking Engine header, footer; add your Custom Meta Tags and JavaScript codes.
- The Custom Header and Custom Footer fields give you the option to apply code for each selected language. This feature offers great flexibility, but it should be used with discretion.
- Remember to select the language you want to apply the code to, and then paste the code for each language you wish to work with.
- Custom Meta Tags: You can apply CSS code within <style></style> tags.
- JavaScript: Only apply JavaScript code in this section, wrapped in <script></script> tags.
We offer several examples and custom codes to work with this section. You can find them in our article: Booking Engine Plus - Most Common Customization Codes.
Comments
We need info how to implement this as to how an old customization can be applied to your new booking engine plus!
"The new Booking Engine Plus operates as a single-page application, which combines multiple pages (such as the main page, accommodation page, guest details, payment details, and confirmation page)
As a result, the Booking Engine Plus customization tab reflects this integrated approach, and users will notice the absence of individual fields for each page component, including the Customization page script input field."
Hello Fireside Lodge | Director At Large,
Thank you for your comment.
I went ahead and opened a ticket with our support team, so they can provide you with a personalized assistance on this topic.
Thank you,
Please sign in to leave a comment.