Home
Developers
UI Elements
Authentication

Authentication

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.20.2.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_1234"],
  "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:

agenda: required for the Agenda Viewer Element.
account_management: required for the Calendar Sync Element.
availability: required for the Availability Viewer Element and the Slot Picker Element.
managed_availability: required for the Availability Rules Element.

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

subs required #

An array of subs to identify the accounts the token is allowed to access. For Elements such as Agenda and CalendarSync, this will be one sub, for Elements such as the Slot Picker and Availability Viewer there may be many. These can be retrieved by calling the UserInfo endpoint with a valid access_token

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.20.2.js"></script>
<script>
    CronofyElements.Agenda({
        target_id: "cronofy-agenda",
        demo: true
    });
</script>

Cronofy Docs