チャット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. SDKs
  5. Kore.ai Web SDK Tutorial

Kore.ai Web SDK Tutorial

This tutorial is an end-to-end walkthrough for setting up and running an instance of the Kore.ai Bots Web SDK which is a collection of libraries that you can use to integrate Kore.ai bots with your own web applications.

Web SDK Tutorial Overview

In this tutorial, you will install a Kore.ai sample bot, a test application to host the bot, and then a JSON Web Token (JWT) generation web service using your local host server to communicate between the bot on your local server and the Kore.ai Bots Platform.
The following list describes the general steps you will take to install and configure the Web SDK.

  1. Build the Bot to be integrated – For this tutorial, you will install the Travel Planning Sample bot that uses open APIs to get flight and location information, along with weather reports.
  2. Configure Web/Mobile Client channel – To use the Travel Planning Sample bot with the Web SDK, you must configure the bot for the Web/Mobile Client channel.
  3. Create a new Client App – When you configure the Web/Mobile Client channel for the Travel Planning Sample bot, you must create a client app and select the JWT signing algorithm used to generate the authentication tokens.
  4. Publish the bot – After you have configured the Travel Planning Sample bot, you must publish the bot which sends the bot to the Bots Admin for approval.
  5. Approve and Deploy the bot – In the Bots Admin Console, the published bot and tasks must be approved to deploy.
  6. Download and install Node.js – You will need to install Node.js used to host the JWT token generation web service for the Web SDK to communicate between the bot in the test application and the Kore.ai Bots Platform.
  7. Download and uncompress the test application –  The test application, SDKApp is used to simulate your application that will host the Kore.ai bot as a channel on a web page using your computer local host server.
  8. Download and uncompress the Kore.ai Web SDK – The Web SDK contains the libraries used to communicate and run the bot in the test application using the Web/Mobile Client channel. You will need to configure settings in the index.html file for your computer.
  9. Start your application and view the bot in a web browser – In a Terminal window, you will start the JWT service, and then view the bot in a web browser.

Now let us see detailed step by step implementation.

Installing and Running the Kore.ai Web SDK

This section provides detailed steps on how to run a Kore.ai sample bot using the Web SDK and a test application running on your computer local host server.
To get started, you will need to build a bot to run in the test application, and then configure the bot to run in the Web/Mobile Client channel. For this tutorial, we will be installing a sample bot (see here for detailed steps)

  1. Log on to Bot Builder, and click the down-arrow next to the  +New Bot and select Install Sample Bots.
  2. Hover over Travel Planning Sample, and then click Install.
  3. The Travel Planning Sample installed successfully message is displayed and the sample bot is added to your Bots left-hand navigation menu.

In this next section, you will define the Web/Mobile Client channel for the Travel Planning Sample bot by creating a new client app and defining channel settings. See here for a detailed explanation of the steps.

  1. On the bot builder menu, click App Extensions > Web/Mobile SDK.
  2. In the Select App drop-down list, click Create App. The Create Client App dialog is displayed.
  3. In the Name field, enter a name for your app, for example, My SDK Client App.
  4. In the JWT Signing Algorithms section, select HS256 to generate the authentication tokens.
  5. Click Next -> Done.
  6. The Web/Mobile Client Channel page is displayed with the following JWT credentials, make a note of all these details. We will be using them later in the Web SDK setup:
    • Bot Name
    • Bot ID
    • Client ID
    • Client Secret
  7. Click Save.

Now that the bot is created and defined for the Web/Mobile Client channel, you are ready to publish and deploy your bot.

Note: By default, the Travel Sample Planning bot is configured with Target Audience set to Enterprise Users on the Settings tab in the General Settings. Optionally, you can define this bot for General Public use. Once this bot is published, the Target Audience cannot be changed.
  1. On the Publish tab, click Publish Now.
  2. On Define Deployment tab, select all tasks, and then click Next.
  3. On the Review & Confirm tab, click Confirm, and then in the Deploy Standard Bot dialog, click Yes.
  4. In the Deployment Status dialog, click Close.

