> 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 Integration

> Set up your Kota Hosted 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.

> **Note**
>
> Kota Hosted currently supports employee flows only. Employer setup and management flows are coming in early 2026.

---

## 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](/api-reference/hosted-sessions/create-hosted-session) endpoint.

```javascript
// Example: Request session link from your backend
async function getHostedSessionLink(employeeId) {
  const response = await fetch('/api/get-hosted-session', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ employee_id: employeeId })
  });

  const data = await response.json();
  return data.link;
}
```

For backend implementation details, see [Server-side integration](/hosted/server-side).

---

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

```javascript
// Example: Send employee to Hosted experience
async function openHostedBenefits(employeeId) {
  try {
    const sessionLink = await getHostedSessionLink(employeeId);

    // Navigate to the Hosted experience
    window.location.href = sessionLink;
  } catch (error) {
    console.error('Failed to get session link:', error);
    // Handle error appropriately for your application
  }
}

// Trigger when employee clicks "View Benefits" button
document.getElementById('benefits-button').addEventListener('click', () => {
  const employeeId = getCurrentEmployeeId();
  openHostedBenefits(employeeId);
});
```

> **Info**
>
> **Alternative**: You can also open the Hosted experience in a new tab using `window.open(sessionLink, '_blank')` if you prefer to keep your application open in the background.

---

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

> **Info**
>
> **Branding configuration** is done by Kota during your integration setup. To learn more about customization options, see [Customization](/hosted/customization).

---