Integrating Bot with WebApp developed in Angular

[ankitsaini345]

I have developed an application and need to integrate the bot with the same.

How can I open the chat bot with a button in my index file?

[yogaramya.mendu]

Hi @ankitsaini345,

Please follow the below steps to integrate the chatbot into an angular application.

1- Download and Copy web-kore-sdk-master folder into your project>> src folder.
You will get the web-kore-sdk-master from https://developer.kore.ai/docs/bots/kore-web-sdk/

2- Include the dependent CSS style files in the “styles” attribute of the angular.json or .angular-cli.json file in your project as follows:

“src/web-kore-sdk-master/UI/libs/jquery-ui.min.css”,
“src/web-kore-sdk-master/UI/chatWindow.css”,
“src/web-kore-sdk-master/libs/purejscarousel.css”

3- Similarly, Include the dependent script files in the “scripts” attribute of the angular.json or .angular-cli.json file in your project as follows:

“src/web-kore-sdk-master/UI/libs/jquery.js”,
“src/web-kore-sdk-master/libs/lodash.min.js”,
“src/web-kore-sdk-master/UI/libs/jquery-ui.min.js”,
“src/web-kore-sdk-master/UI/libs/jquery.tmpl.min.js”,
“src/web-kore-sdk-master/UI/libs/moment.js”,
“src/web-kore-sdk-master/libs/anonymousassertion.js”,
“src/web-kore-sdk-master/kore-bot-sdk-client.js”,
“src/web-kore-sdk-master/UI/chatWindow.js”,

“src/web-kore-sdk-master/libs/emoji.js”,
“src/web-kore-sdk-master/libs/recorder.js”,
“src/web-kore-sdk-master/libs/recorderWorker.js”,
“src/web-kore-sdk-master/libs/purejscarousel.js”,
“src/web-kore-sdk-master/UI/custom/customTemplate.js”,

“src/web-kore-sdk-master/libs/speech/app.js”,
“src/web-kore-sdk-master/libs/speech/key.js”,
“src/web-kore-sdk-master/libs/client_api.js”

4- Declare koreBotChat and jquery in your component file

declare const koreBotChat: any;
declare const $: any;

5- Add the following code in any function where you want to invokes kore SDK.
For example, in this case, we would like to invoke the chat window on a button click. Then,

• In the button tag in the HTML file, configure the click event, say (click)= ‘myChatFun()’

• Then declare myChatFun() in the component file placing the below code in it.

  //***CODE_START
  function assertion(options, callback) {
  var jsonData = {
  “clientId”: botOptions.clientId,
  “clientSecret”: botOptions.clientSecret,
  “identity”: botOptions.userIdentity,
  “aud”: “”,
  “isAnonymous”: false
  };
  $.ajax({
  url: botOptions.JWTUrl,
  type: ‘post’,
  data: jsonData,
  dataType: ‘json’,
  success: function (data) {
  options.assertion = data.jwt;
  options.handleError = koreBot.showError;
  options.chatHistory = koreBot.chatHistory;
  options.botDetails = koreBot.botDetails;
  callback(null, options);
  setTimeout(function () {
  if (koreBot && koreBot.initToken) {
  koreBot.initToken(options);
  }
  }, 2000);
  },
  error: function (err) {
  koreBot.showError(err.responseText);
  }
  });
  }

  let botOptions: any = {};
  let koreBot: any = {};

  botOptions.logLevel = ‘debug’;
  botOptions.koreAPIUrl = “https://bots.kore.ai/api/”;
  botOptions.koreSpeechAPIUrl = “https://speech.kore.ai/”;
  //botOptions.bearer = “bearer xyz-------------------”;
  botOptions.ttsSocketUrl = ‘wss://speech.kore.ai/tts/ws’;
  botOptions.recorderWorkerPath = ‘…/libs/recorderWorker.js’;
  botOptions.assertionFn = assertion;
  botOptions.koreAnonymousFn = koreAnonymousFn;

  botOptions.JWTUrl =“PLEASE_ENTER_JWTURL_HERE”;
  botOptions.userIdentity = ‘PLEASE_ENTER_USER_EMAIL_ID’;// Provide users email id here
  botOptions.botInfo = {name:“PLEASE_ENTER_BOT_NAME”,"_id":“PLEASE_ENTER_BOT_ID”}; // bot name is case sensitive
  botOptions.clientId = “PLEASE_ENTER_CLIENT_ID”;
  botOptions.clientSecret=“PLEASE_ENTER_CLIENT_SECRET”;

  var chatConfig = {
  botOptions: botOptions,
  allowIframe: false,
  isSendButton: false,
  isTTSEnabled: true,
  isSpeechEnabled: true,
  allowGoogleSpeech: true,
  allowLocation: true,
  loadHistory: true,
  messageHistoryLimit: 10,
  autoEnableSpeechAndTTS: false,
  graphLib: “d3”
  };

  koreBot = koreBotChat();
  koreBot.show(chatConfig);
  //***CODE_END

This would invoke the chat window on a button click.

Note:
1- Please note that this approach is for applications using Angular 2+ versions.
2- In the above code, provide the bot details(You will get these details by enabling Web/mobile client channel) and JWT URL appropriately.
Refer https://developer.kore.ai/docs/bots/bot-builder/adding-channels-to-your-bot/adding-the-webmobile-client-channel/

Let us know if you need any further clarification on the approach.

Regards,
Yoga Ramya.

[tanzeem.bhatti]

Hi @yogaramya.mendu,
I got error: ERROR TypeError: koreBot.show is not a function

Thanks,
Tanzeem

[yogaramya.mendu]

Hi @tanzeem.bhatti,

Please send us the screenshots of the implementation so that we can check this further.
Also, kindly re-check each implemented step as per the above post as the same implementation is working as expected at our end.

Regards,
Yoga Ramya.

[thesheikhwasim]

Hi @yogaramya.mendu

The chatbot window runs fine after integration with angular as provided above. But don’t you think implementation of JS ajax function inside typescript is not fare.
Because of that “ajax code” developers have lost control to call API from service and writing code in .ts file.

Also not able to use .html template of standard angular, and forced to use your customtemplate.html file.

I don’t think this is correct way of implementation in angular. You must have created module for thisa, so that user must have flexibility of calling service, angular templating and creating typescript functions.

@tanzeem.bhatti & @ankitsaini345 where you are upto implementation or you left.