Download and install the Scheduler UI Components in your project. The package includes both the Scheduling Component and the Scheduler Editor Component.

npm install @nylas/web-elements@latest

If you prefer, you can use unpkg to directly include the web components in your HTML/Vanilla JS file.

<script type="module" src="https://unpkg.com/@nylas/web-elements@latest"></script>

Getting Started

The following examples add the Nylas Scheduler Editor and Scheduling scripts in your app.

⚠️ Important: Make sure to replace the NYLAS_CLIENT_ID with your Nylas Client ID. Your Nylas Client ID can be found in your app's Overview page on the Nylas Dashboard.

Adding the Components

<script type="module" src="./node_modules/@nylas/web-elements/dist/nylas-web-elements/nylas-web-elements.esm.js"></script>

<html>
  <body>
    <nylas-scheduling></nylas-scheduling>
  </body>
</html>

<script type="module">
  const nylasScheduling = document.querySelector('nylas-scheduling');

  // Set the scheduler api url based on the data center
  nylasScheduling.schedulerApiUrl = 'https://api.us.nylas.com'; // or 'https://api.eu.nylas.com' for EU data center

  // Get the scheduler configuration ID from the URL ?config_id=NYLAS_SCHEDULER_CONFIGURATION_ID
  const urlParams = new URLSearchParams(window.location.search);

  // Set the scheduler configuration ID
  nylasScheduling.configurationId = urlParams.get('config_id');
</script>

<script type="module" src="./node_modules/@nylas/web-elements/dist/nylas-web-elements/nylas-web-elements.esm.js"></script>

<html>
  <body>
    <!-- Add the Nylas Scheduler Editor component -->
    <nylas-scheduler-editor />
  </body>
</html>

<script type="module">
  const schedulerEditor = document.querySelector('nylas-scheduler-editor');
  schedulerEditor.schedulerPreviewLink = `${window.location.origin}/?config_id={config.id}`;
  schedulerEditor.nylasSessionsConfig = {
    clientId: 'NYLAS_CLIENT_ID', // Replace with your Nylas client ID from the previous section
    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',
  };
  schedulerEditor.defaultSchedulerConfigState = {
    selectedConfiguration: {
      requires_session_auth: false, // Creates a public configuration which doesn't require a session
    },
  };
</script>

Start a local development server

To create a Scheduling Page from the Scheduler Editor, you'll need a working Scheduler UI. To do this, run a local server to host your Scheduler Editor and Scheduling Pages.

Navigate the root directory of your project and run the following command.

npx serve --listen <PORT>

After you run the command, open your browser to http://localhost:<PORT>/scheduler-editor to see your Scheduler Editor and create your first Scheduling Page.

Links

For a complete walkthrough on setting up Scheduler can be found at https://developer.nylas.com/docs/v3/getting-started/scheduler, with the complete code available on GitHub.

@nylas/web-elements