1. Home
  2. Kore.ai Conversational Platform
  3. SDKs & APIs
  4. 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. For this tutorial, you will use the Kore.ai Sample Bot called Travel Planning Sample that you can install as a new bot, generate authentication tokens, run a localhost JWT generation web service, and test the bot in a test client app.

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 localhost 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. Install Travel Planning Sample bot – In Bot Builder, you can add fully configured sample bots to Bot Builder. 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 which will generate the Client ID and Client Secret used for communications authentication between the Kore.ai Bots Platform and your bot hosted on your local server with the test web application.
  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, and if required, assign the bot to the users. Bots can be defined as available only to enterprise users and require both explicit Bots Admin approval as well as the assignment of the approved bot to one or more users in the enterprise domain. You can also define a bot for consumer use, which only requires Bots Admin approval. When a consumer bot is approved, all enterprise domain users, usually your enterprise customers, can access the bot.
  6. Download in 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 localhost server.
  8. Download and uncompress the Web SDK – You will need to download and then uncompress the Kore.ai Web SDK from https://github.com/Koredotcom/web-kore-sdk into the test application …/sdk folder of the SDKApp test application. 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.

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 localhost server.

To get started, you will need to install the sample bot to run in the test application, and then configure the bot to run in the Web/Mobile Client channel.

  1. Log on to Bot Builder, and then click New Bot. The Select an Option page is displayed.
  2. Click Install Sample Bot. The Select Sample Bot page is displayed.
  3. Point to Travel Planning Sample, and then click Install. 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 new client app and defining channel settings.

  1. On the bot builder menu, click Apps & Agents > Web/Mobile SDK.
  2. In the Select App drop-down list, click Create App. The Create New 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.
  5. Click Create. The Web/Mobile Client Channel page is displayed with the following JWT credentials:
    1. Bot Name
    2. Bot ID
    3. Client ID
    4. Client Secret
  6. In the Allow Alert Task Setup section, select Yes,  let the users set up alert tasks using the web client and then click Save.
  7. In the Bot Admin Approval dialog, click Ok.

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 EntAdminEllipsis 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 EntAdminEllipsis icon for theTravel Planning Sample bot that you want to assign the users to, and then click Bot & task assignments. The Bot & task assignments dialog is displayed.
    5. 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 localhost 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. In a Terminal window, run the node -v command to verify installation and version, for example, v6.10.2.
  2. To download the test application and JWT web service, click SDKApp, and then unzip.
  3. To download the Kore Web SDK, go to https://github.com/Koredotcom/web-kore-sdk, and then click Download. Extract all files to the …/SDKApp/sdk folder.
  4. In Bot Builder, on the Web/Mobile Client Channel page on the Channels tab, copy and update the following parameters in the …/SDKApp/sdk/UI folder in the index.html file, and update the paths and URLs using a text editor:
    • Update the following lines to add the path the to the UI folder to run as localhost:
      <script src=”UI/libs/jquery.js” type=”text/javascript”></script>
      <script src=”UI/libs/jquery.tmpl.min.js” type=”text/javascript”></script>
      <script src=”UI/libs/jquery-ui.min.js” type=”text/javascript”></script>
      <link href=”UI/libs/jquery-ui.min.css” rel=”stylesheet”></link>
      <script src=”UI/chatWindow.js” type=”text/javascript”></script>
      <link href=”UI/chatWindow.css” rel=”stylesheet”></link>
      “clientSecret”: “Client Secret from Bot Builder >
      $.ajax({
      url: “http://localhost:3000/api/users/sts”,
    • 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
    • botOptions.clientId   = "< Client ID from Bot Builder >";
    • botOptions.botInfo = {name:"Bot Name from Bot Builder >","_id":"Bot ID from Bot Builder >"};
  5. 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.
  6. Go to home directorycd SDKApp
  7. Install dependencies using the following command
    npm install
  8. Download and then uncompress the Kore.ai Web SDK from https://github.com/Koredotcom/web-kore-sdk into the test application …/sdk folder of the SDKApp test application. 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 SDKApp
    node startServer.js
  10. Access the application in any browser using localhost:3000

Next Steps

After you install and test the Web SDK using the test application and your localhost 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.

Was this article helpful to you? Yes 2 No 7