Embedded scheduling with UI Elements

The User Interface Elements provide you with the customizable UI you need to offer great and consistent scheduling experiences to your users

Calendar interfaces for your websites and applications

The UI Elements can be embedded on websites or in SaaS applications to power real-time scheduling features. Which UI Elements you can use will depend on your Cronofy plan. For example, to use the Availability Viewer Element, your plan needs to give you access to the Availability API.

Sign up to a developer account to try our range of UI elements and choose the ones you need.

Create your account
Allow users to self-schedule

Slot Picker

The Slot Picker UI Element shares the real-time availability of connected calendars through a simple booking interface. The Slot Picker can be embedded on websites or in SaaS applications to allow people to self-schedule in a few clicks.

The website visitor or software 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.

The Cronofy Slot Picker UI Element is an embeddable version of our Real-Time Scheduling interface. It uses our Availability API to query a calendar synced with Cronofy.

Read our developer documentation for more details on how to use and customize the Slot Picker.

Display availabilities to enable self-scheduling

Availability Viewer

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. 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 – one without a calendar interface – to allow admin staff to view when members of an interview panel are free before adding an interview to their schedules. It can also be used to let employees self-book mentorship sessions or by freelancers who want their clients to book online.

Check our developer site for more info about how to set up the Availability Viewer and customize it.

Let calendar users set their availability

Availability Rules

The Availability Rules UI Element lets calendar users choose when they want to appear as available and periods when they want to appear as busy. It’s often used to indicate work hours, lunch breaks or commute.

This UI Elements presents time periods as 30 minutes available or unavailable slots on an interactive calendar view. Available periods are indicated in green and unavailable periods are left blank.

Like other elements, it comes with built-in CSS that control its layout and theme, including color and spacing. Cronofy customers can amend or override any style rule they want in their own stylesheets to make the element fit seamlessly with their design.

Head to our developer site for more information and a list of the Availability Rules UI Element options.

Display calendars in real-time

Agenda View

Share a real-time view of a user’s schedule with the Agenda View. It uses our Unified Calendar API to sync the UI with the connected calendar.

The Agenda View displays a single-day period and only 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 View will only display that single event when this day is selected.

The primary view is a column of event summaries, with the ability to navigate to the next or previous day. Clicking an event reveals the full details for that event.

The Agenda View can be used on companies’ internal tools to improve project management processes or to share staff workload.

Explore our developer docs to learn how you can add the Agenda View to your website or application.

Manage calendar accounts in one place

Calendar Sync

The Calendar Sync UI Element is an interactive display of a user’s profile – a list of their calendar accounts’ synchronization status.

This display is interactive as it allows the user to manage their calendar accounts in one centralized place. They can reconnect calendar accounts that are disconnected or sync additional calendars, as well as remove calendar accounts altogether.

As with other UI Elements the Calendar Sync element can be customized by the user to match the style of their applications.

For more information visit our developer site.

Build strong relationships

Make every meeting personal with the Scheduler

Organizing meetings is about more than scheduling, it's about building relationships and providing a seamless experience for your contacts. With the Cronofy Scheduler you can create single-use meeting request links. It takes 2 clicks to create a meeting request and 2 clicks for the invitee to pick a time that suits them, and you.

Learn more about the Scheduler

Thousands of businesses already trust Cronofy

Book your demo today!

See the UI Elements in action. Let’s discuss how you can embed real-time scheduling on your websites and applications.

Book your demo