nylas-custom-event-slug

The nylas-custom-event-slug element allows users add a custom URL slug for their event link.

PreviewCode

import { NylasCustomEventSlug } from '@nylas/react';

export default function NylasCustomEventSlugExample() {
return (
<div className="inline-block border border-dashed border-gray-300 min-w-[700px] rounded-md p-4 justify-center">
  <NylasCustomEventSlug requiresSlug={true} defaultUrlSlug="default-url-slug" />
</div>
);
}

Properties

defaultUrlSlug?

Name	defaultUrlSlug
Description	The default custom event slug.
Type	string | undefined

isOpen?

Name	isOpen
Description	Is the custom event slug card expanded.
Type	boolean
Default	true

name?

Name	name
Description	The name of the element.
Type	string
Default	'custom-event-slug'

requiresSlug?

Name	requiresSlug
Description	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 that are public.
Type	boolean
Default	false

selectedConfiguration?

Name	selectedConfiguration
Description	The selected Configuration.
Type	Configuration | undefined

selectedLanguage?

Name	selectedLanguage
Description	The selected language.
Type	LANGUAGE_CODE.de | LANGUAGE_CODE.en | LANGUAGE_CODE.es | LANGUAGE_CODE.fr | LANGUAGE_CODE.ja | LANGUAGE_CODE.ko | LANGUAGE_CODE.nl | LANGUAGE_CODE.sv | LANGUAGE_CODE.zh | undefined

slugErrorMessage?

Name	slugErrorMessage
Description	Slug error message.
Type	string
Default	''

Standalone properties

The following props are automatically configured when used within NylasSchedulerEditor. Set these props manually only if you’re using the component independently.

themeConfig?

Name	themeConfig
Description	The theme configuration.
Type	undefined | { '--nylas-primary'?: string | undefined; '--nylas-info'?: string | undefined; '--nylas-success'?: string | undefined; '--nylas-warning'?: string | undefined; '--nylas-error'?: string | undefined; '--nylas-error-pressed'?: string | undefined; '--nylas-base-0'?: string | undefined; '--nylas-base-25'?: string | undefined; '--nylas-base-50'?: string | undefined; '--nylas-base-100'?: string | undefined; '--nylas-base-200'?: string | undefined; '--nylas-base-300'?: string | undefined; '--nylas-base-400'?: string | undefined; '--nylas-base-500'?: string | undefined; '--nylas-base-600'?: string | undefined; '--nylas-base-700'?: string | undefined; '--nylas-base-800'?: string | undefined; '--nylas-base-900'?: string | undefined; '--nylas-base-950'?: string | undefined; '--nylas-color-blue-50'?: string | undefined; '--nylas-color-blue-100'?: string | undefined; '--nylas-color-blue-300'?: string | undefined; '--nylas-color-blue-500'?: string | undefined; '--nylas-color-blue-700'?: string | undefined; '--nylas-color-blue-900'?: string | undefined; '--nylas-color-red-50'?: string | undefined; '--nylas-color-red-100'?: string | undefined; '--nylas-color-red-300'?: string | undefined; '--nylas-color-red-500'?: string | undefined; '--nylas-color-red-700'?: string | undefined; '--nylas-color-red-900'?: string | undefined; '--nylas-color-green-50'?: string | undefined; '--nylas-color-green-100'?: string | undefined; '--nylas-color-green-300'?: string | undefined;'--nylas-color-green-500'?: string | undefined; '--nylas-color-green-700'?: string | undefined; '--nylas-color-green-900'?: string | undefined; '--nylas-color-yellow-50'?: string | undefined; '--nylas-color-yellow-100'?: string | undefined; '--nylas-color-yellow-300'?: string | undefined; '--nylas-color-yellow-500'?: string | undefined; '--nylas-color-yellow-700'?: string | undefined; '--nylas-color-yellow-900'?: string | undefined; '--nylas-color-purple-50'?: string | undefined; '--nylas-color-purple-100'?: string | undefined; '--nylas-color-purple-300'?: string | undefined; '--nylas-color-purple-500'?: string | undefined; '--nylas-color-purple-700'?: string | undefined; '--nylas-color-purple-900'?: string | undefined; '--nylas-color-sky-50'?: string | undefined; '--nylas-color-sky-100'?: string | undefined; '--nylas-color-sky-300'?: string | undefined; '--nylas-color-sky-500'?: string | undefined; '--nylas-color-sky-700'?: string | undefined; '--nylas-color-sky-900'?: string | undefined; '--nylas-color-black'?: string | undefined; '--nylas-color-grey-900'?: string | undefined; '--nylas-color-grey-800'?: string | undefined; '--nylas-color-grey-700'?: string | undefined; '--nylas-color-grey-600'?: string | undefined; '--nylas-color-grey-500'?: string | undefined; '--nylas-color-grey-400'?: string | undefined; '--nylas-color-grey-300'?: string | undefined; '--nylas-color-grey-200'?: string | undefined; '--nylas-color-grey-100'?: string | undefined; '--nylas-color-grey-50'?: string | undefined; '--nylas-color-white'?: string | undefined; '--nylas-font-family'?: string | undefined; '--nylas-font-size'?: string | undefined; '--nylas-border-radius'?: string | undefined; '--nylas-border-radius-2x'?: string | undefined; '--nylas-border-radius-3x'?: string | undefined; }

Events

Event	Description
valueChanged	Fired when the slug value changes.

CSS parts

Part	Description
nces	The nylas-custom-event-slug container.
nces__body	The body of the event communication section.
nces__drawer-toggle--container	The card’s drawer toggle container.
nces__header	The header of the event communication section.
nces__input-textfield	The custom slug input textfield.

Code samples

The nylas-custom-event-slug element is automatically included in the main NylasSchedulerEditor component. The following code samples show how to use the element on its own.

StandaloneError handlingEvent handlersCustom theme

<nylas-custom-event-slug
  name="custom-event-slug"
  default-url-slug="my-event"
  requires-slug="true">
</nylas-custom-event-slug>

<nylas-custom-event-slug
  name="custom-event-slug"
  default-url-slug="my-event"
  requires-slug="true"
  slug-error-message="This slug is already taken">
</nylas-custom-event-slug>

// Listen for value changes
element.addEventListener('valueChanged', (event) => {
  const { value, name } = event.detail;
  console.log('Slug changed:', { value, name });

  // Update your configuration
  updateEventSlug(value, name);
});

<nylas-custom-event-slug
  name="custom-event-slug"
  default-url-slug="my-event"
  requires-slug="true"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
</nylas-custom-event-slug>