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.
Learn more about the 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
Customization categories
Edit your Booking Engine colors and adjust them to your property's:
- Background
- Header
- Room and checkout arrow color
- Search button color
- General button color
- Reset all to default
Learn more about How to Use Color Pickers
This field is only for adding JavaScript, CSS, and other features to the header section of your site's HTML.
Do not insert simple text in the Custom Meta Tags section, since it can break the page.
Add any additional meta data, such as a tracking pixel, that you need only on the confirmation page.
Learn more about How to Add HTML and CSS Code to Custom Meta Tags Fields
This field is only for adding JavaScript in the footer section of your site's HTML.
Do not insert simple text in the Custom Meta Tags section, since it can break the page.
- If YES is selected: Your property photos (thumbnails) will appear in the Booking Engine header
- If NO is selected: Your property photos (thumbnails) will be hidden, only displaying your property name.
Displays your property logo as the main thumbnail in the Booking Engine header
Fully customize your booking engine header. When changing designs and colors, be aware of how changes will affect accessibility on the booking engine.
Fully customize your booking engine footer. When changing designs and colors, be aware of how changes will affect accessibility on the booking engine.
Add a customized text to appear in your property's booking engine when there is no availability in any accommodation type for the requested dates.
- Do you need any help to customize your Booking Engine? Reach out to our Support Team.
- Explore more options to customize your 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.
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.
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.
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.
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.
This field allows you to hyperlink your logo to your website.
Customize your Booking Engine header, footer; add your Custom Meta Tags and JavaScript codes.
If you need any help with JavaScript customization, reach out to our Support Team.
Comments
Please sign in to leave a comment.