Kore.ai ウィジェット SDK チュートリアル

このチュートリアルは、ボットからの情報を表示し、ボットとの対話を可能にするウィジェットをホストするために、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 ファイルをブラウザで開くと、ウィジェットとともにチャットウィンドウが表示されます。

On this Page