チャットBotの概要
会話型ボット
Kore.ai のアプローチ
Kore.ai 会話型プラットフォーム
ボットの概念と用語
自然言語処理 (NLP)
ボットタイプ
ボットタスク
Kore.ai プラットフォームを使う
ボットビルダーのアクセス
Kore.ai ボットビルダーを使う
ボットビルダー
ダイアログタスク
ユーザーインテントノード
ダイアログノード
エンティティノード
サポートするエンティティタイプ
複合エンティティ
サポートする色
サポートする会社名
フォームノード
ロジックノード
メッセージノード
確認ノード
サービスノード
カスタム認証の実装
サービスノード用双方向 SSL
スクリプトノード
エージェント転送ノード
Webフックノード
ノードのグループ化
接続と遷移
ダイアログの管理
プロンプトエディタ
標準ボットの構築
設計
開発 - 標準ボット
ストーリーボード
アラートタスク
アラートタスク
無視する単語 & フィールドメモリ
デジタルフォーム
デジタルビュー
知識グラフ
用語
構築
生成
ボットオントロジーのインポート/エクスポート
解析
知識の抽出
スモールトーク
初めてのボット構築
ボット構築を始める
シンプルなボットを構築
インテリジェンス
コンテキスト管理
概要
コンテキスト管理
セッションおよびコンテキスト変数
コンテキストオブジェクト
ダイアログ管理
サブインテント
エンティティの変更
複数インテントの検出
センチメント分析 (英語)
トーン分析
センチメント管理
デフォルトの会話
デフォルトの標準レスポンス
発話テスト
自然言語
概要
機械学習
ML (機械学習) モデル
基本概念
NLP (自然言語処理) の設定 & ガイドライン
知識グラフのトレーニング
示唆
ランキング & リゾルバ
高度な NLP 設定
チャネルの有効化
テスト & デバグ
ボットと会話
発話テスト
バッチテスト
会話の記録 & テスト
ボットの公開
ボットの分析
概要
ダッシュボード
カスタムダッシュボード
会話フロー
ボットメトリクス (英語)
アドバンスド トピック
ボット認証
言語管理
共同開発
IVR 統合
データ テーブル
ユニバーサル ボット
定義
構築
トレーニング
カスタマイズ
言語の有効化
スマート ボット
スマート ボットの定義
イベントベースのボットアクション
koreUtil ライブラリ
ボット設定
ボットの機能
ボット設定
PII 設定
エラーメッセージのカスタマイズ
セッションを管理する
ボット管理
ボットのバージョン
ボット変数
API ガイド
API 概要
API リスト
API コレクション
SDK
SDK 概要
SDK セキュリティ
SDK アプリ登録
Web 上の SDK チュートリアル
メッセージ形式とテンプレート
モバイル SDK プッシュ通知
ウィジット SDK チュートリアル
メッセージ形式とテンプレート
WebSocket 接続
BotKit SDK の利用
インストール
設定
イベント
機能
BotKit SDK チュートリアル - エージェント転送
BotKit SDK チュートリアル - フライト検索サンプルボット
外部 NLP エンジンの利用
ボット管理者
ボット管理者コンソール
ダッシュボード
ユーザー管理
御社ユーザーの管理
御社グループの管理
ロールを管理
ボット管理
エンロール
ユーザーの招待
一括招待
ユーザーのインポート
AD からユーザーを同期
セキュリティ & コンプライアンス
シングル サインオンを使う
セキュリティの設定
クラウド コネクタ
分析
請求処理
How To
シンプルなボットの構築
バンキングボットの構築
送金タスク
残高の更新タスク
知識グラフを作成
知識グラフへ抽出したFAQを入力
スマート アラートのスケジュール
エージェント転送の設定
パネルやウィジットの設定
デジタル ビューの設定
デジタル フォームの設定
データをデータテーブルに追加
データテーブルのデータを更新
フォームデータをデータテーブルに追加
コンテキストの切り替え
意図を使う
インテントやエンティティのパターン
エンティティ ルール
マルチ言語なボットの動き
カスタム ダッシュボード
ボット メトリクスをフィルターするためのカスタムタグ
グローバル変数
コンテンツ変数
ボット機能を使う
ボットリリースのライフサイクル
グループノードを利用したインテントのスコーピング
Kore-Unblu インテグレーション
  1. Home
  2. Docs
  3. Bots
  4. How Tos
  5. パネルとウィジェットの設定方法

