Hosted Scheduling Pages

Nylas allows you to host Scheduling Pages under the book.nylas.com subdomain, so you can implement link-based scheduling in your Nylas application. This page explains how to create a Nylas-hosted Scheduling Page and integrate it with your project.

Create a hosted Scheduling Page

When you create a public configuration with a URL slug, Nylas automatically hosts the Scheduling Page at:

https://book.nylas.com/<REGION>/<NYLAS_CLIENT_ID>/<SLUG>

<REGION> represents the data center region where your Nylas application is hosted (either us or eu).
<NYLAS_CLIENT_ID> is your Nylas application's client ID, which you can find in the v3 Dashboard.
The <SLUG> must be unique to the <NYLAS_CLIENT_ID>.

You can create a public configuration using either the Scheduler API or the Scheduler Editor.

Create a public configuration using the Scheduler API

To create a public configuration for a Nylas-hosted Scheduling Page, make a Create Configuration request that includes the slug you want to use.

🔍 By default, Nylas creates a public configuration that doesn't require a session (requires_session_auth: false).

For the following code sample, Nylas hosts the Scheduling Page at https://book.nylas.com/us/<NYLAS_CLIENT_ID>/meet-nylas.

curl --request POST \
  --url "<https://api.us.nylas.com/v3/grants/><NYLAS_GRANT_ID>/scheduling/configurations" \
  --header 'Accept: application/json, application/gzip' \
  --header 'Authorization: Bearer <NYLAS_API_KEY>' \
  --header 'Content-Type: application/json' \
  --data '{
    "slug": "meet-nylas",
    "participants": 
      [{
        "name": "Dorothy Vaughan",
        "email": "dorothy@emxaple.com",
        "is_organizer": true,
        "availability": {
            "calendar_ids": [
              "primary"
        ]
        },
        "booking": {
            "calendar_id": "primary"
        }
      }
    ],
    "availability": {
        "duration_minutes": 30
    },
    "event_booking": {
      "title": "My event"
    },
    "scheduler": {
      "rescheduling_url": "https://book.nylas.com/us/reschedule/:booking_ref",
      "cancellation_url": "https://book.nylas.com/us/cancel/:booking_ref",
      "organizer_confirmation_url": "https://book.nylas.com/us/confirm/:booking_ref" /* Only required if you want to create organizer-confirmed bookings * /
    }
}'

Create a public configuration using the Scheduler Editor

When you create a Scheduling Page using the Scheduler Editor in the UI, Nylas creates a corresponding configuration.

⚠️ You must have a working front-end UI to use the Scheduler Editor to create a configuration. Follow the Scheduler Quickstart guide to get a local development environment up and running.

First, include the Scheduler Editor Component in your app. You must configure the following:

Make sure that the requires_session_auth property doesn't exist or set its value to false.
Set requiresSlug to true. The Scheduler Editor will display a text box in the UI so organizers can enter a slug for the Scheduling Page.
Set schedulerPreviewLink to https://book.nylas.com/<REGION>/><NYLAS_CLIENT_ID>/{slug}.
- Replace <REGION> with your region (either us or eu).
- Replace <NYLAS_CLIENT_ID> with your Nylas client ID.
- {slug} is a placeholder that the Scheduler Editor automatically updates.

The following examples add the Nylas Scheduler Editor for Nylas-hosted Scheduling Pages.

HTML (Scheduler Editor)
React
React (Scheduler Editor CSS)

<!DOCTYPE html>
<html class="h-full bg-white" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nylas Scheduler Editor Component</title>

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
      rel="stylesheet"
    />

    <script src="https://cdn.tailwindcss.com"></script>

    <style type="text/css">
      body {
        font-family: "Inter", sans-serif;
      }
    </style>
  </head>

  <body class="h-full">
    <div class="grid h-full place-items-center">
      <!-- Add the Nylas Scheduler Editor component -->
      <nylas-scheduler-editor>
        <!-- Add styling options to the Page styles tab -->
        <div slot="custom-page-style-inputs">
          <input-image-url>
            <label>Company logo URL</label>
            <name>company_logo_url</name>
          </input-image-url>

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

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

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

    <!-- Configure the Nylas Scheduler Editor component -->
    <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(); 
      
      const schedulerEditor = document.querySelector("nylas-scheduler-editor");
      schedulerEditor.requiresSlug = true;
      schedulerEditor.schedulerPreviewLink = `https://book.nylas.com/us/<NYLAS_CLIENT_ID>/{slug}`; // Replace <NYLAS_CLIENT_ID> with your Nylas client ID from the Nylas dashboard
      schedulerEditor.nylasSessionsConfig = {
        clientId: "NYLAS_CLIENT_ID", // Replace with your Nylas client ID from the Nylas dashboard
        redirectUri: `${window.location.origin}/scheduler-editor`,
        domain: "https://api.us.nylas.com/v3",
        hosted: true,
        accessType: "offline",
      };
      schedulerEditor.defaultSchedulerConfigState = {
        selectedConfiguration: {
          scheduler: { // The callback URLs to be set in email notifications. The URL of the email notification includes the booking reference.
            rescheduling_url: `https://book.nylas.com/us/reschedule/:booking_ref`,
            cancellation_url: `https://book.nylas.com/us/cancel/:booking_ref`,
            organizer_confirmation_url: `https://book.nylas.com/us/confirm/:booking_ref` // // Only required if you want to create organizer-confirmed bookings
          }
        }
      };
    </script>
  </body>
</html>

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { NylasSchedulerEditor, NylasScheduling } from "@nylas/react";
import "./App.css";

function App() {
  // Get the configuration ID from the URL query string
  const urlParams = new URLSearchParams(window.location.search);
  const configId = urlParams.get("config_id") || "";

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/scheduler-editor" element={
          <div>
            <NylasSchedulerEditor
              nylasSessionsConfig={{
                clientId: "NYLAS_CLIENT_ID", // Replace with your Nylas client ID from the Nylas dashboard
                redirectUri: `${window.location.origin}/scheduler-editor`,
                domain: "https://api.us.nylas.com/v3", //
                hosted: true,
                accessType: 'offline',
              }}
              requiresSlug={true} // This creates the text box to enter a slug when organizers 
              schedulerPreviewLink={`https://book.nylas.com/us/<NYLAS_CLIENT_ID>/{slug}`} // Replace <NYLAS_CLIENT_ID> with your Nylas client ID from the Nylas dashboard
              defaultSchedulerConfigState={{
                  selectedConfiguration: {
                    scheduler: { // The callback URLs to be set in email notifications. The URL of the email notification includes the booking reference
                      rescheduling_url: `https://book.nylas.com/us/reschedule/:booking_ref`, 
                      cancellation_url: `https://book.nylas.com/us/cancel/:booking_ref`,
                      organizer_confirmation_url: `https://book.nylas.com/us/confirm/:booking_ref` // Only required if you want to create organizer-confirmed bookings
                    }
                  }
              }}
            >
               // Add styling options to the Page styles tab
               <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}>           </TextareaComponent>
                        </div>
                    </div>
                 </div>
            </NylasSchedulerEditor>
          </div>
        } />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

html {
  height: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
}

Next, create a Scheduling Page from the Scheduler Editor.

Click Create new.
On the Create New page, enter the event title, the event duration, and the slug for the hosted Scheduling Page.
(Optional) Set other event details.
Click Create.

Hosted Scheduling Pages

Create a hosted Scheduling Page

Create a public configuration using the Scheduler API

Create a public configuration using the Scheduler Editor

More resources