After an enterprise developer publishes a bot, it must be approved and assigned to the users for use.

  1. Complete one of the following bot deployments in the Bots Admin Console depending if your bot Target Audience is set to Enterprise Users or General Public. Complete one of the following:
    1. In the Bots Admin Console, in the Bots Management module, on the Enterprise Bots page, click the Ellipses  icon for the Travel Planning Sample bot that you want to deploy, and then click Manage bot tasks. The Manage Bot Tasks dialog is displayed.
    2. In the Bot tasks field, click the Expand BotsAdminExpandRight icon to display the available and deployed tasks, select all tasks for this bot, and then click Confirm.
    3. In the Manage bots tasks dialog, click Confirm. The Bot status changed successfully message is displayed.
    4. On the Enterprise Bots page, click the Ellipses icon for theTravel Planning Sample bot that you want to assign the users to, and then click Bot & task assignments.
    5. The Bot & task assignments dialog is displayed. Assign the bot to your users, for all tasks, including yourself.

Now it is time to download, uncompress, install and configure the software packages required for the Web SDK and a test application to run the bot locally on your local host server.

  1. To download and install node.js on your computer, go to https://nodejs.org/en/download/, and then select your OS as .pkg for Mac, and .msi for Windows.
  2. In a Terminal window, run the node -v command to verify installation and version, for example, v6.10.2.
  3. Locate the SDKApp/sdk folder of your web server hosting the app where you want to integrate the Kore bot. For this tutorial, to download the test application and JWT web service, click SDKApp, and unzip it.
  4. To download the Kore.ai Web SDK, go to https://github.com/Koredotcom/web-kore-sdk, and then click Download. Extract all files to the …/SDKApp/sdk folder mentioned in step above. Check for the release compatibility from the release notes.
  5. From the Bot Builder Web/Mobile Client Channel page on the Channels menu, copy the following (as mentioned in step 8 above):
    • clientSecret
    • clientId
    • Bot Name
  6. For ver7.2 of the platform, the Web SDK repo structure has undergone a major change. The steps would vary based on which repo you are using.
    • Follow this step for latest Web SDK file downloaded after ver7.2 of the platform i.e. after Feb 2020.
      1. Open the index.html file from the …/SDKApp/sdk/UI folder using a text editor. Update the following lines to add the path to the UI folder:
        <script src="libs/jquery.js" type="text/javascript"></script>
        <script src="libs/jquery.tmpl.min.js" type="text/javascript"></script>
        <script src="libs/jquery-ui.min.js" type="text/javascript"></script>
        <link href="libs/jquery-ui.min.css" rel="stylesheet"></link>
        <script src="chatWindow.js" type="text/javascript"></script>
        <link href="chatWindow.css" rel="stylesheet"></link>
      2. Open the kore-config.js and update the botOptions parameters botInfo, clientId and clientSecret, and your email id as userIdentity.
        “clientSecret”: “{client secret}”
        $.ajax({
           url: “http://localhost:3000/api/users/getJWT”,
             //this is sample url of a localhost. 
             //This should include the url where you are hosting the bot.
           botOptions.userIdentity = ‘ ‘;
             // Provide users email id here
           botOptions.clientId= "{client id} ";
             // secure client-id
           _botOptions.botInfo= {name:"{bot name}","id":"{bot id"};
             // Kore bot name is case sensitive
         })

        The JWTUrl refers to the location where your app (where you want the Kore.ai Bot to be integrated) is hosted. For this tutorial, we are using the JWT server (as setup in step 19) and hence using the same here.

      3. Ensure that in kore-config.js you set the audience for your bot. Choose one of the following:
        • "isAnonymous": < false >; if bot is deployed for the enterprise users, and then set botOptions.userIdentity = '< Your email ID >';
                 – or –
        • "isAnonymous": < true >; if bot is deployed for Consumer Use
    • This step is valid for older Web SDK file downloaded before ver7.2 of the platform i.e. before Feb 2020
      • Open the index.html file from the …/SDKApp/sdk/UI folder using a text editor:
        1. Update the following lines to add the path to the UI folder:
          <script src="libs/jquery.js" type="text/javascript"></script>
          <script src="libs/jquery.tmpl.min.js" type="text/javascript"></script>
          <script src="libs/jquery-ui.min.js" type="text/javascript"></script>
          <link href="libs/jquery-ui.min.css" rel="stylesheet"></link>
          <script src="chatWindow.js" type="text/javascript"></script>
          <link href="chatWindow.css" rel="stylesheet"></link>
        2. Update the following parameters to run as local host
          “clientSecret”: “{client secret}”
          $.ajax({
            url: “http://localhost:3000/api/users/getJWT”,
               //this is sample url of a local host. 
               //This should include the url where you are hosting the bot.
            botOptions.userIdentity = ‘ ‘;
               // Provide users email id here
            botOptions.clientId= "{client id} ";
               // secure client-id
            _botOptions.botInfo= {name:"{bot name}","id":"{bot id"};
               // Kore bot name is case sensitive
           })

          Note: The URL mentioned in the above code snippet, refers to the location where your app (where you want the Kore.ai Bot to be integrated) is hosted. For this tutorial, we are using the JWT server (as setup i step 18) and hence using the same here.

        3. Choose one of the following:
          • "isAnonymous": < false >; if bot is deployed for the enterprise users, and then set botOptions.userIdentity = '< Your email ID >';
                   – or –
          • "isAnonymous": < true >; if bot is deployed for Consumer Use
  7. Save your changes.
    You are ready to start the JWT token generation service and access the test application with the configured Web SDK in your local web browser.
  8. Go to home directorycd SDKApp
  9. Install dependencies using the following command
    npm install
  10. Start SDKApp
    node startServer.js
  11. Access the application in any browser using localhost:3000

