Customize Cloudbeds Booking Engine - How to add HTML and CSS Code to Custom Meta Tags Fields


Cloudbeds Booking Engine offers a number of customization options for those who are either familiar with HTML/CSS or employ a web-designer.

This article shows how to access the customization page and use HTML/CSS Custom Meta Tags for your property website.


You can easily match your website’s existing branding or create your unique style by customizing:

  • Header and footer
  • Background
  • Color scheme
  • Fonts
  • Adding text and hyperlinks
  • Hiding default elements

Things to note:

  • We provide customization codes as an additional informational resource for those already familiar with HTML and CSS. The code may become outdated and require additional work on it. Our support team will be glad to assist you with using the codes only provided by us
  • The codes provided are for reference and may require some additional modification to work correctly.
  • Cloudbeds does not offer assistance with hotel website web design/development, or customization not provided by us
  • The codes work on desktop version of Cloudbeds Booking Engine, and may not work on mobile version
  • Before making changes and customize your backgrounds/images, check out further details about security on this article

Getting Started

Step 1 - Identify your Booking Engine design type

  1. Go to Manage (gear icon)
  2. Click on Booking Engine Settings.
  3. Confirm if you are using Gallery or List Design.
  • If the List Design is enabled, the Use Gallery Design field will appear unchecked.
  • If the Gallery Design is enabled, it will show a check-mark.

Step 2 - Access the Customization Page

  1. Click on Customize the Booking Engine
  2. Choose your design type: Gallery or List Design
  3. Enter the customization code to the necessary field. Check the articles below for your reference:
Powered by Zendesk