パネルとウィジェットの設定方法

こちらの案内では、ワンクリックでユーザーが口座の詳細を表示できるバンキングBotのシナリオについて見ていきます。ウィジェットを使用してダイアログタスクをトリガーし、適切なメッセージを表示する方法と、パネルを使用してこれらのウィジェットを保持する方法を説明いたします。また、ウィジェットSDKを使用してパネルをウェブ/モバイルクライアント上でホストする方法についてもご説明します。パネルとウィジェットとは何か、またKore.aiのBotプラットフォームにどのように導入されるかについての詳細は、こちらを参照してください

例題

以下のシナリオに取り組むバンキングBotを検討します。 このドキュメントでは、パネル、ウィジェット、ウィジェットSDK、ウェブ/モバイルクライアントを使用して、上記のすべてのシナリオを実現するための詳細な手法を説明します。

Pre-requisites

  • Botビルドナレッジ
  • 以下に説明するダイアログを持つバンキングBot:
    • 残高取得-ユーザーが口座番号と口座種類を入力し、利用可能な残高を表示するダイアログタスクです。

設定

次の各シナリオを1つずつ考えてみましょう。

  1. ウィジェットSDKチャネルを使用して特定の口座の残高を表示するダイアログタスクです。
  2. ウィジェットは上記のダイアログタスクをトリガーし、ウィジェットとパネルをセットします。
  3. パネルは静的なJSONテンプレートメッセージを表示するウィジェットを保持します。

メッセージテンプレート

まず、ウィジェットからトリガーされるダイアログタスクには、ウィジェットSDKチャネル用にメッセージ定義が必要となります。 ここでは口座の詳細を表示するために次のメッセージを使用しています。

var output = 'The Balance in your' + context.entities.AccountType + ' account is ' + context.GetAccountBalance.response.body.Balance; var message = { "elements": [ { "title": "Account View", "sub_title": output, "icon": "https://kore.ai/wp-content/uploads/sites/18/banking-home.png", } ] }; print(JSON.stringify(message));

ウィジェットの設定

ダイアログタスクのウィジェット

ダイアログタスクをトリガーする2つのウィジェットを作成します。当座預金:まず、ユーザーの現在の口座残高を表示するようにウィジェットを設定する方法を見ていきましょう。

  • 左側のナビゲーションメニューから、Botタスクの下部にあるパネルとウィジェットを開きます。
  • ウィジェットを作成ボタンをクリックします。
  • ウィジェット名と表示名を付けます。
  • ソースを設定します。ダイアログタスクをトリガーしているため、ダイアログタスクを選択します。
  • ユースケースに従って、ダイアログタスクを選択残高取得として選択します。
  • エンティティの割り当てで、ダイアログタスクの要件に従って次のエンティティを設定します(入力時に表示されるドロップボックスから選択できます)。
    • AccountType当座
    • AccountNumber1.「ダイアログタスクを選択」ドロップダウンの横にあるダイアログタスクを開くアイコンを使用して、ダイアログを開き、必要なエンティティを確認することができます。

  • ウィジェットを保存します。
  • ウィジェットを編集し、実行とプレビューをクリックして、ウィジェットのアウトプットを確認します。
  • プレビューとして保存を行うと、アウトプットをウィジェットに対するサムネイルとして設定します。

普通預金口座 同じ口座番号の普通預金口座から、口座の表示のために上記の手順を繰り返します。