Passing data via webSDK

You can pass additional information of the user accessing the channel by adding the custom data at botInfo inside the index.html file.

botOptions.botInfo = {name: "Banking Bot", 
                              "_id": "<bot_id>", 
                              customData: "value"
              };

Details like phone number, address, or location, etc., are examples of data that can be passed inside the customData.

customData can be accessed from lastMessage under the BotUserSession of the context object. This data will be specific to the user using webSDK and will last for the user session.

Multiple values can also be added to the customData in the index.html file as key-value pairs:

botOptions.botInfo = {name:"<bot_name>",
                      "_id":"<bot_id",
                      customData:{"name":"John",
                                  "age":30,
                                   "cars": {"car1":"Ford",
                                            "car2":"BMW",
                                            "car3":"Fiat"
                                             }
                                   }
                           };

Custom Meta Tags via webSDK

With the release of ver8.0 of the platform, you can directly add Custom Meta Tags from all supported internal channels (Web SDK/IVR / IVRVoice / Webhook channels). You can define Session, User, and Message level meta-tags. These tags will be added to the Conversation Session as soon as it is created.

botOptions.botInfo = {name:"<bot_name>", "_id":"<bot_id",
                           customData :{"name":"John"},
                           "metaTags": { 
                                 "messageLevelTags": [{ "name": "tag1", value: "message"}],
                                 "sessionLevelTags": [{ "name": "tag2", value: "session"}],
                                 "userLevelTags": [{ "name": "tag3", value: "user"}]
                                 }  
                          };

Some commonly encountered errors

  • A wrong URL is given in index.html, users see a 404 error. Double check the URL. URL changes depending on whether you are hosting the bot on your own web SDK or on Kore’s web SDK. If its Kore web SDK, then the URL is http://demo.kore.net:3000/users/sts 7.
    If you are hosting on your in-house web SDK, then provide the respective URL.
  • missing/Invalid jwt.sub(): This error occurs for enterprise Bots, when the user’s email id is not given in the index.html file. Provide users identity as shown below in index.html
    botOptions.userIdentity = ‘x@gmail.com’;// Provide users email id here.
  • Not found: User sees this error when either wrong clientID or no clientID is given. Check the correct ClientID from Bot – API Extensions option
    botOptions.clientId = “{clientID}”; // secure client-id
  • error verifying the jwt: the Wrong clientSecret is given in index.html: Check the correct clientSecret you get from Bot – API Extensions option
    “clientSecret”: "{clientSecret}” //provide clientSecret here

After you install and test the Web SDK using the test application and your local host server, you can use the same concept to install and configure the Web SDK in your own enterprise application. You will just need to reconfigure the file paths and URLs in the index.html file of the Web SDK to point to your website and servers, and configure a Kore.ai bot for the Web/Mobile Client channel with JWT credentials for your enterprise.

メニュー