For any business or organization, having a clear and organized calendar is an important contributor to success. A calendar lets us create meetings with potential customers, organize events to enhance our reach and maintain contact with existing customers. That’s why scheduling events is so important.
Without calendar planning, scheduling events can become tedious and hard. But it doesn’t always have to be that way.
In this post, we’re going to discover how Nylas can help us with a scheduling solution called Scheduler, a ready-made component that contains everything we need to create, update, manage and organize events.
If you don’t have a Nylas account, you can easily create one and enjoy the benefits and features of Nylas. No worries, no credit card is required. Start building with Nylas.
The only thing we need to do is to create a file called scheduler-example.html and get your Nylas Access Token (which you can re-generate by going into your Nylas Dashboard and going into Accounts on the left-side menu, selecting our account, and then pressing “Generate New Token”):
Here’s the source code that we need to configure and open our Scheduler page:
Email API
Calendar API
Scheduler
Contacts API
ExtractAI
Salesforce email integration
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<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nylas Scheduler Simple Example</title>
<!-- Import the Nylas Schedule Editor script -->
<script src="https://schedule.nylas.com/schedule-editor/v1.0/schedule-editor.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a button and give it an ID to reference later -->
<button type="button" id="schedule-editor">Open Schedule Editor</button>
<script>
var btn = document.getElementById('schedule-editor');
btn.addEventListener('click', function() {
// Prompt the Schedule Editor when a user clicks on the button
nylas.scheduler.show({
auth: {
// Account <ACCESS_TOKEN> with active calendar scope
accessToken: "<your_access_token>",
},
style: {
// Style the Schedule Editor
tintColor: '#32325d',
backgroundColor: 'white',
},
defaults: {
event: {
title: 'Meeting with Blag from @nylas',
duration: 30,
},
},
});
});
</script>
</body>
</html>
If you think this is too simple, go ahead and open the Scheduler page on your favourite browser.
If the Access Token is invalid you may see the following:
Ok, it doesn’t look like much, right? Wait, why don’t we press the Open Schedule Editor button?
This page will display all the scheduling pages we have created so far.
A pop-up shows up asking us to create a new Scheduling Page. Let’s do that:
Here we can name our event, specify its location and also determine how long it will take. Once that’s done, we can press Next:
Now, for this event, we can specify the available times and days of the week, for how long this is going to be active (how far in the future) and also create a custom address for our Scheduling component. This is important when we create, update or organize events.
Once we click on Create, we can view our event, edit it or even create a new Scheduling Page. The copy link button means that we can copy and distribute our newly created meeting or event:
If we copy the link and open it on a different browser and use a different user, we will see what our attendees will see.
This view will present us with the availability of the host. And we can change it to the week view, change the timezone and even change the language of the scheduled event.
We need to sign in with either Google or Microsoft, and once we sign up, our calendar will sync with the host’s calendar, so there’s a common availability:
We have here some available dates and times, when both the organizer and the attendee are free to meet:
Once we choose a date and time, we need to provide our information for the meeting:
Having a meeting scheduled with myself seems strange, so let’s not pay much attention to that, an event is an event after all.
We will receive a confirmation email. Easy enough, right?
But, it doesn’t end there, recall the “Edit” button? Well, that’s not just for the show.
There are a lot of things that we can configure when creating or scheduling our events:
We might have more than one calendar linked to our account, so we can choose which calendar we want to use for our events:
We can specify the available days and times, with time zones included:
Meetings can be accepted automatically or we can give the option to confirm or decline. Also, there’s a default “Thank you” page but a custom one can be specified as well:
We can specify if confirmation emails need to be sent, and we can also set up event email reminders:
While it’s not likely, we as the hosts can forget about our own event, so getting a reminder is useful:
By default, the scheduler will ask for the Name and Email address of the attendee, but we can request some extra information as well. For example:
We can change the company, logo, colours and more:
When we open the Scheduler again, we will instantly see the changes.
Once we have customized our event, we can start distributing the link so that our prospects or customers can book an schedule meeting with us. Having shared availability is a great asset as we don’t need to check if we’re actually free at the given date and time of the event. As our prospects/customers get benefited as well, they can rest assured that once the meeting is scheduled, it’s going to happen for sure.
And just like that, we built a booking system with minimal effort. No code is required, so non-developers can take advantage of a ready-made component.
If you want to learn more about the Scheduler, visit our Nylas Scheduler.
Don’t miss the action and watch our livestream, where you will learn how to use our scheduling solution to create, update, manage and organize events:
You might be interested in reading How to Manage Calendar Events with the Nylas Python SDK.
What is a CRM? CRM stands for Customer Relationship Management, and it’s basically a way…
Learn how to create an appointment scheduler in your React app using Nylas Scheduler. Streamline bookings and UX with step-by-step guidance.
Dive into the world of smart Web Components for advanced API integration solutions. Design elegant, customizable elements to elevate user experiences.
Blag aka Alvaro Tejada Galindo is a Senior Developer Advocate at Nylas. He loves learning about programming and sharing knowledge with the community. When he’s not coding, he’s spending time with his wife, daughter and son. He loves Punk Music and reading all sorts of books.