> ## Documentation Index
> Fetch the complete documentation index at: https://koreai-agent-management-platform-dev.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.** See [Digital Views](../../automation/use-cases/digital-skills/digital-views.md).

2. **Enable the Widget SDK channel** on your bot by creating or using an existing client app. See [Add Widget SDK Channel](../../channels/add-widget-sdk-channel.md). 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](web-sdk.mdx).

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.

***


Built with [Mintlify](https://mintlify.com).