Integrating Bot with WebApp developed in Angular

(Ankit Saini) #1

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?

Facing issue while integrating bot with web/mobile client channel
(Yoga Ramya Mendu) #2

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


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:


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:





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.

    function assertion(options, callback) {
    var jsonData = {
    “clientId”: botOptions.clientId,
    “clientSecret”: botOptions.clientSecret,
    “identity”: botOptions.userIdentity,
    “aud”: “”,
    “isAnonymous”: false
    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) {
    }, 2000);
    error: function (err) {

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

    botOptions.logLevel = ‘debug’;
    botOptions.koreAPIUrl = “”;
    botOptions.koreSpeechAPIUrl = “”;
    //botOptions.bearer = “bearer xyz-------------------”;
    botOptions.ttsSocketUrl = ‘wss://’;
    botOptions.recorderWorkerPath = ‘…/libs/recorderWorker.js’;
    botOptions.assertionFn = assertion;
    botOptions.koreAnonymousFn = koreAnonymousFn;

    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”;

    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();;


This would invoke the chat window on a button click.

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.

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

Yoga Ramya.