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 (eitherus
oreu
).<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' \
--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 tofalse
. - Set
requiresSlug
totrue
. The Scheduler Editor will display a text box in the UI so organizers can enter a slug for the Scheduling Page. - Set
schedulerPreviewLink
tohttps://book.nylas.com/<REGION>/><NYLAS_CLIENT_ID>/{slug}
.- Replace
<REGION>
with your region (eitherus
oreu
). - Replace
<NYLAS_CLIENT_ID>
with your Nylas client ID. {slug}
is a placeholder that the Scheduler Editor automatically updates.
- Replace
The following examples add the Nylas Scheduler Editor for Nylas-hosted Scheduling Pages.
<!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>
<script
type="module"
src="./node_modules/@nylas/web-elements/dist/nylas-web-elements/nylas-web-elements.esm.js"
></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">
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.