- Products
- Solutions Use casesBy industry
- Developers
- Resources Connect
Email API
Calendar API
Scheduler
Contacts API
ExtractAI
Google email & calendar integration
Outlook email & calendar integration
IMAP integration
Calendar management
Embedded contextual email
Scheduling automation
Automated outreach
Intelligent data extraction
Ecommerce
Telehealth
Real estate
Financial technology
Educational technology
Expense management
Customer relationship management
Applicant tracking system
Communications platform
Marketplaces
Document management
Docs
SDKs
Tutorials
API status
Changelog
Support
Blog
Events
Guides
Inspiration gallery
Partners
Build vs. buy
Customer stories
Security & Compliance
Why Nylas
Newsroom
Jump to section
Featured articles
Jump to section
We’re excited to announce the launch of the Nylas Scheduler v3! Efficient scheduling is essential for improving productivity and user experience. The Nylas Scheduler empowers developers with custom events, allowing for tailor scheduling workflows to meet unique user and business needs.
This blog post explores different use cases for working with custom events to enhance the scheduling flow: auto completing steps and tracking analytics to gain actionable insights. Check out our previous posts on getting started with Nylas Scheduler and customizing it using CSS Shadow Parts.
These use cases demonstrate how custom events can provide flexibility and a deeper understanding of user interactions, enabling you to create a tailored scheduling experience.
Customizing the Nylas Scheduler Flow
We can modify the Nylas Scheduler to customize the workflow to improve the user experience. For example, existing users may not need to provide similar information each time they complete the scheduler flow. Similarly, if certain steps are unnecessary for a specific context, bypassing them ensures a faster and more seamless scheduling experience.
This is where we can take advantage of custom events. Custom events enable you to dynamically modify the workflow based on conditions. By listening for specific triggers, you can programmatically skip steps and move users further along the process.
To get started integrating the Nylas Scheduler, take a look at our previous post for How to integrate Nylas Scheduler to your user flow. Let’s look at how we can consider inserting the booking data on behalf of the user. For the following code, we will focus on adding Scheduler to a React application, however, you can use Scheduler using Vanilla JS as well.
To use custom events, you can modify the eventOverrides props on the NylasScheduling component. As an example, here is how we can insert the booking data, bookingData, after a user has selected a specific time slot:
<NylasScheduling
configurationId={configId}
schedulerApiUrl="https://api.us.nylas.com"
eventOverrides={{
timeslotConfirmed: (event, connector) => {
// prevent default event behavior
event.preventDefault();
const bookingData = {
primaryParticipant: {
name: "Ram",
email: "[email protected]",
},
guests: [
{ name: "participant-name", email: "participant-email" },
],
timeslot: event.detail;
};
return connector?.scheduler
.bookTimeslot(bookingData)
.then((bookingResponse) => {
console.log("Booking completed:", bookingResponse);
})
.catch((error) => {
console.error("Booking failed:", error);
});
}
// ...rest of code…Now we’ve implemented a custom event that takes the confirmed timeslot and completes the rest of the Scheduler flow inserting the user’s information.
Tracking Analytics for User Interactions
Capturing user analysis is crucial for understanding how users interact with your features. Tracking analytics on integrations can be challenging.
The Nylas Scheduler provides custom events to track different types of events such as time slot selection or changing language. These insights can inform improvements in the scheduling process or understand where users drop off.
We can use custom events and modify eventOverrides to include anyone of the following event listeners:
<NylasScheduling
configurationId={configId}
schedulerApiUrl="https://api.us.nylas.com"
eventOverrides={{
configSettings: (event, connector) => {...custom logic…},
dateSelected: (event, connector) => {...custom logic…},
timeslotSelected: (event, connector) => {...custom logic…},
monthChanged: (event, connector) => {...custom logic…},
languageChanged: (event, connector) => {...custom logic…},
bookingInfo: (event, connector) => {...custom logic…},
nameChanged: (event, connector) => {...custom logic…},
emailChanged: (event, connector) => {...custom logic…},
cancelBookedEventValidationError: (event, connector) => {...custom logic…},
goBackButtonClicked: (event, connector) => {...custom logic…},
cancelBookingFormSubmitted: (event, connector) => {...custom logic…},
cancelBookedEventError: (event, connector) => {...custom logic…},
cancelBookingFormError: (event, connector) => {...custom logic…},
// ...rest of code…All available events can be found on the Scheduler UI Component reference (search eventOverrides under Properties). One thing to keep in mind is that you will need to return a promise from each event and also consider using event.preventDefault() to prevent bubbling.
Now we’ve explored how to use custom events to track user analytics.
Build Time
In this blog post, we explored how to use Nylas Scheduler custom events. We went over ways to skip steps for improved efficiency and ways to capture analytics to better understand user interactions.
You can sign up for Nylas for free and start building! Continue building with Nylas by exploring different quickstart guides or by visiting our developer documentation.
