> ## Documentation Index
> Fetch the complete documentation index at: https://koreai.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Set up Web SDK

Embed a chat widget in your website with a single script tag. Web SDK is a deployment channel that connects a chat and voice widget on your site to a specific agent deployment.

## Create a Web SDK Channel

Go to **Deployments** > **Channels** > **SDK** > **Web SDK** > **+ New**.

The dialog collects these fields.

| Field              | Description                                                                                                             |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| **Display Name**   | A label for the connection (up to 255 characters).                                                                      |
| **Environment**    | The environment this channel follows; it tracks that environment's active deployment.                                   |
| **Authentication** | How customer browsers bootstrap SDK sessions. Select **Anonymous / Public-key bootstrap** or **Hosted token exchange**. |

Choose the authentication mode that fits your setup.

| Mode                                 | When to use                                                                                                                                                                                                 |
| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Anonymous / Public-key bootstrap** | Browser or client app. Store the public `pk_*` key, runtime endpoint, and channel selection in client-side configuration. No ABL secret is required, so you provision nothing extra on the customer server. |
| **Hosted token exchange**            | Customer backend. The backend stores a reveal-once `sk_*` server secret and issues one-time `bootstrapToken` values; the browser stores only the short-lived token, runtime endpoint, and project ID.       |

**If you select Hosted token exchange**, also set the **Token envelope policy** - controls whether Hosted Exchange SDK bootstrap and session credentials are signed or encrypted.

| Option                                    | Meaning                                                                                                          |
| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| Use runtime default                       | Defers to the project-level default Hosted Exchange token envelope policy                                        |
| Signed tokens                             | Issues signed bootstrap/session tokens only                                                                      |
| Prefer encrypted tokens (`jwe_preferred`) | Uses encrypted (JWE) tokens when Runtime's encryption capability is ready; falls back to signed tokens otherwise |
| Require encrypted tokens (`jwe_required`) | Requires encrypted issuance and verification end to end; fails closed rather than returning a signed token       |

Select the **Public SDK Key** the browser will use during SDK bootstrap, and then select **Create**.

<Note>
  Once the channel is created, the Configuration tab shows a few additional fields:

  * **Allowed Origins (CORS)** *(optional, both modes)* - one URL per line, e.g. `https://example.com`, `https://*.example.com`. These origins are enforced for the public key linked to this SDK channel.
  * **Server secret** *(Hosted token exchange only)* - Studio generates the `sk_*` server secret automatically on creation and reveals it once. Copy and store it in your customer backend immediately, since it cannot be viewed again. **Server Secret Status**, **Server Secret Prefix**, and **Last Rotated** are shown afterward; use **Rotate server secret** to issue a new one — the previous secret stops working immediately.
  * **Customer-issued encrypted bootstrap** *(Hosted token exchange only, toggle, off by default)* - accept customer-backend-issued JWE bootstrap tokens so PHI and identity data can be encrypted before it reaches Runtime.
</Note>

Regardless of authentication mode, the same widget behavior settings apply, under **Web SDK Settings**.

| Field                           | Description                                                                                                |
| ------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| **Widget Mode**                 | `Chat Only`, `Voice Only`, or `Chat + Voice`.                                                              |
| **Features**                    | Toggle **Chat** and **Voice** independently.                                                               |
| **Show Agent Activity Updates** | Off by default. Displays transient handoff, delegate, and reasoning activity for this SDK channel.         |
| **Theme**                       | Choose a preset (for example `Light`) or select **Add themes** to tune the widget to match your host site. |
| **Welcome Message**             | The first message shown to users, for example "Hello! How can I help you today?"                           |

Select **Save Configuration**, then **Save Changes** to persist the channel.

## Manage an Existing Channel

Opening a channel from **Deployments** > **Channels** > **Web SDK** shows four tabs: **Overview**, **Configuration**, **Deployment**, and **Testing**.

### Overview

The **Connection Summary** shows these fields.

| Field           | Description                       |
| --------------- | --------------------------------- |
| **Status**      | for example: *Active*             |
| **Created**     | Timestamp the channel was created |
| **Updated**     | Timestamp of the last change      |
| **Environment** | for example: `dev`                |
| **Source Type** | `SDK Channel`                     |
| **Source ID**   | Unique channel identifier (UUID)  |

### Configuration

Contains the same **General** (Display Name), **Authentication**, and widget behavior settings described in [Create a Web SDK Channel](#create-a-web-sdk-channel) above, editable at any time. Changing the auth mode, token envelope policy, allowed origins, or public key here updates the live channel immediately after **Save Changes**.

### Deployment

The tab collects these fields.

| Field                 | Description                                                                                                             |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Agent Version**     | An **Environment** dropdown (for example: `Development`) that selects which deployed version handles incoming messages. |
| **Active Deployment** | Shows the bound deployment version and when it was deployed.                                                            |

Select **Save Changes** after switching the environment/version.

### Testing

Select **+ Generate Link** under **Secure Preview Link** to create a secure, time-limited link to preview your widget. The link expires after 7 days.

Copy the **Embed Code** the tab provides, for example:

```html theme={null} theme={null}
<!-- Agent SDK Widget -->
<!-- Replace YOUR_PUBLIC_API_KEY with a full key that starts with pk_ca3b8ed5 -->
<script src="https://agents-staging.kore.ai/api/sdk/embed/script" defer></script>
<agent-widget
  project-id="PROJECT ID"
  api-key="YOUR_PUBLIC_API_KEY"
  endpoint="https://agents-staging.kore.ai"
  channel-id="CHANNEL ID"
  client-session-identifier="true"
  chat-enabled="true"
  voice-enabled="false"
  mode="chat"
  position="bottom-right"
></agent-widget>
```

1. Copy the above embed code.
2. Replace the API key placeholder with your actual key.
3. Paste the code before the closing `</body>` tag.
4. The widget will appear on your site automatically.

<Note>
  The embed code is generated per channel and already includes the correct `project-id`, `endpoint`, and `channel-id` for this connection — only the API key placeholder needs to be replaced.
</Note>