nylas-page-styling

The nylas-page-styling element allows users to customize the styling of the Scheduling Page. To use this element, pass a slot custom-page-style-inputs to the nylas-scheduler-editor component with the input fields you want to display. The element will automatically update the appearance object when the input fields are changed. Ensure that the input fields have the name attribute set to the key in the appearance object.

If you want to style the Nylas Hosted Scheduler page, you can use this component to customize the appearance of the page. The fields that can be customized in the Nylas Hosted Scheduler page are:

Primary color: (name: color)
Company logo: (name: company_logo_url)
Submit button label: (name: submit_button_label)
Thank you message: (name: thank_you_message)

This element can’t be used as an independent element. It must be used within the nylas-scheduler-editor component.

import React from 'react';
import { NylasPageStyling } from '@nylas/react';

export default function NylasPageStylingExample() {
  return (
    <div className="inline-block border border-dashed border-gray-300 rounded-md p-4 justify-center">
      <NylasPageStyling
        themeConfig={{
          '--nylas-primary': '#007bff',
          '--nylas-base-100': '#ffffff',
          '--nylas-base-900': '#000000'
        }}
      />
    </div>
  );
}

Properties

`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`

`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
`bookingFormSubmitted`	Fired when the form is submitted in the parent component.
`valueChanged`	Fired when the email reminders change.

Slots

Slot	Description
`custom-page-style-inputs`	This slot is used to pass a custom page style form to the Nylas Scheduler Editor component.

CSS parts

Part	Description
`nps`	The `nylas-page-styling` container.
`nps__body`	The body of the page styling section.
`nps__color-picker`	The page styling color picker.
`nps__color-picker-button`	The page styling color picker button.
`nps__color-picker-button-label`	The page styling color input field label.
`nps__color-picker-button-selected-label`	The page styling color picker label denoting which color is selected.
`nps__company-name-input-textfield`	The page styling company name input textfield.
`nps__drawer-toggle--container`	The page styling drawer toggle container.
`nps__header`	The header of the page styling section.
`nps__input-image-url`	The page styling company logo input textfield.
`nps__message-textarea`	The page styling thank you message textarea.
`nps__submit-button-label-input-textfield`	The page styling submit button label input textfield.
`nps__title-input-textfield`	The page styling page title input textfield.

Code samples

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

<nylas-scheduler-editor
  configuration-id="your-config-id">
  <div slot="custom-page-style-inputs">
    <nylas-page-styling>
      <input name="color" type="color" value="#007bff" />
      <input name="company_logo_url" type="url" placeholder="Company Logo URL" />
      <input name="submit_button_label" type="text" placeholder="Submit Button Label" />
      <textarea name="thank_you_message" placeholder="Thank You Message"></textarea>
    </nylas-page-styling>
  </div>
</nylas-scheduler-editor>

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

  // Update your appearance configuration
  updatePageStyling(value, name);
});

// Listen for form submission
element.addEventListener('bookingFormSubmitted', (event) => {
  console.log('Booking form submitted');

  // Handle the form submission
  handleFormSubmission();
});

<nylas-scheduler-editor
  configuration-id="your-config-id"
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
  <div slot="custom-page-style-inputs">
    <nylas-page-styling>
      <!-- Custom styling inputs will go here -->
    </nylas-page-styling>
  </div>
</nylas-scheduler-editor>