# 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:

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

## Generating a token
#### Example request
```http
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
```json
{
  "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](/developers/ui-elements/agenda-viewer/index.md).

- `account_management`: required for the [Calendar Sync Element](/developers/ui-elements/calendar-sync/index.md).

- `availability`: required for the [Availability Viewer Element](/developers/ui-elements/availability-viewer/index.md) and the [Slot Picker Element](/developers/ui-elements/slot-picker/index.md).

- `managed_availability`: required for the [Availability Rules Element](/developers/ui-elements/availability-rules/index.md).

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](/developers/api/identity/userinfo/index.md) with a valid `access_token`

##### `bookable_event_ids` *(optional)*

An array of `bookable_event_ids` to identify the [Bookable Events](/developers/api/scheduling/bookable-events/index.md)
the token is allowed to access.

For use in conjunction with the [Slot Picker](/developers/ui-elements/slot-picker/index.md)
Element.

##### `origin` *(required)*

The [`Origin`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/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.

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



---
[Read in HTML](/developers/ui-elements/authentication/)