Localizing your Scheduler implementation

Nylas offers Scheduler in the following languages:

• English (en)
• German (de)
• Dutch (nl)
• Japanese (ja)
• Swedish (sv)
• Spanish (es)
• French (fr)
• Korean (ko)
• Simplified Chinese (zh)

For any unsupported languages, Nylas defaults to English.

Customize Scheduler UI text

Every UI text element in the Scheduler UI components includes a value that determines the label or text displayed in the UI (for example, nextButton: Next). You can override the default values in each supported language to customize your Scheduler UI.

1. In the Scheduler Editor Component or Scheduler Component, set localization.
2. Specify your desired language and any key/value pairs for the UI text that you want to update.

Nylas doesn’t translate or localize custom text. If you customize the UI text in one language, you might need to update the corresponding text in other supported languages to meet your localization needs.

The following example updates the Availability tab label in the Scheduler Editor to “Open Slots” in English, and “Freie Slots” in German.

HTML/Vanilla JSReact

<nylas-scheduler-editor />

<script>
  const schedulerEditor = document.querySelector("nylas-scheduler-editor");
  schedulerEditor.localization = {
    en: {
      availabilityTab: "Open Slots",
    },
    de: {
      availabilityTab: "Freie Slots",
    },
  };
</script>

<NylasSchedulerEditor
  localization={{
    en: {
      availabilityTab: "Open Slots",
    },
    de: {
      availabilityTab: "Freie Slots",
    },
  }}
/>

Localization support for Scheduler Editor and Scheduling Pages

Since @nylas/web-elements 2.5.2, the Scheduling Component detects the guest’s browser language and shows the Scheduling Page in that language when it’s one of the 9 supported languages. Earlier versions always started in English. The Scheduling Component picks its starting language in this order:

1. The lang (or language) URL query parameter, for example ?lang=fr.
2. The defaultLanguage prop.
3. The language in bookingInfo.
4. The selectedLanguage in defaultSchedulerState.
5. The browser language.
6. English (en).

The Scheduler Editor Component doesn’t detect the browser language. It starts in the language you set with defaultLanguage, or in English. On either component, users can switch languages at any time with the Language dropdown.

The following example pins a Scheduling Page to Spanish, whatever the guest’s browser language is.

HTML/Vanilla JSReact

<nylas-scheduling default-language="es"></nylas-scheduling>

<NylasScheduling defaultLanguage="es" />

Scheduler doesn’t translate or localize information that organizers enter (for example, the event title or details).

Localization support for guest email notifications

When a guest books an event, they can select their preferred language using the Language dropdown on the Scheduling Page. When the booking is confirmed, the guest receives a confirmation email in the language they chose. Scheduler also sends other email notifications, like emails for rescheduled or cancelled bookings, in the same language.

Scheduler doesn’t translate or localize information that organizers enter (for example, the event title or details).

Organizers and participants receive email notifications in English only.