- Products
- Solutions Use casesBy industry
- Developers
- Resources Connect
Email API
Calendar API
Scheduler
Contacts API
ExtractAI
Salesforce email integration
Google email & calendar integration
Outlook email & calendar integration
IMAP integration
Calendar management
Embedded contextual email
Scheduling automation
Automated outreach
Intelligent data extraction
Ecommerce
Telehealth
Real estate
Financial technology
Educational technology
Expense management
Customer relationship management
Applicant tracking system
Communications platform
Marketplaces
Document management
Docs
SDKs
Tutorials
API status
Changelog
Support
Blog
Events
Guides
Inspiration gallery
Partners
Build vs. buy
Customer stories
Security & Compliance
Why Nylas
Newsroom
Jump to section
Featured articles
Jump to section
Intro
We’re excited to announce the launch of the Nylas Scheduler. Earlier this year, we launched the Nylas API v3.
Supporting in-app user scheduling is a must-have for products and services. Examples of features include sharing availability, booking appointments, managing meetings, coordinating teams.
This blog post is an overview of how to add scheduling functionality to your user flow using the Nylas Scheduler!
Overview of Nylas Scheduler
Let’s break down the different features available in the Nylas Scheduler before we add the Nylas Scheduler to our user flow. The Scheduler is broken down into three core features:
- Scheduler Editor UI to manage scheduling pages
- Scheduling UI for end-users to book appointments
- Scheduler API for programatically creating and configuring scheduling pages
The Nylas Scheduler UI supports all frontend frameworks including vanilla HTML. We provide out-of-the-box web and react components for adding the Scheduler UI to your front-end application.
In the following section we will take a look at adding the Nylas Scheduler to a React application.
Getting started with Nylas v3
Here are the steps to get started:
- Sign up for a Nylas account for free!
- Create a new application, using our
sandboxenvironment to skip adding a connector step. Thesandboxenvironment allows for easy access to our APIs and is not recommended to use for going to production:
- Take note of the applications ID,
Client ID, which we’ll use as NYLAS_CLIENT_ID in our application:
Before continuing to the next section, we will need to set up hosted authentication so we can access users’ calendar to share availability in the Scheduler. Take a look at this section in our developer documentation on setting up hosted authentication using our sandbox environment.
Now we’ve configured Nylas and next will add the Scheduler to our React application using the npm package @nylas/react.
Setting Up Nylas Scheduler
Now let’s setup the Nylas Scheduler in our frontend application. All the code can be found here.
We’ll be adding the scheduler to a react application, so all code that follows will be for a React frontend. We will consider two different frontend paths:
/scheduler-editorwill be where an admin user can create and manage schedulers, whereNYLAS_SCHEDULER_CONFIGURATION_IDrepresents each Scheduler created/?config_id=NYLAS_SCHEDULER_CONFIGURATION_IDwhere the Scheduler will be displayed for a user to book time slots
Here is the React code for displaying both the Scheduler Editor and Scheduler:
import { NylasSchedulerEditor, NylasScheduling } from "@nylas/react";
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 (
{
configId.length > 0 ? (
<div>
<NylasScheduling
configurationId={configId}
schedulerApiUrl="https://api.us.nylas.com"
/>
</div>
) : (
<div>
<NylasSchedulerEditor
schedulerPreviewLink={`${window.location.origin}/?config_id={config.id}`}
nylasSessionsConfig={{
// Replace with your Nylas client ID from the previous
clientId: "NYLAS_CLIENT_ID",
redirectUri: `${window.location.origin}/scheduler-editor`,
domain: "https://api.us.nylas.com/v3",// or 'https://api.eu.nylas.com/v3' for EU data center
hosted: true,
accessType: 'offline',
}}
defaultSchedulerConfigState={{
selectedConfiguration: {
// Creates a public configuration which doesn't require a session
requires_session_auth: false,
scheduler: {
// The callback URLs to be set in email notifications
// The URL of the email notification includes the booking reference
rescheduling_url:`${window.location.origin}/reschedule/:booking_ref`,
cancellation_url:`${window.location.origin}/cancel/:booking_ref`
}
}
}}
/>
</div>
)}
);
export default App;
Ensure to replace the NYLAS_CLIENT_ID with the Client Id from the Nylas dashboard. For now, we’ve only shared the rescheduling and cancellation URLs as part of the email notification sent out, however, the React frontend for those pages is not part of the above code.
In addition to using the Scheduling Editor and Scheduler user interface, developers can consider programmatically managing the Scheduler using our Scheduler API.
Now we’ve added the Scheduler to our application to both manage scheduler configurations and also allow users’ to book time slots:
Build Time
In this blog post, we explored how developers can add the Nylas Scheduler to build powerful scheduling functionality. Using the Scheduler API developers can enhance user workflows and deliver a seamless scheduling experience.
You can sign up for Nylas for free and start building! Continue building with Nylas by exploring different quickstart guides or by visiting our developer documentation.
