How to Launch Nylas Scheduler in 5 Minutes

How to Launch Nylas Scheduler in 5 Minutes

Learn how to setup a fully-functional scheduler that provides customizable options for scheduling any type of meeting.

Ben Lloyd Pearson | March 27, 2020

The Nylas Scheduler is the fastest way to add full calendar scheduling functionality to your application, allowing your users to create highly-customizable scheduling pages. In this post, you’ll learn how to setup a fully-functional scheduler that provides customizable options for scheduling any type of meeting.

For this example, we’re going to setup an Express app: a web framework for Node.js applications. Express makes it easy to create web apps that interact with HTTP services, and since it’s built upon Node.js, we’re able to use the Nylas Node SDK. We’ll also use EJS for embedded JavaScript templating. All of this will be hosted on Glitch.

Setup Your Nylas Developer Account

The very first thing you’ll need to do is setup your developer account and get your API keys. Follow our guide, and take note of the client ID and client secret for your app, you’ll need these later. Go ahead and authenticate your email account to your Nylas app, just to make sure everything is connected properly to the third party provider. If you plan to authenticate a Google or Microsoft Office365 account to your scheduler app, you’ll prompted to setup OAuth for those providers. To do so, follow our guides for Google account integrations, and Office365 account integrations. All other calendar providers are supported without taking any additional steps.

Remix the Nylas Scheduler Project on Glitch

Head over to the Glitch project for the Nylas Scheduler and remix the project by clicking the logo in the top left corner and selecting Remix Project; this will create a new project that is a copy of the Nylas Scheduler. 

Remix the project on glitch to make your own copy.

Next, open the .env file and paste your Nylas app client ID and secret into the appropriate lines. You also need to set the redirect URI; this should be the url for your app followed by “/login_callback”

Assign the appropriate environment variables in the .env file

Next, head back to the Nylas dashboard, click on the name of your app in the left sidebar, and select View All Applications. On the applications page, click the Edit button for your Nylas app and select the Callbacks tab. Paste the URL you set to REDIRECT_URI in the .env file of your glitch project and click add callback.

Navigate to the edit page for your Nylas app.

Create a callback to the login_redirect page of your app.

Now, you should be able to visit the URL for your Glitch app by clicking Show in the header of your Glitch project page. You should see something that looks like this:

The first view of the app provides a button to redirect to Nylas Hosted Authentication

When you click log in, it will redirect you to Nylas Hosted Authentication, which will let you sign in with any email account. You’ll need to input your email and password, and accept any permission requests that are presented.

Nylas Hosted Authentication allows users to authenticate with any email provider

Once you’re signed in, you will see a page that lists any scheduling pages you have setup and allows you to manage your Nylas Scheduler pages.

The scheduler view allows users to manage their Nylas scheduler pages and see any scheduling pages they've created and.

The client side editor manager

How The Scheduler App Works

Most of this Glitch app is well explained via comments in the code, but here are the primary components of the scheduler app.

  • /views – This directory contains the two pages that are displayed as part of the app experience. The .ejs files are used by EJS for templating, which allows variables from other JavaScript files to be used in the rendered HTML.
  • server.js – This is where all the backend magic happens. This script handles authenticating the user account and providing data about the scheduler pages the user has available.
  • public/style.css – The styling for our Nylas Scheduler Glitch app.

Take The Nylas Scheduler Further

The Nylas Scheduler offers a suite of customization features that allow you to white label the experience and control the functionality that is available to your users. You can update the Company Logo, Company Name, Event Duration, Event Title, and more.  For a complete list of all the customization options, take a look at the scheduler whitelabeling guide.

To customize the scheduler Glitch project, open scheduler.ejs and modify this section of code:

var btn = document.getElementById('show-pages');
  btn.addEventListener('click', function() {
    nylas.scheduler.show({
      auth: {
        // Nylas API token of the current user is provided to the modal
        accessToken: "<%= accessToken %>",
      }
      });
    });

The Nylas scheduler is extremely flexible tool that enables a wide range of scheduling possibilities, head over to the docs to learn more about the features it offers.

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

About the Author

Ben is the Developer Advocate for Nylas. He is a triathlete, musician, avid gamer, and loves to seek out the best breakfast tacos in Austin, Texas.

Ready to Start Building?