{"id":17989,"date":"2017-04-14T14:09:38","date_gmt":"2017-04-14T14:09:38","guid":{"rendered":"http:\/\/developer.kore.ai\/v7-3\/?post_type=docs&p=11246"},"modified":"2020-07-23T13:15:08","modified_gmt":"2020-07-23T12:15:08","slug":"kore-ai-web-sdk-tutorial","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v7-3\/docs\/bots\/sdks\/kore-ai-web-sdk-tutorial\/","title":{"rendered":"Kore.ai Web SDK Tutorial"},"content":{"rendered":"
\r\n\t
\r\n\t\t
\r\n\t\t\t

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.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n

<\/div><\/div>\r\n\t
\r\n\t\t
\r\n\t\t\t

Web SDK Tutorial Overview<\/span><\/h2>\n

In this tutorial, you will install a Kore.ai sample bot, a test\u00a0application to host the bot, and then a JSON Web Token (JWT) generation web service using your localhost server to communicate between\u00a0the bot on your local server and the Kore.ai Bots Platform.
\nThe following list describes the general steps you will take to install and configure the Web SDK.<\/p>\n

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

    Now let us see detailed step by step implementation.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n

    <\/div><\/div>\r\n\t
    \r\n\t\t
    \r\n\t\t\t

    Installing and Running the Kore.ai Web SDK<\/span><\/h2>\n

    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.
    \nTo 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<\/a> for detailed steps)<\/em><\/p>\n

      \n
    1. Log on to Bot\u00a0Builder, and click the\u00a0down-arrow<\/strong>\u00a0next to the\u00a0\u00a0+New Bot<\/strong>\u00a0and select\u00a0Install Sample Bots.<\/strong><\/li>\n
    2. Hover over\u00a0Travel Planning Sample<\/strong>, and then click Install<\/strong>.<\/li>\n
    3. The Travel Planning Sample installed successfully<\/em> message is displayed and the sample bot is added to your Bots<\/strong> left-hand navigation menu.<\/li>\n<\/ol>\n

      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<\/a> for a detailed explanation of the steps.<\/em><\/p>\n

        \n
      1. On the bot builder menu, click App Extensions > Web\/Mobile SDK<\/strong>.<\/li>\n
      2. In the Select App<\/strong> drop-down list, click Create App<\/strong>.\u00a0The Create Client App<\/strong> dialog is displayed.<\/li>\n
      3. In the Name<\/strong> field,\u00a0enter a name for your app, for example, My SDK Client App<\/span>.<\/li>\n
      4. In the JWT Signing Algorithms<\/strong> section, select HS256<\/strong>\u00a0to generate the authentication tokens.<\/li>\n
      5. Click Next -> Done<\/strong>.<\/li>\n
      6. The Web\/Mobile Client Channel<\/strong> 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:\n