Scheduler Editor Components
nylas-scheduler-editor
Overview
The nylas-scheduler-editor component is a form that allows users to configure the settings for the Nylas Scheduler.
| Version | 2.0.0 |
| Install (React) | npm install @nylas/react |
| Import (React) | import { NylasSchedulerEditor } from '@nylas/react'; |
| Import (CDN) | <script type="module">
import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js";
defineCustomElement();
</script> |
Example
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
additionalParticipants | This prop is used to populate the additional participants and their availability in the scheduler editor. | AdditionalParticipant[] | undefined | |
conferenceProviders | This prop will be used to populate the conference provider options in the editor. | Record<string, string> | undefined | |
configurationId | The configuration id to use for the scheduler editor. | string | undefined | |
defaultAuthArgs | The default authentication arguments to use when authenticating a user. | AuthArgs[] | undefined | |
defaultLanguage | This prop will allow to set a default language for the Nylas scheduling page. | LANGUAGE_CODE | undefined | |
defaultSchedulerConfigState | The default scheduler config store state. | SchedulerConfigState | undefined | |
enableUserFeedback | Indicates if the user feedback feature is enabled. | boolean | true | |
eventOverrides | This provides a way to override the default event handlers. | EventOverrides | {} | |
experimentalFeatures | This prop is to opt in to experimental features. | Record<string, boolean> | undefined | |
hideEditorTabs | This optional prop is used to hide tabs in the editor. | Tab[] | [] | |
localization | This prop will allow to override the default localization strings for each language. | Locale | undefined | |
mode | This is used to set the mode for the scheduler config. | "app" | "composable" | 'app' | |
nylasApiRequest | The Nylas Api Request instance. | NylasApiRequest | undefined | |
nylasBranding | This prop will allow to show / hide the option to manage nylas branding in the email template. By default, this is set to true. When enabled, the option to show/hide nylas branding will be shown in the email template. To disable the option to show/hide nylas branding, set this prop to false. | boolean | undefined | true | |
nylasSessionsConfig | The Nylas Sessions configuration. | Config | undefined | |
requiresSlug | Indicates if a slug is required for the configuration. When set to true, the user must enter a slug when creating or editing a configuration. The slug is used for hosted pages. If using Nylas hosted scheduling pages, the schedulerPreviewLink prop can be set to redirect to a public configuration as follows: https://book.nylas.com/us/<YOUR_NYLAS_APP_CLIENT_ID>/{slug}. us denotes the region. Replace it with the appropriate region of your application. Replace <YOUR_NYLAS_APP_CLIENT_ID> with your Nylas app client ID. The {slug} placeholder is replaced with the appropriate slug when the scheduler preview button is clicked. Note: Nylas hosted scheduling pages are only available for public configurations. | boolean | false | |
schedulerPreviewLink | The scheduler preview link used when the user clicks the preview button. If requiresSlug is true, you can use the placeholder {slug} to insert the slug in the link for Nylas hosted scheduling pages. Additionally, you can use the placeholder {config.id} to insert the configuration ID anywhere in the link. For example: https://book.nylas.com/us/<YOUR_NYLAS_APP_CLIENT_ID>/{slug}. us denotes the region. Replace it with the appropriate region of your application. Replace <YOUR_NYLAS_APP_CLIENT_ID> with your Nylas app client ID. Note: Nylas hosted scheduling pages are only available for public configurations. | string | '' |
Events
| Event | Description | Type |
|---|---|---|
init | This event is fired when the provider is initialized. | CustomEvent<HTMLNylasSchedulerEditorElement> |
loggedIn | This event is fired when the NylasAuth isAuthenticated state changes to true. | CustomEvent<HTMLNylasSchedulerEditorElement> |
loggedOut | This event is fired when the NylasAuth isAuthenticated state changes to false. | CustomEvent<HTMLNylasSchedulerEditorElement> |
schedulerConfigCloseClicked | This event is fired when the close button on scheduler config is clicked. | CustomEvent<HTMLNylasSchedulerEditorElement> |
Methods
schedulerConnector() => Promise<NylasSchedulerConfigConnector | undefined>
This method is used to get the NylasSchedulerConfigConnector instance.
store() => Promise<NylasSchedulerConfigStoreType | undefined>
This method is used to get the NylasSchedulerConfigStore instance.
Slots
| Slot | Description |
|---|---|
"custom-page-style-inputs" | This slot is used in “app” mode to pass a custom page style form. |
"login-required" | This slot is used to display a message when the user is not logged in. |
Shadow Parts
| Part | Description |
|---|---|
"nse__close-button" | The close button of the scheduler editor. |
"nse__content" | The content of the scheduler editor. |
"nse__header" | The header of the scheduler editor. |
"nse__language" | |
"nse__list-configurations" | The list of configurations. |
"nse__login-required" | The login required component. |
"nse__login-required-card" | The card of the login required component. |
"nse__login-required-disclaimer-text" | The icon of the login required component. |
"nse__login-required-google-button" | The Google button of the login required component. |
"nse__login-required-microsoft-button" | The Microsoft button of the login required component. |
"nse__login-required-other-provider-button" | The other provider button of the login required component. |
"nse__login-required-text" | The text of the login required component. |
"nse__title" | The title of the scheduler editor. |
Built with StencilJS