このチュートリアルは、ボットからの情報を表示し、ボットとの対話を可能にするウィジェットをホストするために、Kore.ai ボット Web SDK のインスタンスを設定して実行するためのエンド ツー エンドのウォークスルーです。
ウィジェット SDK の概要
Kore.ai ウィジェット SDK をホストする方法は、2 種類あります:
- WebSDK と共同でホスティングし、Web/モバイル クライアントと ウィジェット SDK の両方のチャネルを有効にして設定します。
- 個別に ー ウィジェット SDK チャネルのみを有効にして設定します。
このチュートリアルでは、両方のバリエーションの手順を示します。
Kore.ai ウィジェット SDK のインストールと実行
このセクションでは、ウィジェット SDK を使用して Kore.ai ボットを実行する方法と、コンピュータのローカル ホスト サーバー上で動作するテスト アプリケーションの詳細な手順を説明します。必要条件
- はじめに、テスト アプリケーションで実行するために、デジタル ビューでボットを構築する必要があります(デジタル ビューについてはこちらをご覧ください)。
- 新しいクライアント アプリを作成するか、または既存のクライアント アプリを使用し、チャネル設定を行うことで、上記ボットの ウィジェット SDK チャネルを有効にする必要があります。詳しい手順についてはこちらをご覧ください 。
- WebSDK とともに パネルとウィジェット を共同ホストする場合は、新規のクライアント アプリを作成するか、既存のクライアント アプリを使用して、上記ボットの Web/モバイル クライアント チャネルを有効にし、チャネル設定を定義する必要があります。詳しい手順についてはこちらをご覧ください 。
- ボットの公開します。
- [チャネル > 設定済みチャネル] をクリックして、設定されたウィジェット SDK チャネルを開きます。「設定」タブでは、以下の項目をメモします。のちほど、ウィジェット SDK のセットアップでこれらを使用します:
- ボット名
- ボット ID
- クライアント ID
- クライアント シークレット
- パネルとウィジェット を Web/モバイル SDK と共同でホストする場合は、[チャネル > 設定済みチャネルチュートリアル] から、設定済みのWeb/モバイル クライアント チャネルを開きます。「設定」タブで、以下の項目をメモします。のちほど、ウィジェット SDK のセットアップでこれらを使用します:
- ボット名
- ボット ID
- クライアント ID
- クライアント シークレット
次の手順では、 ウィジェット SDK に必要なソフトウェア パッケージと、ローカル ホスト サーバー上でボットをローカルに実行するテスト アプリケーションをダウンロード、解凍、インストール、および設定します。ご要件に応じて、以下の適切なセクションをご覧ください:
- パネルを個別にホストするか、または
- Web SDK とパネルを共同ホストします。
パネルを個別ホストするためのセットアップ: Kore.ai ウィジェット SDK をダウンロードするには、https://github.com/Koredotcom/web-kore-sdkにアクセスして [ダウンロード] をクリックします。すべてのファイルを …/SDKApp/sdk フォルダに解凍します。
- UI フォルダを開きます。
- を見つけて開きます
kore-widgets-config.js
- ボット ビルダーで作成したウィジェット SDKチャネル設定を使用して、
botOptions
を設定します。botOptions.botInfo
botOptions.clientId
botOptions.clientSecret
- ブラウザで
index_widgets.html
のファイルを開くと、パネルが表示されます。この<div>
要素をウェブサイトの html ページに追加すると、そこでパネルをホストすることができます。
Web/モバイル SDKでパネルを共同ホストするための設定: Kore.ai ウィジェット SDK をダウンロードするには、https://github.com/Koredotcom/web-kore-sdk にアクセスして [ダウンロード] をクリックします。すべてのファイルを …/SDKApp/sdk フォルダに解凍します。
- UI フォルダを開きます。
- を見つけて開きます
kore-config.js
botOptions
を、Bot ビルダーで作成したWeb/モバイル クライアントチャネル設定を使用して、設定します。botOptions.botInfo
botOptions.clientId
botOptions.clientSecret
- 開きます。
kore-widgets-config.js
botOptions
を、ボット ビルダーで作成した「ウィジェット SDK」チャネル設定を使用して、設定します。botOptions.botInfo
botOptions.clientId
botOptions.clientSecret
index_widgets_chat.html
ファイルをブラウザで開くと、ウィジェットとともにチャット ウィンドウが表示されます。