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

<Badge icon="arrow-left" color="gray">[Back to SDK](/agent-platform/channels#sdk)</Badge>

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

The Web SDK channel connects a browser-based chat or voice widget to your agent. It supports two authentication modes — **Anonymous / Public-key bootstrap** for client-only apps, and **Hosted token exchange** for setups where a backend can hold a server secret.

<Note>Choose your authentication mode before you begin — it determines which additional fields apply later in this setup.</Note>

To configure a Web SDK channel, go to **Deployments** > **Channels** > **SDK** > **Web SDK** > **+ New** and complete the following steps in order.

<Steps>
  <Step title="Set Up the Connection">
    On the **New Web SDK Connection** page, provide the following 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**. |
  </Step>

  <Step title="Choose an Authentication Mode">
    | 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.       |

    <Note>If you select **Hosted token exchange**, complete the next step. Otherwise, skip to Select the Public SDK Key.</Note>
  </Step>

  <Step title="Set the Token Envelope Policy (Hosted Token Exchange Only)">
    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       |
  </Step>

  <Step title="Select the Public SDK Key and Create the Channel">
    Select the **Public SDK Key** the browser will use during SDK bootstrap, then select **Create**.
  </Step>

  <Step title="Configure Additional Settings">
    Once the channel is created, select it, then go to the **Configuration** tab to update the following fields:

    | Field                                                                                          | Description                                                                                                                                                                                                                                                                                                                                                                      |
    | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | **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 sensitive and identity data can be encrypted before it reaches Runtime.                                                                                                                                                                                                                                                   |
  </Step>

  <Step title="Configure Widget Behavior">
    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?"                           |
  </Step>

  <Step title="Save the Channel">
    Select **Save Configuration**, then **Save Changes** to apply the configuration.
  </Step>
</Steps>

## Manage an Existing Channel

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

<Tabs>
  <Tab title="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)  |
  </Tab>

  <Tab title="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**.
  </Tab>

  <Tab title="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.
  </Tab>

  <Tab title="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>
  </Tab>
</Tabs>