Nylas Web Elements

A collection of web components for Nylas.

Requirements

Node.js v20 or higher

Installation

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.