> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.kota.io/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.kota.io/_mcp/server.

# Frontend SDK Integration

> Set up your Kota frontend integration

To set up a compliant Kota frontend integration, you must include the Kota Embed SDK in your project, get your embedded session token from your backend, and initialise the Employer and Employee Embedded UIs.

##### Want to jump straight into the Embed SDK reference?

Check out our [Embed SDK reference](/embed/sdk-reference).

## Include Kota's Embed SDK in your project

Include the Kota.js script on each page you want to run it on - it should always be loaded directly from [https://js.kota.io](https://js.kota.io) or [https://test.js.kota.io](https://test.js.kota.io), rather than included in a bundle or hosted yourself. This ensures compliance and future updates.

When you are ready to go-live make sure your production environment is not including the test SDK.

Including Kota.js, the Embed SDK:

**`Test`**

```javascript title="Test"
<script src="https://test.js.kota.io/v1"></script>
```

**`Production`**

```javascript title="Production"
<script src="https://js.kota.io/v1"></script>
```

---

## Get your Embed SDK token

Depending on your platform's user - an Employer or Employee - your backend should provide you with an access token that's required to authenticate with the Embed SDK's Employer or Employee UIs. The token, depending on what was provided by your backend request, is either for an Employer or Employee Embedded UI and your backend should make it clear what context and user it is for.

For context on the backend implementation look at the server-side documentation for [issuing an Embed SDK token](/embed/server-side#issue-an-embed-session-token).

---

## Initialise the Employer and Employee UIs

### Employer

Use `Kota.Health.Employer(employerAccessToken, options?)` to create an instance of the Kota Health’s Employer embedded UI.

The `employerAccessToken` can be retrieved from the Embed Session endpoint.

Once initialised, if the optional container has not been provided, the employer embedded will load in on a `<div>` with id="employer".

**`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"
<div id='employer' style="width: 90%; margin: 20px auto;"/>
```

### Employee

Use `Kota.Health.Employer(employeeAccessToken, options?)` to create an instance of the Kota Health’s Employee embedded UI.

The `employeeAccessToken` can be retrieved from the Embed Session endpoint.

Once initialised, if the optional container has not been provided, the employer embedded will load in on a `<div>` with id="employee".

**`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"
<div id='employee' style="width: 90%; margin: 20px auto;"/>
```

---

## Theme your integration

> **Info**
>
> This is an optional step

You can customise the appearance of the Embedded UIs for Employers and Employees to match your platform's brand and design style. You can optionally pass the `theme` object in the `options` when you're initialising either the `Employer` or `Employee` embedded UIs.

To dive into themeing in more detail, check out these resources:

* [Themeing your UI](/embed/theming)
* [SDK configuration](/embed/sdk-reference#initialising-kotajs)

---