Customise the booking page

NeetoCal lets you customize 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.

Customizing a booking page

1. Click on the Scheduling links tab on the left pane.

2. Click on the Scheduling link for which you want to customize the booking page.

3. Click on the Theme tab.

1. You can customize the style, change the cover image, change the logo, or add custom CSS.

2. Make necessary changes.

3. Click on Save.

Setting a default theme

If you set a theme as a default theme, it will be applied to all the scheduling links you create in the future.

1. Click on the Scheduling links tab on the left pane.

2. Click on the Scheduling link.

3. Click on the Theme tab.

4. Click on the Customize Style.

5. Scroll to the bottom.

6. Click on Set as default theme.

7. Click on Save.

Adding custom CSS

Custom CSS is a Pro feature. 

1. Click on the Scheduling links tab on the left pane.

2. Click on the Scheduling link.

3. Click on the Theme tab.

4. Click on  Custom CSS.

5. Click on Expand editor for a larger editor.

6. Write your CSS. The preview updates as you type.

7. 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 color 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 colors 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)); }