Learn how to customize color for your Booking Widget New Version as you wish to match your hotel's website and branding effortlessly.
To access Booking Widget Customization, go to Booking Widget > Booking Widget Customization
You can change the color of the following codes:
- Stand-alone Code:
- Booking Widget Embedded Code:
- Embedded Code
Note: This is not applied for the Advanced Embedded Code
Understanding the color customization sections
- Search Box Background
- Search Bar Background (Hover State)
- Button (With Background)
- Chip & Special Offer
- Highlighted Features
- Section Box Background
Search Box Background
Adjust the background color outside of the search bar, best price, and currency sections.
Before:
After customization:
 |
 |
Search Bar Background (Hover State)
Adjust the background color of the search bar (for example: choosing check-in, check-out date) when hovered.
Before:
After customization:
 |
 |
Button (With Background)
Adjust the color of buttons with a background.
Before:
After customization:
 |
 |
Chip & Special Offer
This color customization will adjust 2 sections:
-
The color of icon and text for special offers.
-
The background color of the promo code chip (this chip only appears when the promo code is applied).
Before:
After customization:
 |
 |
Highlighted Features
Adjust the color of icons and text for highlighted features.
Before:
After customization:
 |
 |
Section Box Background
Adjust the background color outside of sections.
Before:
After customization:
 |
 |