@nylas/web-elements
Advanced tools
A collection of web components for Nylas.
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>
The following examples add the Nylas Scheduler Editor and Scheduling scripts in your app.
⚠️ Important: Make sure to replace the
NYLAS_CLIENT_IDwith your Nylas Client ID. Your Nylas Client ID can be found in your app's Overview page on the Nylas Dashboard.
<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>
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.
For a complete walkthrough on setting up Scheduler can be found at https://developer.nylas.com/docs/v3/quickstart/scheduler, with the complete code available on GitHub.
FAQs
Nylas Web Elements
The npm package @nylas/web-elements receives a total of 4,627 weekly downloads. As such, @nylas/web-elements popularity was classified as popular.
We found that @nylas/web-elements demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA is discontinuing official RSS support for KEV and cybersecurity alerts, shifting updates to email and social media, disrupting automation workflows.
Security News
The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.
Research
Security News
Socket uncovers an npm Trojan stealing crypto wallets and BullX credentials via obfuscated code and Telegram exfiltration.