Kore.ai Web SDK Tutorial

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.

4. On the bot builder top menu, select the Deploy tab
5. From the left menu, click Integrations > Web/Mobile SDK.
6. In the Select App drop-down list, click Create App. The Create Client App dialog is displayed.
7. In the Name field, enter a name for your app, for example, My SDK Client App.
8. In the JWT Signing Algorithms section, select HS256 to generate the authentication tokens.
9. Click Next -> Done.
10. 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
11. 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.

12. On the Deploy tab, click Bot Management -> Publish.
13. On Publish page, select all tasks, and then click Proceed.
14. Enter a comment and Confirm publish.

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

16. 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  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.

17. 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.
18. In a Terminal window, run the node -v command to verify installation and version, for example, v6.10.2.
19. 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.
20. 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.
21. From the Bot Builder Web/Mobile Client Channel page on the Deploy -> Channels menu, copy the following (as mentioned in step 8 above):
    • clientSecret
    • clientId
    • Bot Name
22. 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 the 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
23. 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.
24. Go to home directorycd SDKApp
25. Install dependencies using the following command
    npm install
    
26. Start SDKApp
    node startServer.js
27. Access the application in any browser using localhost:3000