Skip to content
Nylas Docs

Add styling options to the Scheduler Editor

This page explains how to add styling options to the Scheduler Editor so organizers can modify the visual elements of their Scheduling Pages.

How Scheduling Page styling works

A configuration can include the appearance object that accepts any key/value pairs for passing CSS properties, label changes, and other customizations. When an organizer configures appearance settings in the Scheduler Editor, or when you make a Create Configuration request or an Update Configuration request with the appearance object, Nylas updates the appearance object as returned from the UI settings endpoint and emits the configSettingsLoaded event. You can add the eventOverrides property to the Scheduling Component to listen for the configSettingsLoaded event and apply the settings to the Scheduling Component.

An organizer configures appearance settings in the Scheduler Editor. Nylas emits the configSettingsLoaded event. The developer applies the settings to the Scheduling Component.

Add styling options to the Scheduler Editor

By default, the Scheduler Editor includes the Page styles tab where organizers modify the following elements:

  • Page URL: A URL slug for the Scheduling Page.
  • Page name: The Scheduling Page name displayed in the top-left corner of the calendar view. If not set, Scheduler displays the organizer’s user name.

You can use the nylas-page-styling component to include additional styling options in the Page styles tab. To use this component, you need to pass a custom-page-style-inputs slot to the Scheduler Editor component, including the input fields you want to display. The nylas-page-styling component automatically updates the appearance object whenever the input fields are changed.

Scheduler supports the following input components:

You should set the name attribute of each input field to match the key in the appearance object. For example, if the appearance object has a company_logo_url key, you need to set "name=company_logo_url" in the input component.

Styling options for hosted Scheduling Pages

Nylas includes pre-defined keys for the appearance object that you can use for Nylas-hosted Scheduling Pages.

"appearance": {
  "company_logo_url": "string",
  "color": "string",
  "submit_button_label": "string",
  "thank_you_message": "string"
}
  • Company logo URL (company_logo_url): The URL of the company logo displayed on the Scheduling Page. If not set, Scheduler displays the Nylas logo.
  • Primary color (color): The primary color of the Scheduling Page.
  • Submit button label (submit_button_label): The custom text label for the Submit button.
  • Thank you message (thank_you_message): The custom thank you message on the confirmation page.

The following examples add Company logo URL, Primary color, Submit button label, and Thank you message options to the Scheduler Editor:

!!!include(v3_code_samples/scheduler/custom-page-style-inputs.html" />
!!!include(v3_code_samples/scheduler/custom-page-style-inputs.tsx)!!!

The Page Styles tab including Company logo URL, Primary color, Submit button label, and Thank you message.

Listen for configSettingsLoaded and apply settings

Next, you add the eventOverride property to the Scheduling Component to listen for the configSettingsLoaded event and apply the settings as desired.

Example: Company logo URL

If the company_logo_url value is valid, Scheduler displays the company logo in the Scheduling Page header.

!!!include(v3_code_samples/scheduler/company-logo-url.html" />
!!!include(v3_code_samples/scheduler/company-logo-url.tsx)!!!

Example: Primary color

The color value is a hexadecimal color code, replacing --nylas-primary and --nylas-base-500 in the themeConfig property. The colorDark10 and colorDark20 values are slightly darker variants of the provided color that replace --nylas-base-600 and --nylas-base-700. The values are stored in a state value and passed to the Scheduling Component through the themeConfig property.

!!!include(v3_code_samples/scheduler/primary-color.html" />
!!!include(v3_code_samples/scheduler/primary-color.tsx)!!!

Example: Submit button label and Thank you message

submit_button_label overwrites the bookNowButton value and thank_you_message overwrites the bookingConfirmedDescription value.

!!!include(v3_code_samples/scheduler/submit-button-thank-you-message.html" />
!!!include(v3_code_samples/scheduler/submit-button-thank-you-message.tsx)!!!