Frontend SDK integration

Set up your Kota frontend integration.

To set up a compliant Kota frontend integration, you must include the Kota Embedded 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 Embedded SDK reference?

Check out our Embedded SDK reference.

Include Kota’s Embedded 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 or 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 Embedded SDK:

1<script src="https://test.js.kota.io/v1"></script>

Get your Embedded 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 Embedded 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 retrieving an Embedded SDK 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”.

1const employerEmbed = Kota.Health.employer();
2
3const themeConfig = {
4  primaryColor: '#0875E1',
5  backgroundColor: '#fff',
6  radius: '12px',
7  ringColor: '#0875E1'
8};
9
10employerEmbed.init(
11  employerAccessToken,
12  { container: 'employer', theme: themeConfig }
13);

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”.

1const employeeEmbed = Kota.Health.employee();
2
3const themeConfig = {
4  primaryColor: '#0875E1',
5  backgroundColor: '#fff',
6  radius: '12px',
7  ringColor: '#0875E1'
8};
9
10employeeEmbed.init(
11  employeeAccessToken,
12  { container: 'employee', theme: themeConfig }
13);

Theme your integration

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:

Built with