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