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?
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.
1 Like
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.
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.
suppose i want to embed this bot on salesforce visualforce page. i have added the related files and link to show the webchat(it is showing on page but connection is not happening and giving CORS issue). now what i should write in Kore-config.js file in “botOptions.JWTUrl “:”???”. please help me out ASAP.
2 Likes
I followed the process mentioned above but I am getting these errors:
chatBot() {
function assertion(options: { assertion: any; }, callback: (arg0: null, arg1: any) => void) {
//client has to fill the claims and call the 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: { jwt: any; }) {
options.assertion = data.jwt;
callback(null, options);
},
error: function (err: any) {
console.error("Error in JWT get: " + JSON.stringify(err))
}
});
}
let botOptions: any = {};
let koreBot: any = {};
botOptions.koreAPIUrl = "https://bots.kore.ai/api/";
botOptions.koreSpeechAPIUrl = ""; // This option is deprecated
botOptions.ttsSocketUrl = ''; // This option is deprecated
botOptions.assertionFn = assertion;
botOptions.koreAnonymousFn = koreAnonymousFn;
botOptions.botInfo = { "name": "RM FA Wealth advisory bot", "_id": "st-4b6b6d76-e8af-5151-be8e-5219939f3f27" }; //Capture Bot Name & Bot ID from Builder Tool app. Go to respective Bot and then navigate to Settings-->Config Settings-->General settings section. Bot Name is case sensitive.
botOptions.JWTUrl = "http://localhost:3000/api/users/sts";//above assertion function picks url from here
botOptions.userIdentity = 'my user name';// Provide users email id here
botOptions.clientId = "client id"; // issued by the kore.ai on client app registration.
botOptions.clientSecret = "client secret";// issued by the kore.ai on client app registration
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);
}
Is the JWT URL correct?
Also I had to make following changes to my tsconfig file to get rid of “koreAnonymousFn not found problem”:
{
"compilerOptions": {...
"allowJs": true, ...}
}
I also changed the my apps serving port from localhost:4200 to localhost:3000
Please let me know what am I doing wrong, I need to integrate it ASAP
Hello @rahul1.sinha ,
Please confirm if you are using GitHub - Koredotcom/web-kore-sdk: web client sdk code SDK client.
Yes I am using web-kore-sdk.
Also, I deleted the following import from angular.json:
“src/web-kore-sdk-master/libs/speech/key.js”
since there is no file named key.js in the specific path of the sdk