Authentication

Required plan: Starter

Cronofy Elements all require two things to run: an authentication token, and target in the DOM to load the Element in to. The token must be an Element Token obtained via the API, and the ID of the target in the DOM is indicated by its unique ID string.

A simple integration into an index.html file of an Agenda Element would look something like this:

<div id="cronofy-agenda"></div>
<script src="https://elements.cronofy.com/js/CronofyElements.v1.56.3.js"></script>
<script>
    CronofyElements.Agenda({
        element_token: "{ELEMENT_TOKEN}",
        target_id: "cronofy-agenda"
    });
</script>

Generating a token #

Example request #

POST /v1/element_tokens HTTP/1.1

Authorization: Bearer {API_KEY}
Content-Type: application/json

{
  "version": "1",
  "permissions": ["agenda"],
  "subs": ["acc_678347111010113"],
  "origin": "http://localhost"
}

Example response #

{
  "element_token": {
    "permissions": ["agenda"],
    "origin": "http://localhost",
    "token": "ELEMENT_TOKEN",
    "expires_in": 64800
  }
}

Request parameters #

API_KEY required  #

The client_secret for your application.

permissions required  #

An array of permissions the token will be granted. Currently supported values are:

See individual element documentation for information on which permissions are required for each Element.

subs optional  #

An array of subs to identify the accounts the token is allowed to access.

For Elements such as Agenda and CalendarSync, only one sub should be provided. For Elements such as the Slot Picker and Availability Viewer there may be many to permit access for each participant of the underlying Availability query.

Though this parameter is optional, the majority of UI Element usage will involve a token specifying one or more subs.

These can be retrieved by calling the UserInfo endpoint with a valid access_token

bookable_event_ids optional  #

An array of bookable_event_ids to identify the Bookable Events the token is allowed to access.

For use in conjunction with the Slot Picker Element.

origin required  #

The Origin of the application where the Element will be used.

Note that this is not the whole URL of the page.

Response parameters #

element_token.permissions  #

The array of permissions granted.

element_token.origin  #

The permitted Origin the token can be used with.

element_token.token  #

The token that is passed to Elements to authenticate them.

element_token.expires_in  #

The number of seconds the token can be used for.

Demo Mode #

For demo purposes, it is possible to bypass the authentication step. If the demo option is set to true, the Element will not make any API calls and will display mock content.

<div id="cronofy-agenda"></div>
<script src="https://elements.cronofy.com/js/CronofyElements.v1.56.3.js"></script>
<script>
    CronofyElements.Agenda({
        target_id: "cronofy-agenda",
        demo: true
    });
</script>