Nylas-hosted Scheduling Pages

Nylas automatically generates a hosted Scheduling Page when you create a public Configuration with a slug. Hosted Scheduling Pages provide the scheduling UI and booking flow without you needing to embed components in your project.

How hosted Scheduling Pages work

When you create a public Configuration with a slug, Nylas automatically generates a hosted Scheduling Page at book.nylas.com/<SLUG>. This page handles…

• Date and time selection for booking events.
• Collecting guest information using booking forms.
• Displaying booking confirmation information and sending confirmation messages.
• Optimizing the Scheduling Page for mobile devices.
• Automatic language detection and localization.

Redirect users to hosted Scheduling Page

If you’re using a hosted Scheduling Page in your project, you need to redirect your users to it. The following example redirects the user to the Scheduling Page after they click a button.

function ScheduleButton() {
  const handleClick = () => {
    window.open('https://book.nylas.com/<SLUG>', '_blank');
  };

  return (
    <button onClick={handleClick}>
      Schedule a Meeting
    </button>
  );
}

Add hosted Scheduling Page to your project

If you don’t want to embed the Scheduler Editor or Scheduling components in your project, but you still want to let users schedule bookings in your application, you can include a hosted Scheduling Page as an iframe.

<iframe
  src="https://book.nylas.com/<SLUG>"
  width="100%"
  height="600px"
  frameborder="0"
  title="Schedule a meeting">
</iframe>

Subscribe to webhook notifications

If you want to receive real-time updates when bookings are made using your Scheduling Page, you can subscribe to booking.created webhook notifications.

You need to have a functioning webhook endpoint to receive webhook notifications. For more information, see Using webhooks with Nylas.

curl --request POST \
  --url "https://api.us.nylas.com/v3/webhooks" \
  --header 'Accept: application/json, application/gzip' \
  --header 'Authorization: Bearer <NYLAS_API_KEY>' \
  --header 'Content-Type: application/json' \
  --data '{
    "triggers": ["booking.created"],
    "url": "<WEBHOOK_URL>"
  }'

Customize hosted Scheduling Page

You can specify certain settings to customize your hosted Scheduling Pages.

Pre-fill the booking form

Hosted Scheduling Pages support URL query parameters to pre-fill booking form fields. This lets you pass known values (for example, the guest’s name or email address) directly in the link to your Scheduling Page. Hosted Scheduling Pages support the following query parameters:

• name: The guest’s name.
• email: The guest’s email address.
• Any keys in additional_fields that you defined in your Configuration.

Query parameters persist on rescheduling, cancellation, and booking confirmation pages.

For example, the following URL pre-fills the guest’s name, email address, and an additional field (patient_id):

https://book.nylas.com/us/<NYLAS_CLIENT_ID>/meet-nylas/?name=Leyah&email=[email protected]&patient_id=a1234

You can add __readonly to any query parameter in the URL to make a pre-filled field read-only (for example, ?name__readonly=Leyah).

Customize Scheduling Page style

Whitelabeled hosted Scheduler is available for Contract plans only.

You can style Nylas-hosted Scheduling Pages to match your brand’s aesthetic. Nylas supports the following pre-defined keys in the appearance object:

• color: The primary color of the Scheduling Page.
• company_logo_url: A URL that points to the company logo. If not set, the Scheduling Page displays the Nylas logo.
• submit_button_label: Custom text for the Submit button. If not set, the button uses the default “Submit” label.
• thank_you_message: A custom “thank you” message to display on the Confirmation page.

The following examples add the company logo URL, primary color, submit button label, and “thank you” message options to the Scheduler Editor.

HTML/Vanilla JSReact

<script>
  import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js";
  defineCustomElement();
</script>

<nylas-scheduler-editor>
  <div slot="custom-page-style-inputs">
    <label>Company logo URL</label>
    <input-image-url name="company_logo_url"></input-image-url>

    <label>Primary color</label>
    <input-color-picker name="color"></input-color-picker>

    <label>Submit button label</label>
    <input-component name="submit_button_label" type="text"></input-component>

    <label>Thank you message</label>
    <text-area-component name="thank_you_message" placeholder="You'll receive an email confirmation soon.">
    </text-area-component>
  </div>
</nylas-scheduler-editor>

<NylasSchedulerEditor>
  <div slot="custom-page-style-inputs">
    <div>
        <label>Company logo URL</label>
        <InputImageUrl name="company_logo_url" />
    </div>

    <div>
        <label>Primary color</label>
        <div className="color-picker-container">
            <InputColorPicker name="color" />
        </div>
    </div>

    <div>
        <label>Submit button label</label>
        <div>
            <InputComponent name="submit_button_label" type="text" />
        </div>
    </div>

    <div>
        <label>Thank you message</label>
        <div>
            <TextareaComponent name="thank_you_message" placeholder="You'll receive an email confirmation soon." maxLength={500} />
        </div>
    </div>
  </div>
</NylasSchedulerEditor>