Slot Name Picker

• Name Picker Ninja
• Name Picker Generator
• Fruit Machine Name Picker
• Slot Name Picker

The Slot Picker Element is an embeddable version of the Real Time Schedulinginterface. It converts an Availability queryinto a list of bookable slots.

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

Demo #

Random Name Picker is a free web-based application that lets you pick a random name using Spin Wheel and Slot Machine. It is simple and easy to use and can be customize by changing the names to whatever you like. The result is showing the winner(s) of the random name picker, the total count of all names and the date/time of the draw. You can optional share the result with the winners via Facebook. When you run multiple draws you will see the previous draw information as well. Name Picker Slots. Picker Wheel can be used as a random choice or random name picker. For the random name Picker Wheel, it is often used as a prize wheel where a winner's name will be selected after spinning the wheel. For a more general random choice picker application, you can insert whatever inputs which you wish to let the random Picker Wheel to decide for you.

Example initialization #

Element permissions #

availability is required when generating the Element Token.

Element options #

element_token required#

The Element Token theSlot 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.

config.logs optional#

Set the level of logging you want to appear in the console:

• info: show verbose logging (recommended for development use only).
• warn: (default) only log errors and warnings.
• error: only log errors.
• none: suppress all console output from the Element.

callback required#

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

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 confirmedtheir selection, and straight away when the slot is selected in no_confirmmode.

no_slots_found

Sent by the Element when the provided availability_query has returned no available slots.

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. Forexample, if the prefix was set as “Foo”, the class name on a slot elementwould 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 truethe 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
• US English - en (default)
• French - fr
• German - de
• Italian - it
• Spanish - es

translations optional#

To override either a locale or a particular string, pass in a translations object here. The Slot Picker uses the slot_picker translation “context”.

tzid optional#

Name Picker Ninja

The time zone that the Slot Picker will be rendered in. Must be a known time zoneidentifier from the IANA Time Zone Database. If an invalid tzid is provided, then the Element will use the system time zone from the user’s browser and trigger a

Name Picker Generator

warn

Fruit Machine Name Picker

notification.

Be aware, using the tzid option will cause the Slot Picker to render in a timezone that may not match the timezone of the user’s computer. Be sure to highlight this to the user.

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

Element methods #

refresh() #

From time to time you may wish to reload the SlotPicker UI Element on the page. You can do this with the SlotPicker.refresh() method:

Being able to refresh a UI Element is useful in cases where your availability may have changed behind the scenes. UI Elements gather their availability data when they are first loaded, so unless they are refreshed they will not be aware of any changes to availability.

update() #

Slot Name Picker

Should you need to update the options for any Element, you can reload them with the .update() method (this requires you to have saved your Element instance to a variable beforehand):

When updating, you do not need to redeclare all the options; you just need to add the ones you want to update.

Note: the SlotPicker.update() method must be called with an options object, otherwise a warning-level log notification will be fired.