Home
Developers
UI Elements
Authentication

Authentication ^ALPHA

CronofyElements all require two things to run: an authentication token, and a target DOM element (to load the element into). The “token” value should be the authorization token from the API as a string, and the target DOM element is indicated by a 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.v0.7.8.js"></script>
<script>
    CronofyElements.Agenda({
        token: "ELEMENT_TOKEN",
        target: "cronofy-agenda"
    });
</script>

CronofyElements will look for a DOM element with the ID cronofy-calendar, and inject the CronofyElements element inside that element.

Generating a token

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"
}

permissions required #

An array of permissions you want your token to have. Currently supported values are:

agenda
availability
managed_availability

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

subs required #

Pass a single sub ID for the Agenda element (still within an array: ["acc_1234"]), and an array of all the participants’ subs for the Slot Picker and Availability Viewer (["acc_1234", "acc_4321", "acc_6789"]).

origin required #

The URL of the app where the element will be used.

Expected response:

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

This token is tied to the specific operation requested from the origin defined. It will expire after several hours.

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

Cronofy Docs