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
- Color scheme
- 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
Step 1 - Identify your Booking Engine design type
- Go to Manage (gear icon)
- Click on Booking Engine Settings.
- 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.
- If you already have customization codes applied to your current design and want to change from List to Gallery design, some custom meta tags will not carry over to the new design. Learn more: Customize Cloudbeds Booking Engine - Gallery Design Codes
- Once switched from List to Gallery Design, it is not possible to revert the change and go back to your previous List Design. See How to enable the Gallery Design for the Cloudbeds Booking Engine.
Step 2 - Access the Customization Page
- Click on Customize the Booking Engine
- Choose your design type: Gallery or List Design
- Enter the customization code to the necessary field. Check the articles below for your reference: