Workspace booking page settings - Zoho Bookings Help

Workspace booking page settings

Alert
This page is applicable for Bookings 2.0 version only. To view the equivalent Bookings 1.0 version, please check this page.

1. In a nutshell

A workspace booking page groups all the event types that are offered within a workspace. You can set theme, header, footer, page title, description, background image, language, and customize the booking page to reflect your business theme. 

Info: There are also three other types of booking pages. 
  1. Business booking page - Allows you to book across multiple workspaces by displaying all available workspaces in a single view.
  2. Event type booking page allows to book a single event type.
  3. User booking page allows to book with a single user that lists all the events offered by that user.

2. Feature availability

  1. Available for paid plans
  2. Roles
    1. Super admins and admins can configure this setting for all workspaces
    2. Workspace admins can change settings of their assigned workspaces
    3. Managers and staff will not have access to it. 

3. Overview

You can set up the following in a workspace booking page. The same will be applied to all the event type booking pages under it. 
  1. Set theme
  2. Set the button text
  3. Pre-select options in booking page
  4. Set header
  5. Set footer
  6. Set title, description, and background image
  7. Set the language
  8. Upload custom CSS
  9. Upload favicon
  10. Reorder services

4. Steps to access workspace booking page settings

  1. Switch to the required workspace in the top-left corner, then click Booking Pages. 
  2. Under the Workspace booking page, click Themes and Layouts. You can perform the below settings for the workspace booking page.


4.1 Set theme

There are five predefined themes along with numerous color options to choose from for your booking page: Basic, Modern, Classic, Fresh and Compact. A preview of the selected theme and color can be found at the left to help you make a selection. 
  1. Under the Theme section, select the required layout.
  2. Choose a color under Color Options. You can preview the theme at the left.
  3. Click Save.
    Note: For Modern theme, you can set text for the book appointment button. The button text can have a maximum of 50 characters.


Info: Options for various settings differ for each theme.

4.2 Set button text

You can customize the button text on the booking page that says "Book Appointment" according to your preference. This is applicable only for Modern Theme. 
  1. Click the Theme section. Choose the Modern theme.
  2. Enter the required text under Button Text and click Save. 
    Note: Button text can have a maximum of 50 characters.


4.3 Pre-select options in booking page

You can choose to display the details of the first available appointment slot (such as date, time, and user) when a customer books an appointment. Alternatively, you can opt to show only the labels, such as "Choose user," "Pick a date," and "Select event type."
  1. Click the Theme section. Choose the Modern theme.
  2. Select the Pre-select option in booking page checkbox to show the first available options.
  3. Click Save. The screen below shows the selection options in the booking page showing the first available options.



  4. Alternatively, you can also deselect the checkbox Pre-select option in booking page to show the labels and click Save. The screen below shows the labels in the selection options.

4.4 Set header

You can set the header of the booking page, i.e the logo and title that appears at the top left. 
  1. Click the Header section to change the title as required and upload the logo image. 
  2. Click Save. 
    Info: The logo can have a maximum size of 5 MB. It can have a height of 50 px, and a width of 50 px to 110 px.  Applicable file types are jpg, png, and gif. 

    Note: You can hide any elements by clicking the eye icon  if it is not required.



You can set the footer of the booking page so customers can view information about your business, such as the contact number and social media links of your business.   
  1. Click the Footer section. 
  2. Add the contact number, address, email address, Facebook, Instagram, X and LinkedIn id of your business.
  3. Click Save. 

    Note: You can hide any elements by clicking the eye icon  if it is not required.

4.6 Set title, description, and background image

You can set the page title and description to convey details about your offerings or welcome the customers. Additionally, you can upload a background image that aligns with your brand personality to create a visually appealing and professional booking page. 
  1. Click the Page Properties section. 
  2. Enter the Title and Description.


     You can format the description with the below formatting options available.

    You can also add a link in the description by clicking the Create Link  icon.

  3. Click the Upload icon and browse the background image. A pop-up will appear in which you can crop the image and click Upload. 



  4. Adjust the Transparency level for the background image. 
  5. Click Save.  

Note: 
  1. Title can have up to 50 characters, and description can have a maximum of 2000 characters.
  2. You can hide any elements by clicking the eye icon  if it is not required.
    Info: The background image can have a maximum size of 5 MB and a maximum of 1000px for width and 300px for height. Applicable file types are jpg, png, jpeg, and gif.
  3. You can remove the background image by clicking the close icon
    in the background image option. 

4.7 Set language

This setting lets you choose the language for your booking page. You can display the booking page based on the customer's browser language or in a fixed language of your choice. You can also enable a language switcher to allow customers to select their preferred language. Bookings supports multiple global and regional languages, allowing you to present your booking page in the preferred language of your customers.

Category

Languages

Global languages

English (US), English (UK), French, French (Canada), German, Spanish, Italian, Portuguese, Brazilian Portuguese, Dutch, Swedish, Danish, Norwegian Bokmål, Finnish, Polish, Czech, Hungarian, Romanian, Greek, Croatian, Slovenian

Asian languages

Chinese (Simplified), Chinese (Traditional), Japanese, Korean, Thai, Vietnamese, Indonesian, Malay

Middle Eastern languages

Arabic, Hebrew, Farsi

South Asian languages

Hindi, Tamil, Telugu, Kannada, Malayalam, Bengali, Marathi, Gujarati, Punjabi, Urdu, Sinhala, Nepali, Assamese, Sindhi

Eastern European languages

Russian, Ukrainian
InfoInfo: This feature is available on Paid plans.
4.7.1 Language settings  

This determines the language in which the booking page is initially displayed to customers. There are two options available:
  • Location Based – The booking page is displayed in the language of the customer's browser language settings. For example, a customer whose browser language is set to French will see the booking page in French.
  • Fixed – The booking page is displayed in the selected language, regardless of the customer's location or browser settings. For example, if English is selected as the fixed language, all customers will see the booking page in English.
Note: If the Language switcher is enabled, customers can switch to any of the enabled languages to view the booking page.

To set the language:
  1. Click the Workspace Properties section.
  2. Select either Location Based or Fixed under Language.
  3. If you choose Fixed, select the language to be displayed on the booking page from the below dropdown.
4.7.2 Enable language switcher

The language switcher allows customers to manually change the language of the booking page. When enabled, a language dropdown is displayed on the booking page, allowing customers to switch to their preferred language from the selected languages enabled languages. When disabled, customers can view the booking page only in the configured language.

To enable the language switcher:
  1. Turn on the Language Switcher toggle.
  2. Click Select All to enable all supported languages, or choose specific languages to display on the booking page in the enabled languages.
Customer experience based on language settings  

Default Language

Language Switcher

Customer experience

Location Based

Off

The booking page is displayed in the customer's detected browser language. No language switcher is displayed.

Location Based

On

The booking page is displayed in the customer's detected browser language. Customers can use the language switcher to change the language. The detected language is highlighted with a location badge.

Fixed

Off

The booking page is displayed in the language selected in the settings. No language switcher is displayed.

Fixed

On
The booking page is displayed in the language selected in the settings. Customers can use the language switcher to select any other enabled language.
Info
Notes  
  • If the Language is set to Fixed, the selected language is automatically included in the Enabled Languages list.
  • If the Language is set to Location Based, all supported languages are enabled by default.
  • Turning off the Language Switcher preserves the configured enabled languages. These settings are restored when the switcher is enabled again.
  • At least one language must remain enabled. You cannot remove the last language from the Enabled Languages list.

4.8 Upload custom CSS

This setting lets you upload a custom CSS file to personalize the appearance of your booking page. By applying your own styles, you can align the booking page design with your brand’s colors, fonts, and layout. The uploaded custom CSS file will override the default styling of the booking page.

InfoInfo: This feature is available only for Premium plan.

  1. Click the Workspace Properties section.

  2. Click the Upload icon , select your custom CSS file, and click Save.



    Once uploaded, your custom styles will be applied to the booking page, giving you a personalized and branded booking experience.

    Note:
    • Only .css files are supported.
    • The file size must be 2 MB or less.
       Custom CSS usage guidelines
  1. To keep your data secure and prevent misuse, all custom CSS files are automatically sanitized before being applied. The following guidelines explain a few CSS rules that are not supported.

  2. External resources: Loading images, styles, or files from external URLs is not supported as they can be used for tracking or malicious activity. Example: background: url("https://example.com/image.png");

  3. External custom fonts: Fonts hosted outside the booking page cannot be used as they can pose security and tracking risks. Example: @font-face { src: url("https://example.com/font.woff"); }

  4. Script-based CSS (legacy features): CSS rules that allow script execution are blocked as they can be exploited to execute malicious code. Example: width: expression(alert('XSS'));

  5. Content injection and data access: CSS that injects content or reads page data is restricted as they can be used to leak sensitive information. Example: content: attr(data-secret);

  6. Cursor and filter effects: Certain cursor styles and filter properties are not supported due to known misuse cases in some browsers. Example: cursor: url("cursor.cur"), pointer;

  7. SVG namespaces: Custom SVG namespace declarations are restricted they can be exploited for advanced security attacks. Example: @namespace svg url("http://example.com/svg");
 Also for stable styling, use the elname attribute when writing custom CSS. Other HTML attributes may change and cause layout issues or breakages.

4.9 Upload favicon

This setting lets you upload a custom favicon to personalize your booking page. A favicon is a small logo displayed in browser tabs, bookmarks, and search results, helping users easily identify your booking page and reinforcing your brand identity.
Info
Info: This feature is only available for the Premium plan.
  1. Click to expand the Workspace Properties section.
  2. Click the Upload icon, select your favicon file, and click Save.


InfoNote: You can upload a custom favicon from Admin Center → Organization → Basic Information. However, it will be applied only when Zoho Bookings branding is disabled. If branding is enabled, the default Zoho Bookings icon will be displayed.
Once uploaded, the favicon will be applied to your booking page across supported browsers and platforms, giving your page a consistent and branded appearance.

4.10 Reorder services

You can reorder event types to define how they appear on your booking page. This helps you highlight important event types, control their display order, and make navigation easier for your customers. For example, if you offer multiple event types, you can move frequently-booked ones, such as consultations or training sessions, to the top of the list, so customers can find and book them more easily.
  1. Expand the Reorder Services section.



  2. Drag and arrange the event types in your preferred order. The updated order will automatically reflect on your booking page, ensuring customers view the event types in the sequence you’ve set.