Only show these results:

Instant Integration v2

With Instant Integration, organizers create and edit their own scheduling pages in your application using the Schedule Editor. Instant Integration is best for when organizers only need to create and manage Scheduling Pages for their own calendars. Organizers may still check availability across teams when booking events if they have access to teammate calendars.

Smart Integration by comparison works best for finding availability between multiple users at once. It's helpful for organizers without access to one another's calendars and books meetings for multiple calendars in a round robin rotation.

Instant Integration Set up

Learn More

Quickstart Guide Set up

This guide requires your application's Nylas authentication and a connected account with Calendar scopes. Read the Authentication Guide for more information.

Step 1: Include Required Code

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>

For EU accounts, it is

  <script src="https://ireland.schedule.nylas.com/schedule-editor/v1.0/schedule-editor.js" type="text/javascript"></script>

Step 2: User Interface Element

Create an element on your page, such as a link or button, to load the Schedule Editor modal after clicking. Also, loading automatically on page load is available. The Scheduler Editor will load as a popup with this configuration or by using an <iframe> HTML element. The example here uses a button.

<button id="schedule-editor">Launch Schedule Editor</button>

Step 3: Call and Customize

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 your users' Scheduling Pages.

var btn = document.getElementById('schedule-editor');
btn.addEventListener('click', function() {
  nylas.scheduler.show({
    auth: {
      // Account <ACCESS_TOKEN> with active calendar scope
      accessToken: "xFl3gbNgR0MDAM4DysONfkekDcy3Co", 
    },
    style: {
      // Style the schdule editor
      tintColor: '#32325d',
      backgroundColor: 'white',
    },
    defaults: {
      event: {
        title: '30-min Coffee Meeting',
        duration: 30,
      },
    },
  });
});

Step 4: Authentication

Edit the code above to use your current user's Nylas <ACCESS_TOKEN>. Depending on your application architecture, you may need to pass the value to the page or inject the value when rendering a template.

Step 5: Include Webhooks

Visit the Nylas API Dashboard and navigate to Webhooks > Create a Webhook. Register the following so that changes to calendars-made events update the corresponding bookings.

  • URL: https://api.schedule.nylas.com/webhook
  • Triggers:
    • event.deleted

Setting up Scheduler webhooks helps keep track of changes made to events through calendars. Webhooks allows for Scheduler to update the corresponding bookings.

Congratulations
That's it! Click on your button to load the Schedule Editor in a modal. Create a Scheduling Page for the account loaded in your JavaScript when you access the Nylas Schedule Editor.

What's Next

  • View in-depth Python and Node example applications.
  • Refer to the Customization Guide for the full collection of configurable options to pass to the Schedule Editor.