NeetoCal lets you customise your booking page to match your brand. You can choose from a variety of pre-designed themes, upload your logo, and add a cover image. This helps make your booking page look professional and aligned with your brand’s style.
Customising a booking page
Click on the Scheduling links tab on the left pane.
Click on the Scheduling link for which you want to customize booking page.
Click on the Theme tab.
Click on the "+" icon to add a new theme.
You can customize the colors, upload a logo, and add a cover image of your choice.
Click on Save.
To create a custom theme, you must first clone the theme.
Click on the three dot menu of the system theme.
Select clone from the drop down.
You can customize the colors, upload a logo, and add a cover image of your choice.
Click on Save.
This theme will now be available under Custom themes.
Click on Preview theme to see how your page will appear.
Setting a global theme
If you set a theme as a global theme, it will be applied to all the scheduling links you create in the future. The global theme is denoted by a yellow star icon on the theme card.
Click on the Scheduling links tab on the left pane.
Click on the Scheduling link.
Click on the Theme tab.
Click on the three-dot menu inside the theme card.
Click on Set as global theme if you are selecting from predesigned theme.
You can also set a theme as global by creating a new theme and enabling the Set as global theme toggle.
This theme will be applied to all the scheduling links that you will create in future.
Note: If you set a theme as global theme and customize the properties later, all scheduling links using the global theme will have the new theme styles.
Adding custom CSS
Custom CSS is a Pro feature. You can only edit custom themes, so clone a system theme first if you have not already.
Click on the Scheduling links tab on the left pane.
Click on the Scheduling link.
Click on the Theme tab.
Open your custom theme and scroll to the Custom CSS section in the left pane.
Click on Expand editor for a larger editor.
Write your CSS. The preview updates as you type.
Click on Save.
The CSS is saved on the theme, so it applies to every scheduling link and package page using that theme, including booking pages embedded on your website. If it is your global theme, it applies wherever the global theme is used. It does not change the NeetoCal admin interface.
Selectors and colour variables
You can target these parts of the booking page:
.neeto-cal-eui-container-wrapper- the page area behind the booking card.neeto-cal-eui-container- the booking card.neeto-cal-eui-left-details- the meeting details on the left.neeto-cal-eui-calendar-wrapper- the calendar.neeto-cal-eui-available-slots-wrapper- the list of available slots.neeto-cal-eui-timezone-selector-wrapper- the timezone selector
Other class names are internal and can change, so avoid relying on them.
The colours set in the theme are available as CSS variables. Their values are red, green and blue numbers, so wrap them in rgb().
--neeto-cal-primary-color--neeto-cal-primary-text-color--neeto-cal-secondary-color--neeto-cal-secondary-text-color--neeto-cal-background-color--neeto-cal-card-background-color--neeto-cal-card-text-color--neeto-cal-link-color
For example, to give the booking card a border in your primary colour:
.neeto-cal-eui-container { border: 1px solid rgb(var(--neeto-cal-primary-color)); }