Themes allow you to comply with any design policy your organization may have. You can create one theme and apply it to all your pages to achieve uniform branding, or you can create multiple themes to make each of your pages unique. You may even select different themes for the same Booking page or Master page when integrating it onto your websites. This gives you the flexibility you require to visually fit a single Booking page to multiple different website pages.
All themes are centrally managed in the Theme designer. This means that any design changes you make are automatically implemented on the relevant Booking pages and Master pages, ensuring fuss-free maintenance.
Using system vs custom themes
All account Administrators can access the Theme designer by going to Setup and opening the left sidebar. The Theme designer is located under the sidebar's Tools section.
The theme designer comes with 5 out-of-the-box system themes which you can use as-is, or modify to add your logo and change the background color. You can also create a custom theme from scratch.
To create a custom theme, simply click the “New theme” button on the top left corner. You will be prompted to name your new theme and choose either a light or a dark theme. When creating a theme, you can configure elements that are related to core properties, page background, interaction pane and information pane.
To preview your newly created theme, simply select the Booking page or Master page you would like to preview the theme on from this dropdown menu and then click on the preview button. Once you are happy with your theme, go to the Overview section of the Booking page or Master page that you would like to apply the theme to and select the theme from the dropdown menu.
Newly created Booking pages and Master pages are automatically assigned the default theme, which can be specified in the theme designer.
The design of each theme comes from four sections:
- Base theme - Each theme is based on either the light or dark color palette. This cannot be changed once the theme is created.
- Header logo - The logo visible to your Customers. It is recommended that your logo be 200px wide by 50px high.
- Button color – The background color of buttons and other key components on your page. It is intended to attract your Customer's attention to specific elements.
- Button font color – The color of text on buttons can be set either automatically (to maximize contrast against the button background color), or manually to white or black.
- Font - The font family to be used across the Customer booking process.
- Booking form fields - The style can be either Modern (fields as underlines - the default) or Classic (fields as boxes).
- Background color - This color will show when no background image was selected, before it is loaded, and when it is hidden (see below).
- Background image - You can upload any background image, texture or pattern. Make sure you own the copyrights to use it. The image may appear cropped in order to always cover the entire background of the browser window. It is recommended that your background image be 2000px wide by 1000px high.
- Hide background image - You may wish to hide the background image on mobile, or when integrated into your website. We recommend experimenting to find the best settings to complement your background image.
The interaction pane is where the scheduling process takes place. It is where your Customers will select any Event types you have, select a time and fill out the Booking form.
- Content shading opacity – Determine the opacity to optimize the readability of text over your background image or color.
- Image shape - Apply a uniform shape or mask to all the images you uploaded for your Event types and Booking pages in their respective Public content sections.
- Image border - Apply a uniform border width to all these images.
- Image border color - Apply a uniform border color to all these images.
The interaction pane displays the information about your Booking page or Master page. It includes the page’s image, description, and contact information.
- Content shading opacity - Determine the opacity to optimize the readability of text over your background image or color.
- Image shape - Apply a shape or mask to the image you uploaded for your Booking page or Master page in its respective Public content sections.
- Image border - Apply a border width to this image.
- Image border color - Apply a border color to this image.