> ## Documentation Index
> Fetch the complete documentation index at: https://koreai-content-gov.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-channels)</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">
    Click **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 **Deployment** tab shows 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. |

    Click **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>