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="https://elements.cronofy.com/js/CronofyElements.v1.7.15.js"></script>
<script>
    CronofyElements.SlotPicker({
        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-11-20T09:00:00Z", end: "2019-11-20T17:00:00Z" },
                { start: "2019-11-21T09:00:00Z", end: "2019-11-21T17:00:00Z" }
            ]
        },
        styles: {
            prefix: "custom-name"
        },
        callback: notification => console.log("callback", notification)
    });
</script>

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.

slot_selected

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-11-20T09:00:00Z",
            "end": "2019-11-20T11: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
Search