pooja-test-web-1
v0.0.1-canary.20
Published
Nylas Web Elements
Downloads
127
Readme
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@latestIf 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_IDwith 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/quickstart/scheduler, with the complete code available on GitHub.