Frontend Integration

The Kota Hosted frontend integration is simple: request a session link from your backend, then send your employee to that link. Kota handles the entire UI experience on your custom-branded domain.

How it works

1. Employee initiates benefits access: User clicks a button or link in your application to access their benefits
2. Request session link: Your frontend calls your backend to generate a Hosted session link
3. Send to Hosted experience: Send the employee to the session link URL
4. Employee completes their journey: Kota’s fully managed UI guides them through enrollment, policy management, and more
5. Return to your platform: Employees can return via a button in the header, or will be sent back in case of authentication errors

Step 1: Request a session link from your backend

Your frontend should call your backend API, which generates a session link via the Create Hosted Session endpoint.

1
// Example: Request session link from your backend
2
async function getHostedSessionLink(employeeId) {
3
  const response = await fetch('/api/get-hosted-session', {
4
    method: 'POST',
5
    headers: {
6
      'Content-Type': 'application/json'
7
    },
8
    body: JSON.stringify({ employee_id: employeeId })
9
  });
10
11
  const data = await response.json();
12
  return data.link;
13
}

For backend implementation details, see Server-side integration.

Step 2: Send the employee to the Hosted experience

Once you have the session link, send the employee to that URL. Each link is single-use and expires after 60 minutes.

1
// Example: Send employee to Hosted experience
2
async function openHostedBenefits(employeeId) {
3
  try {
4
    const sessionLink = await getHostedSessionLink(employeeId);
5
6
    // Navigate to the Hosted experience
7
    window.location.href = sessionLink;
8
  } catch (error) {
9
    console.error('Failed to get session link:', error);
10
    // Handle error appropriately for your application
11
  }
12
}
13
14
// Trigger when employee clicks "View Benefits" button
15
document.getElementById('benefits-button').addEventListener('click', () => {
16
  const employeeId = getCurrentEmployeeId();
17
  openHostedBenefits(employeeId);
18
});

Error handling

If a session link expires or is already used, Kota Hosted will display an error message with a link back to your platform (using the configured platform_redirect_url). This redirect URL is configured once per integration by Kota.

Authentication errors and other issues will also provide a button in the header that sends users back to your platform.

Customize your Hosted experience

Your Hosted experience can be fully branded with your logo, favicon, custom domain, platform name, and comprehensive theming. These settings are configured once per integration.