Customize the Cloudbeds Booking Engine

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

  1. In your Account menu, go to the Settings Page and click on the Booking Engine section
  2. Click on the Customize tab

Customization categories

Look and branding

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

Custom text and other elements
Custom Meta Tags

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.

Custom Meta Tags (Confirmation Page Only)

Add any additional meta data, such as a tracking pixel, that you need only on the confirmation page.

JavaScript Code (Confirmation Page Only)

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.

Display your property's photos on the booking 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.
Custom header for your hotel booking page

Fully customize your booking engine header. When changing designs and colors, be aware of how changes will affect accessibility on the booking engine.

Customize the text that will appear on the booking page if there is no availability for the dates searched

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.

Cloudbeds Booking Engine Plus customization options

Cloudbeds Booking Engine Plus is a re-imagined and upgraded version of your Cloudbeds Booking Engine.  Learn more about the new Cloudbeds Booking Engine here: Cloudbeds Booking Engine Plus (November 2023)

The settings below are currently in pilot phase, meaning that these features are subject to changes. If you would like to request to participate in our Cloudbeds Booking Engine Plus pilot program, reach out to our Support Team.

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.

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.

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.

Embed Custom Code

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.

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



Please sign in to leave a comment.