nylas-page-styling
Overview
The nylas-page-styling component is a UI component that allows users to customize the styling of the scheduling page.
To use this component, pass a slot custom-page-style-inputs to the nylas-scheduler-editor component with the input
fields you want to display. The component 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 component cannot be used as an independent component. It must be used within the nylas-scheduler-editor component.
| Version | 1.1.4 |
| Install (React) | npm install @nylas/react |
| Import (React) | import { NylasPageStyling } from '@nylas/react'; |
| Import (CDN) | <script type="module">
import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-page-styling/nylas-page-styling.es.js";
defineCustomElement();
</script> |
Events
| Event | Description | Type |
|---|---|---|
bookingFormSubmitted | This event is fired when the form is submitted in the parent component. | CustomEvent<void> |
valueChanged | This event is fired when the email reminders change. | CustomEvent<{ value: string; name: string; valueChanged?: ((event: CustomEvent<{ value: string; name: string; }>) => void) | undefined; }> |
Slots
| Slot | Description |
|---|---|
"custom-page-style-inputs" | This slot is used to pass a custom page style form to the Nylas Scheduler Editor component. |
Shadow 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 submut button label input textfield |
"nps__title-input-textfield" | The page styling page title input textfield |
Built with StencilJS