` with `id="employer"`.
#### Method parameters
employerAccessTokenstringRequired
Token retrieved from the `/embed/session` endpoint to authenticate the user session.
options objectOptional
container
stringOptional
The `id` of the container to load the Embedded UI in.\
Default value: `employer`
theme
objectOptional
Allows you to customise the look and feel of the embedded UI to match your platform. Learn about [theming your embedded UI here.](/embed/theming)
dependants_cover
enumOptional
Configure employer's options for covering dependants. `Full` allows employers to choose covering spouse & children separately, `binary` restricts employer cover to all dependants or none, and `none` doesn't allow the employer to cover their employees' dependants.
Default value: `full`
Allowed values: fullbinarynone
**`JavaScript (ESNext)`**
```javascript title="JavaScript (ESNext)"
const employerEmbed = Kota.Health.employer();
const themeConfig = {
primaryColor: '#0875E1',
backgroundColor: '#fff',
radius: '12px',
ringColor: '#0875E1'
};
employerEmbed.init(
employerAccessToken,
{ container: 'employer', theme: themeConfig }
);
```
**`HTML`**
```html title="HTML"
```
### Employee
#### Kota.Health.employee(employeeAccessToken, options?)
Use `Kota.Health.Employee(employeeAccessToken, options?)` to create an instance of the Kota Health's `Employee` embedded UI.
The `employeeAccessToken` can be retrieved from the [Embed Session endpoint.](/api-reference/embed-sessions/create-embed-session)
Once initialised, if the optional `container` has not been provided, the employer embedded will load in on a `
` with `id="employee"`.
#### Method parameters
employeeAccessTokenstringRequired
Token retrieved from the `/embed/session` endpoint to authenticate the user session.
options objectOptional
container
stringOptional
The `id` of the container to load the Embedded UI in.\
Default value: `employee`
theme
objectOptional
Allows you to customise the look and feel of the embedded UI to match your platform. Learn about [theming your embedded UI here.](/embed/theming)
**`JavaScript (ESNext)`**
```javascript title="JavaScript (ESNext)"
const employeeEmbed = Kota.Health.employee();
const themeConfig = {
primaryColor: '#0875E1',
backgroundColor: '#fff',
radius: '12px',
ringColor: '#0875E1'
};
employeeEmbed.init(
employeeAccessToken,
{ container: 'employee', theme: themeConfig }
);
```
**`HTML`**
```html title="HTML"
```
---
## Browser events
The only way to communicate with your Embedded UI in the browser is by listening to an event.
You can set up listeners directly from your initialised `employer` and `employee` objects or by directly listening for the events on the window.
**`Embedded object`**
```javascript title="Embedded object"
// events can be called on this object
const employerEmbed = Kota.Health.employer();
employerEmbed.init(employeeAccessToken);
function handler(event) {
// Handle any metrics or actions here
}
employerEmbed.on('eventName', handler);
```
**`addEventListener`**
```javascript title="addEventListener"
function handler(event) {
// Handle any metrics or actions here
}
window.addEventListener('eventName', handler);
```
BROWSER EVENT LIST
|
Event name
|
Description
|
|
employer.pageLoaded
|
Fires when a new page loads. Object contains page title.
|
|
employer.healthSetupLoaded
|
Fires when the employer health insurance setup flow loads.
|
|
employer.healthManagementLoaded
|
Fires when the employer health insurance setup management loads.
|
|
employer.loadError
|
Fires when the employer embedded UI fails to load.
|
|
employee.pageLoaded
|
Fires when a new page loads. Object contains page title.
|
|
employee.healthSetupLoaded
|
Fires when the employee health insurance setup flow loads.
|
|
employee.healthManagementLoaded
|
Fires when the employee health insurance setup management loads.
|
|
employee.loadError
|
Fires when the employee embedded UI fails to load.
|
---
### pageLoaded
The `pageLoaded` event fires each time a new page is loaded throughout an Embedded UI - both for `employer` and `employee`.
You can listen for it directly from your initialised objects, e.g. `employerEmbed.on('pageLoaded', handler)`, or with event listeners. If listeningly directly be careful to listen for the correct event as they are namespaced by `employer` and `employee` - see the event list for more information.
#### Method parameters
event"pageLoaded"Required
The name of the event. See code examples for the embedded object and window listeners.
handler
functionRequired
`handler(event) => void` is a callback function that you provide that will be called when the event is fired. \
After it's called, it passes an event object with the following properties:
pageTitle string
The title of the page loaded in the Embedded UI.
**`Employer Embedded`**
```javascript title="Employer Embedded"
employerEmbed.on('pageLoaded', function(event) {
// Handle employer pageLoaded event
})
```
**`Employee Embedded`**
```javascript title="Employee Embedded"
employeeEmbed.on('pageLoaded', function(event) {
// Handle employer pageLoaded event
})
```
**`addEventListener`**
```javascript title="addEventListener"
function handler(event) {
// Handle employer pageLoaded event
}
window.addEventListener('employer.pageLoaded', handler);
window.addEventListener('employee.pageLoaded', handler);
```
---
### healthSetupLoaded
The `healthSetupLoaded` event fires each time a new page is loaded throughout an Embedded UI - both for `employer` and `employee`.
You can listen for it directly from your initialised objects, e.g. `employerEmbed.on('healthSetupLoaded', handler)`, or with event listeners. If listeningly directly be careful to listen for the correct event as they are namespaced by `employer` and `employee` - see the event list for more information.
#### Method parameters
event"healthSetupLoaded"Required
The name of the event. See code examples for the embedded object and window listeners.
handler
functionRequired
`handler(event) => void` is a callback function that you provide that will be called when the event is fired.
**`Employer Embedded`**
```javascript title="Employer Embedded"
employerEmbed.on('healthSetupLoaded', function(event) {
// Handle employer pageLoaded event
})
```
**`Employer Embedded`**
```javascript title="Employer Embedded"
employeeEmbed.on('healthSetupLoaded', function(event) {
// Handle employer pageLoaded event
})
```
**`addEventListener`**
```javascript title="addEventListener"
function handler(event) {
// Handle employer pageLoaded event
}
window.addEventListener('employer.healthSetupLoaded', handler);
window.addEventListener('employee.healthSetupLoaded', handler);
```
---
### healthManagementLoaded
The `healthManagementLoaded` event fires each time a new page is loaded throughout an Embedded UI - both for `employer` and `employee`.
You can listen for it directly from your initialised objects, e.g. `employerEmbed.on('healthManagementLoaded', handler)`, or with event listeners. If listeningly directly be careful to listen for the correct event as they are namespaced by `employer` and `employee` - see the event list below for more information.
#### Method parameters
event"healthManagementLoaded"Required
The name of the event. See code examples for the embedded object and window listeners.
handler
functionRequired
`handler(event) => void` is a callback function that you provide that will be called when the event is fired.
**`Employer Embed`**
```javascript title="Employer Embed"
employerEmbed.on('healthManagementLoaded', function(event) {
// Handle employer pageLoaded event
})
```
**`Employee Embed`**
```javascript title="Employee Embed"
employeeEmbed.on('healthManagementLoaded', function(event) {
// Handle employer pageLoaded event
})
```
**`addEventListener`**
```javascript title="addEventListener"
function handler(event) {
// Handle employer pageLoaded event
}
window.addEventListener('employer.healthManagementLoaded', handler);
window.addEventListener('employee.healthManagementLoaded', handler);
```
---
### loadError
The `loadError` event fires when the Embedded UI fails to load.
You can listen for it directly from your initialised objects, e.g. `employerEmbed.on('loadError', handler)`, or with event listeners. If listeningly directly be careful to listen for the correct event as they are namespaced by `employer` and `employee` - see the event list below for more information.
#### Method parameters
event"loadError"Required
The name of the event. See code examples for the embedded object and window listeners.
handler
functionRequired
`handler(event) => void` is a callback function that you provide that will be called when the event is fired.
**`Employer Embed`**
```javascript title="Employer Embed"
employerEmbed.on('loadError', function(event) {
// Handle employer loadError event
})
```
**`Employee Embed`**
```javascript title="Employee Embed"
employeeEmbed.on('loadError', function(event) {
// Handle employee loadError event
})
```
**`addEventListener`**
```javascript title="addEventListener"
function handler(event) {
// Handle employer loadError event
}
window.addEventListener('employer.loadError', handler);
window.addEventListener('employee.loadError', handler);
```
---