You can customize your booking page theme to match your branding, website, and logo. This article will explain how to customize colors, style, and fonts of your booking page.
Preview style changes
Clicking Save on any change updates your booking page immediately.You can preview any changes you make to your booking page colors, style, and fonts without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Save button.
In this article:
Customize your theme colors
You can select from Bookeo's predefined themes or use more advanced color pickers to create your custom theme. To set your theme colors
1. Go to Settings>Theme and Layout. Click on Colors and styles - Screen
2. In the Colors section, from the Predefined theme [1] dropdown menu, you can select one of the predefined themes. There are predefined light themes ([color] on white) and dark themes ([color] on black/grey).
3. All the UI colors listed below the Predefined theme dropdown menu will automatically show the set colors for that theme. Select the theme that most closely matches your brand. If needed, you can use the color pickers to change some of the colors.
If you want to use a neutral theme that can work with most brands, we suggest using the neutral greys themes - grey on white or grey on black.
4. From the Neutral elements [2] drop-down menu, you can select to optimize the colors for light or dark background.
Testing custom themes/Transparent background
If you create your custom theme, or use a transparent background we recommend testing the entire booking process page to ensure that all the elements are visible and the text is easy to read.Customize the style of the corners
You can select the style of the shapes of the customer interface corners, such as buttons, to match your website style:
1. Go to Settings>Theme and Layout. Click on Colors and styles - Screen
2. In the Corners section [3], select:
- rounded
- slightly rounded
- square
Preview style changes
Clicking Save on any change updates your booking page immediately.You can preview any changes you make to your booking page colors, style, and fonts without saving your settings by clicking on the Test booking button. When you are happy with the look and feel of your booking page, click on the Ok button.
Customize the font
1. Go to Settings>Theme and Layout. Click on Colors and styles - Screen
2. In the Font section select one of the fonts from the dropdown menu [4].
If the font you want to use does not show in the dropdown menu:
3. Select Other
4. Input the name of the Google Font you want to use. Make sure to use the exact name shown on this page https://fonts.google.com, case sensitive.
Testing fonts
- Custom fonts. Some fonts are wider than others. Not all fonts may be suitable. If you want to use a custom font, we recommend testing the entire booking process before saving to ensure that everything displays correctly.
- Device and browsers. Fonts may display differently depending on the device and browsers you or your customers are using to visit your booking page.
Some browsers may not support a specific font. If web fonts are not supported, there are fallback fonts that will be seen instead.