Slot Picker

The Slot Picker Element is an embeddable version of the Real Time Scheduling interface. It converts an Availability query into a list of bookable slots.

When a user confirms a slot, the Element passes that slot’s details into a callback function (provided when the Element is initialized).

Demo #

Example initialization #

<div id="cronofy-slot-picker"></div>
<script src="
        element_token: "{ELEMENT_TOKEN}",
        target_id: "cronofy-slot-picker",
        availability_query: {
            participants: [
                    required: "all",
                    members: [
                        { sub: "acc_12345678" },
                        { sub: "acc_87654321" }
            required_duration: { minutes: 30 },
            available_periods: [
                { start: "2019-09-21T09:00:00Z", end: "2019-09-21T17:00:00Z" },
                { start: "2019-09-22T09:00:00Z", end: "2019-09-22T17:00:00Z" }
        styles: {
            prefix: "custom-name"
        callback: notification => console.log("callback", notification)

Element permissions #

availability is required when generating the Element Token.

Element options #

element_token required  #

The Element Token the Slot Picker will use to communicate with Cronofy.

Not required if the Element is activated in demo mode.

target_id required  #
The ID of the DOM node the Element will be loaded in to.

availability_query required  #
Object that matches a valid Cronofy Availability request.

config optional  #
Use this object to add further configuration to the Element:

config.mode optional  #
The Slot Picker Element has two “modes” it can operate in:

  • confirm (default)
  • no_confirm

When in confirm mode, clicking a slot displays a confirmation view that allows a user to confirm their selection or return to the list of slots. The callback function will be called with a slot_selected notification when a user confirms their selected slot.

When in no_confirm mode, the “confirmation” step is skipped. In this mode, the callback function will be passed a slot_selected notification when a user selects a slot, without any confirmation step.

callback required  #

The function to be called when an action has occurred within the Element. Receives an object in the format:

    "notification": {
        "type": "notification_type"

The object will always include a notification object with a type attribute to allow you to determine how to handle it. Your application should ignore notifications it does not understand as new ones may be added in future.


Sent by the Element when in the confirm mode after the user has confirmed their selection, and straight away when the slot is selected in no_confirm mode.

    "notification": {
        "type": "slot_selected"
        "slot": {
            "start": "2019-09-21T09:00:00Z",
            "end": "2019-09-21T11:00:00Z",
            "participants": [
                { "sub": "acc_12345678" },
                { "sub": "acc_87654321" }

data_center optional  #
Designates the Cronofy data center the Element will communicate with.

Default value is us.

confirm optional  #

Boolean that defines if an extra “confirmation” step is used after a user selects a slot from the list. Defaults to true.

styles optional  #
An object that controls the pre-packaged element styles.

styles.prefix optional  #
Customizable elements are given a prefixed class name using this value. For example, if the prefix was set as “Foo”, the class name on a slot element would be Foo__slot.

Defaults to SlotPicker.

styles.padding optional  #
The size of the padding around the edge of the element. Defaults to 1em.

demo optional  #
Boolean to activate demo-mode. Defaults to false. If demo is set to true the Element will return mock data (and not make any API calls).

locale optional  #
The Slot Picker supports localization (e.g. locale: "fr" to load in French). Defaults to browser language setting.

Supported locales (languages) for the UI Elements are:

  • Dutch - nl
  • English - en (default)
  • French - fr
  • German - de
  • Italian - it
  • Spanish - es

Element classes #

PREFIX default is SlotPicker

Available classes:

  • {PREFIX}__slots-header
  • {PREFIX}__slots-heading
  • {PREFIX}__slot--empty
  • {PREFIX}__slots-list
  • {PREFIX}__slots-list--days
  • {PREFIX}__slots-list--times
  • {PREFIX}__slots-list--empty
  • {PREFIX}__slot
  • {PREFIX}__slot--unavailble
  • {PREFIX}__slots-icon
  • {PREFIX}__slots-icon--back
  • {PREFIX}__slots-icon--tickmark
  • {PREFIX}__slots-icon--remove
  • {PREFIX}__confirmation-wrapper
  • {PREFIX}__confirmation
  • {PREFIX}__confirmation-summary
  • {PREFIX}__confirmation-buttons
  • {PREFIX}__confirmation-button