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

# Widget SDK Tutorial

This tutorial walks through hosting the Kore.ai Widget SDK — either standalone (panels only) or co-hosted alongside the Web SDK (panels + chat window).

***

## Prerequisites

1. \*\*Build a bot with Digital Views.

2. **Enable the Widget SDK channel** on your bot by creating or using an existing client app. See [Add Widget SDK Channel](/ai-for-service/channels/add-widget-sdk-channel#adding-the-widget-sdk-channel). Note the following from the **Configurations** tab:
   * Bot Name
   * Bot ID
   * Client ID
   * Client Secret

3. **If co-hosting with Web SDK**, also enable the **Web/Mobile Client** channel. Note the same four credentials from that channel. See [Web SDK Tutorial](/ai-for-service/sdk/tutorials/web-sdk).

4. **Publish the bot.**

***

## Option A — Host Panels Standalone

1. Download the Web SDK from [github.com/Koredotcom/web-kore-sdk](https://github.com/Koredotcom/web-kore-sdk) and extract all files to `…/SDKApp/sdk`.

2. Open the `UI` folder and edit `kore-widgets-config.js`.

3. Configure `botOptions` with the **Widget SDK** channel credentials:
   ```javascript theme={null}
   botOptions.botInfo      = { name: "<Bot Name>", "_id": "<Bot ID>" };
   botOptions.clientId     = "<Client ID>";
   botOptions.clientSecret = "<Client Secret>";
   ```

4. Open `index_widgets.html` in a browser. The panels render in the page.

5. To embed panels in your own website, add the `<div>` element from `index_widgets.html` to your HTML page.

***

## Option B — Co-Host Panels with Web SDK

1. Download and extract the Web SDK to `…/SDKApp/sdk` (same as above).

2. Open the `UI` folder and edit `kore-config.js`.

3. Configure `botOptions` with the **Web/Mobile Client** channel credentials:
   ```javascript theme={null}
   botOptions.botInfo      = { name: "<Bot Name>", "_id": "<Bot ID>" };
   botOptions.clientId     = "<Web/Mobile Client ID>";
   botOptions.clientSecret = "<Web/Mobile Client Secret>";
   ```

4. Edit `kore-widgets-config.js` and configure `botOptions` with the **Widget SDK** channel credentials:
   ```javascript theme={null}
   botOptions.botInfo      = { name: "<Bot Name>", "_id": "<Bot ID>" };
   botOptions.clientId     = "<Widget SDK Client ID>";
   botOptions.clientSecret = "<Widget SDK Client Secret>";
   ```

5. Open `index_widgets_chat.html` in a browser. The chat window and panels render together.

***