Embed Real-Time Scheduling in Your Applications with UI Elements
Author: Jérémy Bourhis
21st February 2019
Our Calendar and Scheduling APIs are helping hundreds of companies deliver better scheduling to hundreds of thousands of users. But not every product integrated with Cronofy has an existing calendar interface. We see a lot of our customers build user interface elements on top of the Cronofy APIs. These can take further hours of development time, increasing how long it takes before your customers can benefit from two-way calendar sync.
That’s why we’re excited to introduce the first three Cronofy UI Elements – the Slot Picker, the Availability Viewer, and the Agenda View.
UI Elements are free to use but aren’t stand-alone products. They’re powered by our Calendar and Scheduling APIs. Which UI Elements you can use will depend on the plan you’re on. For example, to use the Availability Viewer Element, you’ll need to be on a plan that gives you access to the Availability API.
The documentation for the UI Elements is available on our new – and improved – developer site.
The Cronofy Slot Picker UI element is an embeddable version of our Real-Time Scheduling interface.
It’s built on top of our Availability API to query a calendar synced with Cronofy and allow people to self-book in a few clicks.
The user will start by picking the day they want before choosing a time slot and confirming their booking. They always have the option to go back to the previous step of the process. Once the time slot is booked it won’t appear as a bookable time slot for anyone else.
The Slot Picker can be used to present the availability of a recruiter or a service provider to streamline online booking.
The Availability Viewer UI element is an advanced slot picker tool that leverages our Availability API to present free time slots in an interactive, week-based, calendar interface.
The availabilities are presented as free/busy on a calendar view – a grid of days, Sunday to Saturday. Free time slots are left blank and busy time slots are indicated.
If the availability query spans more than one week the user can browse the Availability Viewer one week at a time.
The Availability Viewer can be embedded in an applicant tracking system to allow admin staff to view when members of an interview panel are free.
But it doesn’t stop there – freelancers could embed the Availability Viewer to let website visitors self-book appointments.
The Agenda View UI element displays events for a single-day period. This UI Element leverages the Unified Calendar API to sync the UI with the connected calendar.
The Agenda View shows time slots for existing events. For example, if the calendar user has a meeting from 9am to 10am and no other meeting that day, the Agenda Viewer will only display that single event when this day is selected.
Clicking an event reveals the full details for that event.
The Agenda View can be used on internal tools to improve project management processes. Project managers could use it to see the workload of a team member and allocate work accordingly.
We hope these UI Elements help you to deliver great real-time scheduling experiences to your users quicker.
If you have any questions on how you can use the UI Elements don’t hesitate to get in touch.