パネルの設定

このようにして作成されたウィジェットは、ランタイムの表示と実行のためにパネルに添付する必要があります。

  1. パネルを作成ボタンをクリックして、パネルを作成します。
  2. 新しいパネルウィンドウの中に、パネル名、表示名、アイコンURLを入力します。
  3. ウィジェットを追加ボタンをクリックして、パネル管理ウィンドウを開きます。
  4. ウィジェットを追加を使用して、表示するウィジェット(この場合は口座残高と当座預金のウィジェット)を選択して追加します。
  5. テストボタンを使用して、ウィジェットの動作を確認します。

JSONウィジェットのパネル

静的なJSONコンテンツを使用してウィジェットを作成する方法をご説明します。JSONを使用して円グラフを表示させます。

  1. パネルを作成をクリックして新しいパネルを作成しJSONの例と名前を付けます。
  2. 詳細アイコンを選択してパネル管理を選択すると、ウィジェットを作成のオプションが見つかりますので、それをクリックします。
  3. 新しいウィジェットダイアログで名前を入力し、ソースをJSONに設定します。
  4. JavaScriptエディタには次のように入力します。これは、交通費、食費、宿泊費などのさまざまな局面で費やされた金額の内訳を円グラフで表示するためのメッセージテンプレートです。サポートされているメッセージテンプレートの詳細については、こちらを参照してください
    var message = { "templateType": "piechart", "pie_type": "regular", "title": "Summary", "description": "monthly report", "elements": [ { "title": "Airlines", "value": "1264.0", "displayValue": "$ 1,234" }, { "title": "Hotels", "value": "568.10", "displayValue": "$ 568" }, { "title": "Food", "value": "324.50", "displayValue": "$ 324" } ] }; print(JSON.stringify(message));
  5. パネルをテストすると、両方のパネルアイコンが表示されますので、それぞれをクリックして実際の動作を確認してください。

公開

Botを公開するには、まずチャネルを有効にします。

  1. 左側のナビゲーションメニューから、公開するチャネルを選択します。このユースケースでは、ウェブ/モバイルクライアントとウィジェットSDKのチャネルの両方を選択します。
  2. チャネルを選択し、設定タブからBot名BotIdクライアントIdクライアントシークレットをメモします。
  3. 左側のナビゲーションメニューから、公開オプションを選択します。「タスクと言語」セクションで、開発したウィジェットとパネルが公開用に選択されていることを確認します。
  4. 公開として続行します。

ホスティング

パネルはウェブ/モバイルクライアントでホストします。ウィジェットSDKの使用方法の詳細についてはこちらをご覧ください

  1. Kore.aiウィジェットSDKをダウンロードするには、https://github.com/Koredotcom/web-kore-sdkにアクセスし、ダウンロードをクリックします。
  2. すべてのファイルを…/SDKApp/sdkフォルダに展開します。
  3. 上記のSDKフォルダを開き、UIフォルダに移動します。
  4. 次を開きます。 kore-config.js
  5. 上記のセクションでコピーしたウェブ/モバイルクライアントのチャネル設定のbotOptionsを設定します。
    • botOptions.botInfo
    • botOptions.clientId
    • botOptions.clientSecret

    要件に応じて他の変更内容を加えます。

  6. 次を開きます。 kore-widgets-config.js
  7. 上記のセクションでコピーしたウィジェットSDKのチャネル設定のbotOptionsWizを設定します。
    • botOptionsWiz.botInfo
    • botOptionsWiz.clientId
    • botOptionsWiz.clientSecret

    要件に応じて他の変更内容を加えます。

  8. ブラウザでindex_widgets_chat.htmlファイルを開き、ウィジェットと共にチャットウィンドウを表示します。
  9. パネルを個別にホストする場合は、index_widgets.htmlファイルを使用します。ウェブサイトで同じものをホストする方法については、GitHubを参照してください。
メニュー