Only show these results:

Schedule Editor Setup

There are two ways you can integrate the schedule editor into your application depending on your users' scheduling needs. If you're just starting out, we recommend trying the instant scheduler first as it's the quickest and easiest to get started.

Instant Integration

Instant Scheduler allows an organizer to create and edit their own scheduling pages in your application using the schedule editor. With this setting, the Schedule Editor can only be used with one account at a time, so Organizers can't edit other scheduling pages they haven't created.

You should use instant integration when an Organizer only needs to create and manage Scheduling Pages for their own calendars. Keep in mind that an Organizer may have access to their teammates' calendars, so they could still check for availability across their team when booking events.

Instant Integration Setup

Quickstart Guide

This guide requires that you have already added Nylas authentication to your application and connected an account with Calendar scopes. If you haven't, read the Authentication Guide first.

  1. Add the Nylas Schedule Editor script tag to your app's front-end code between the <head> tags.
  <script src="https://schedule.nylas.com/schedule-editor/v1.0/schedule-editor.js" type="text/javascript"></script>   
  1. Create an element on your page that will load the schedule editor modal when clicked. This can be a link, button, or could also load automatically on page load. For this example we'll use a button:
<button id="schedule-editor">Launch Schedule Editor</button>   
  1. Add a call to display the schedule editor modal within your app's JavaScript. The parameters allow you to style the editor to match your app and provide default settings for scheduling pages your users create.
var btn = document.getElementById('schedule-editor');
btn.addEventListener('click', function() {
nylas.scheduler.show({
auth: {
// Account access_token with active calendar scope
accessToken: "NYLAS_ACCESS_TOKEN",
},
style: {
// Style the schdule editor
tintColor: '#32325d',
backgroundColor: 'white',
},
defaults: {
event: {
title: '30-min Coffee Meeting',
duration: 30,
},
},
});
});
  1. Edit the code above to include the Nylas access token of the current user. Depending on your application architecture, this may require passing the value to the page or injecting it when a template is rendered.
  2. Visit the Nylas API Dashboard, click Webhooks > Add Webhook and register the following so that changes to events made through calendars update the corresponding bookings.

It's important to set up Scheduler webhooks because it uses webhooks to keep track of changes made to events through calendars. Scheduler will update the corresponding bookings.

Congratulations
That's it! Click on your button and the schedule editor will load in a modal. You'll now have access to the Nylas schedule editor and can create a scheduling page for the account you loaded through your JavaScript.

→ You can also view in-depth example applications written in Python and Node.

→ For a full reference of configurable options you can pass to the schedule editor, see the Whitelabeling Guide.

Smart Integration

Smart Scheduler allows you to find availability between multiple users at once who don't have access to each others calendars. When multiple calendars are passed, meetings will be booked on one calendar in a rotation called round robin. You can choose to maximize fairness or availability when round robin is applied to a calendar rotation.

With the instant integration detailed above, users are free to create and manage scheduling pages for their own calendars. If you want to create scheduling pages using more than one Nylas access_token, book meetings via round robin rotations, manage pages programmatically, or if you cannot place the Nylas API token in the client application, then smart scheduler integration is for you.

Smart Integration Setup

With Smart Integration you'll be making API requests from your backend server rather than your front-end client to create scheduling pages. This prevents you from having to expose Nylas access_tokens client side. It also means that you can pass multiple access tokens when creating a scheduling page, which enables round robin booking between accounts.

Once you've created a scheduling page, you'll receive an edit_token that you can pass to the client to invoke the schedule editor, allowing your users to edit the scheduling pages in app, without having to expose their access_tokens.

  1. From your server, make an API request to create a Scheduling Page, passing one or more Nylas API tokens. You can optionally pass a page name, page slug, and initial configuration.
curl -X POST https://api.schedule.nylas.com/manage/pages -H "Content-Type: application/json" -d '
{
"name":"Team Scheduling Page",
"slug": "team-1234",
"access_tokens": ["XXXX"],
"config": {
"timezone": "America/Los_Angeles",
"event": {
"duration": 45,
"location": "Sightglass Coffee, SOMA",
"title": "Intro Meeting"
},
"appearance": {
"color": "#ff0000"
},
"booking": {
"opening_hours": [{
"days": ["M", "T", "W", "R", "F"],
"start": "09:00",
"end": "17:00"
}]
},
"reminders": []
}
}'

Scheduling Pages API
See the full API reference for managing your scheduling pages.

  1. Store the new page's edit_token in your database. The edit token can be passed to your front-end application to allow users to edit the Scheduling Page's configuration in the pre-built UI and can also be used in place of a Nylas API token to authenticate API requests to update or delete the page.
  2. When a user of your application wants to manage their scheduling pages, retrieve the edit_tokens of one or more pages from your database and open the management embed from your JavaScript code:
var btn = document.getElementById('schedule-editor');
btn.addEventListener('click', function() {
nylas.scheduler.show({
auth: {
pageEditToken: "SCHEDULING_PAGE_EDIT_TOKEN",
},
style: {
tintColor: '#32325d',
backgroundColor: 'white',
},
});
});
  1. Visit the Nylas API Dashboard, click Webhooks > Add Webhook and register the following so that changes to events made through calendars update the corresponding bookings.

Round Robin Modes

  • Round Robin - Maximize Fairness: This mode will book events evenly across the provided calendars, even if there isn't availability in the configured time window for the calendar up next. This maximizes fairness of booking between the Organizers calendars, ensuring no one is skipped and order is followed strictly.
  • Round Robin - Maximize Availability: If the Organizer that is up next to be booked isn't available, this mode will show availability from other Organizers to maximize bookings for attendees. This means meetings may not be evenly distributed between Organizers if one is less available than the others.

Set the scheduling_method parameter to round-robin-maximize-fairness or round-robin-maximize-availability within the booking object. See the reference for more info.

{
...
"booking": {
"min_buffer": 30,
"additional_fields": [],
"min_booking_notice": 120,
"confirmation_method": "automatic",
"opening_hours": [
{
"start": "09:00",
"end": "11:30",
"days": ["M", "T", "W", "R", "F"]
}
],
"available_days_in_future": 14,
"min_cancellation_notice": 180,
"scheduling_method": "round-robin-maximize-fairness"
}
...
}

→ You can also view in-depth example applications written in Python and Node.

→ For a full reference of configurable options you can pass to the schedule editor, see the Whitelabeling Guide.