はじめに
対話型AIプラットフォーム
チャットボットの概要
自然言語処理(NLP)
ボットの概念と用語
クイックスタートガイド
プラットフォームへのアクセス
ボットビルダーの操作
リリースノート
最新バージョン(英語)
以前のバージョン(英語)
コンセプト
設計
ストーリーボード
ダイアログタスク
ダイアログタスクとは
ダイアログビルダー
ノードタイプ
インテントノード
ダイアログノード
エンティティノード
フォームノード
確認ノード
ロジックノード
ボットアクションノード
サービスノード
Webhookノード
スクリプトノード
グループノード
エージェント転送ノード
ユーザープロンプト
音声通話プロパティ
イベント ハンドラー
ナレッジグラフ
ナレッジグラフの抽出
ナレッジグラフの構築
ボットにナレッジグラフを追加
グラフの作成
ナレッジグラフの構築
既存のソースからFAQを構築
通知タスク
スモールトーク
デジタルスキル
デジタルフォーム
デジタルビュー
デジタルビューとは
パネル
ウィジェット
トレーニング
トレーニングとは
機械学習
機械学習とは
モデル検証
ファンダメンタルミーニング
ナレッジグラフ
示唆
ランキングおよび解決
NLPの詳細設定
NLPのガイドライン
インテリジェンス
インテリジェンスとは
コンテキスト
コンテキストインテント
割り込み
複数インテントの検出
エンティティの変更
デフォルトの会話
センチメント管理
トーン分析
テストとデバッグ
ボットと会話
発話テスト
バッチテスト
会話テスト
デプロイ
チャネル
公開
LLM and Generative AI
Introduction
LLM Integration
Kore.ai XO GPT Module
Prompts & Requests Library
Co-Pilot Features
Dynamic Conversations Features
分析
ボットの分析
NLPメトリクス
会話フロー
Usage Metrics
封じ込め測定
カスタムダッシュボード
カスタムダッシュボードとは
メタタグ
カスタムダッシュボードとウィジェット
ユニバーサルボット
ユニバーサルボットとは
ユニバーサルボットの定義
ユニバーサルボットの作成
ユニバーサルボットのトレーニング
ユニバーサルボットのカスタマイズ
他言語の有効化
ストア
プラントと使用
Overview
Usage Plans
Support Plans
Invoices
管理
ボット認証
複数言語対応ボット
個人を特定できる情報の編集
ボット変数の使用
IVRのシステム連携
一般設定
ボット管理
ハウツー
Integrations
Actions
Actions Overview
Asana
Configure
Templates
Azure OpenAI
Configure
Templates
BambooHR
Configure
Templates
Bitly
Configure
Templates
Confluence
Configure
Templates
DHL
Configure
Templates
Freshdesk
Configure
Templates
Freshservice
Configure
Templates
Google Maps
Configure
Templates
Here
Configure
Templates
HubSpot
Configure
Templates
JIRA
Configure
Templates
Microsoft Graph
Configure
Templates
Open AI
Configure
Templates
Salesforce
Configure
Templates
ServiceNow
Configure
Templates
Stripe
Configure
Templates
Shopify
Configure
Templates
Twilio
Configure
Templates
Zendesk
Configure
Templates
Agents
Agent Transfer Overview
Custom (BotKit)
Drift
Genesys
Intercom
NiceInContact
NiceInContact(User Hub)
Salesforce
ServiceNow
Configure Tokyo and Lower versions
Configure Utah and Higher versions
Unblu
External NLU Adapters
Overview
Dialogflow Engine
Test and Debug
会話スキルの設計
バンキングボットを作成
バンキングボット – 資金の振り替え
バンキングボット – 残高を更新
ナレッジグラフを構築
スマートアラートの予約方法
デジタルスキルの設計
デジタルフォームの設定方法
デジタルビューの設定方法
データテーブルのデータの追加方法
データテーブルのデータの更新方法
Add Data from Digital Forms
ボットのトレーニング
示唆の使用方法
インテントとエンティティのパターンの使用方法
コンテキスト切り替えの管理方法
ボットのデプロイ
エージェント転送の設定方法
ボット関数の使用方法
コンテンツ変数の使用方法
グローバル変数の使用方法
ボットの分析
カスタムダッシュボードの作成方法
カスタムタグを使ってフィルタリング
Data
Overview
Data Table
Table Views
App Definitions
Data as Service
Build a Travel Planning Assistant
Travel Assistant Overview
Create a Travel Virtual Assistant
Design Conversation Skills
Create an ‘Update Booking’ Task
Create a Change Flight Task
Build a Knowledge Graph
Schedule a Smart Alert
Design Digital Skills
Configure Digital Forms
Configure Digital Views
Train the Assistant
Use Traits
Use Patterns
Manage Context Switching
Deploy the Assistant
Use Bot Functions
Use Content Variables
Use Global Variables
Use Web SDK
Build a Banking Assistant
Migrate External Bots
Google Dialogflow Bot
APIs & SDKs
API Reference
API Introduction
Rate Limits
API List
koreUtil Libraries
SDK Reference
SDK Introduction
Web SDK
How the Web SDK Works
SDK Security
SDK Registration
Web Socket Connect and RTM
Tutorials
Widget SDK Tutorial
Web SDK Tutorial
BotKit SDK
BotKit SDK Deployment Guide
Installing the BotKit SDK
Using the BotKit SDK
SDK Events
SDK Functions
Tutorials
BotKit - Blue Prism
BotKit - Flight Search Sample VA
BotKit - Agent Transfer
  1. ホーム
  2. Docs
  3. Virtual Assistants
  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/43/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を参照してください。

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

こちらの案内では、ワンクリックでユーザーが口座の詳細を表示できるバンキング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/43/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を参照してください。
メニュー