{"id":17996,"date":"2017-08-02T16:08:46","date_gmt":"2017-08-02T16:08:46","guid":{"rendered":"http:\/\/developer.kore.ai\/v7-1\/?post_type=docs&#038;p=11696"},"modified":"2021-03-31T07:17:44","modified_gmt":"2021-03-31T06:17:44","slug":"botkit-sdk-tutorial-agent-transfer","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v7-1\/docs\/bots\/sdks\/botkit-sdk-tutorial-agent-transfer\/","title":{"rendered":"BotKit SDK Tutorial &#8211; Agent Transfer"},"content":{"rendered":"<p>This tutorial is an end-to-end walkthrough for setting up and running an instance of the Kore.ai BotKit SDK which is a collection of libraries that you can use for more control of the messages and webhook events for Kore.ai bots for your web service. For this tutorial, you will use the sample bot called<em> Travel Planning Sample<\/em>\u00a0that you can install as a new bot, import a dialog task for agent transfer, generate authentication tokens, test the bot using <em>ngrok<\/em> as a test callback server, and access the agent transfer to a live agent using <em>LiveChat<\/em>.<\/p>\n<div class=\"alert alert-info\"><strong>Note:<\/strong> This tutorial may require a newer version of BotSDK files. If the downloaded BotKit SDK files do not contain LiveChat.js and LiveChatAPI.js files, contact Kore Support.<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Prerequisites\">Prerequisites<\/span><\/h2>\n<p>To complete this tutorial, you will have to set up and configure the following prerequisites:<\/p>\n<ul>\n<li><strong>LiveChat account<\/strong> &#8211; Subscribe to or set up a free 30-day trial. You will need the license number from the <em>LiveChat<\/em> account to configure the BotKit SDK settings for this tutorial.<\/li>\n<li><strong>Install and run ngrok<\/strong> as your test callback server.\u00a0The test callback server application,\u00a0<em>ngrok<\/em>, is used to simulate your callback server application.<\/li>\n<li><strong>Install\u00a0<em>node.js<\/em> on your computer<\/strong> &#8211; The BotKit SDK requires <em>node.js<\/em> to communicate between your server and the Kore.ai Bots Platform.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Setup_a_LiveChat_Trial_Account\">Setup a <em>LiveChat<\/em> Trial Account<\/span><\/h2>\n<p>You can use your own <em>LiveChat<\/em> subscription or set up a free 30-day trial account at <a href=\"http:\/\/LiveChatInc.com\">LiveChatInc.com<\/a>\u00a0by entering your business email in the <strong>Start using LiveChat now!<\/strong> field as shown below:<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/DIYBotKITSDKTutorialLiveChatStartPage.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11704\" src=\"\/wp-content\/uploads\/sites\/12\/DIYBotKITSDKTutorialLiveChatStartPage.png\" alt=\"\" width=\"1043\" height=\"473\" \/><\/a><br \/>\n<strong>To configure a LiveChat trial account<\/strong><\/p>\n<ol>\n<li>On the <strong>Let&#8217;s get started<\/strong> page, enter your name and create a logon password.<\/li>\n<li>On the <strong>Your website<\/strong> page, enter your company URL, for example, <em><span style=\"color: #0000ff;\">www.koremessenger.com<\/span><\/em>, click <strong>Support<\/strong>, and then click <strong>Continue<\/strong>.<\/li>\n<li>On the following\u00a0<strong>Your company<\/strong> page, enter your industry, number of employees, mobile number, audience, and then click <strong>Create Account<\/strong>.<\/li>\n<li>On bottom of the <strong>Install LiveChat<\/strong> page, click <strong>Go to the application<\/strong>.<\/li>\n<li>On the\u00a0<strong>Add agents<\/strong> page, add additional agents if needed or click <strong>skip this step<\/strong>.<\/li>\n<li>On the <strong>Customize your LiveChat<\/strong> page, customize the settings for <em>LiveChat<\/em> look and feel or click <strong>skip this step<\/strong>.<\/li>\n<li>Click <strong>Maybe Later<\/strong> on the <strong>Desktop Install<\/strong> dialog, and then click <strong>Welcome to LiveChat<\/strong> on the <strong>Let&#8217;s Start<\/strong> dialog, and then click <strong>skip the tutoria<\/strong>l. The <strong>Chats<\/strong> page is displayed where incoming chats open for the <em>LiveChat<\/em> agent.<\/li>\n<\/ol>\n<p>To get your free license <em>LiveChat<\/em> code for your BotKit SDK configuration, click the <strong>Settings<\/strong> <a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/DIYSettingsIcon-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"icon alignnone wp-image-6240 size-full\" src=\"\/wp-content\/uploads\/sites\/12\/DIYSettingsIcon-2.png\" alt=\"\" width=\"18\" height=\"18\" \/><\/a>\u00a0icon on the top navigation bar, expand the <strong>Installation<\/strong> menu on the left navigation bar, and then click <strong>Chat link<\/strong> as shown in the following illustration.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/DIYBotKITSDKTutorialLiveChatLicense-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-11783 alignnone\" src=\"\/wp-content\/uploads\/sites\/12\/DIYBotKITSDKTutorialLiveChatLicense-1.png\" alt=\"LiveChat License\" width=\"1133\" height=\"755\" \/><\/a><br \/>\nCopy the <em>LiveChat<\/em> license code from the chat link displayed, for example, <span style=\"color: #0000ff;\">89XXXX5<\/span>, and then click the <strong>CHATS<\/strong> link on the top navigation bar and leave the window open to display your chats from the BotKit SDK bot with agent transfer that you will create in this tutorial.<br \/>\n<strong>Note<\/strong>: Make sure\u00a0<strong>url-template<\/strong>\u00a0and\u00a0<strong>node-schedule<\/strong>\u00a0modules (and any other modules as referenced in js file related to LiveChat) are installed on your computer.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Installing_and_running_ngrok\">Installing and running <em>ngrok<\/em><\/span><\/h3>\n<p>To download the test callback server application, click\u00a0<a href=\"https:\/\/ngrok.com\/download\">https:\/\/ngrok.com\/download<\/a>, and then\u00a0download and install the\u00a0<em>ngrok<\/em>\u00a0file for your operating system.<br \/>\nIn a <strong>Terminal<\/strong> Window, start <em>ngrok<\/em> to monitor port <span style=\"color: #0000ff;\">8003<\/span> using the following command:<br \/>\n<code>ngrok http 8003<\/code><br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/DIYBotKitSDKNgrok.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-11701 alignnone\" src=\"\/wp-content\/uploads\/sites\/12\/DIYBotKitSDKNgrok.png\" alt=\"\" width=\"1184\" height=\"460\" \/><\/a><br \/>\nCopy the https <strong>Forwarding URL<\/strong> as shown in the previous illustration, for example,\u00a0<span style=\"color: #0000ff;\">https:\/\/1b47f1d2.ngrok.io<\/span>. Leave the terminal window open and <em>ngrok<\/em> running.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Installing_nodejs\">Installing node.js<\/span><\/h3>\n<p>The BotKit SDK requires <em>node.js<\/em> to run on the same server where the SDK is installed. Go to\u00a0<a href=\"https:\/\/nodejs.org\/en\/download\/\">https:\/\/nodejs.org\/en\/download\/<\/a>, and then select your OS as a <span style=\"color: #0000ff;\">.pkg<\/span> file type for Mac and <span style=\"color: #0000ff;\">.msi<\/span>\u00a0file type for Windows.<br \/>\nIn a <strong>Terminal<\/strong> window,\u00a0run the <code>node -v<\/code> command to verify installation\u00a0and version, for example, <code>v6.10.2<\/code>as shown in the following illustration.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/DIYBotKITSDKTutorialNodeJS.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11706\" src=\"\/wp-content\/uploads\/sites\/12\/DIYBotKITSDKTutorialNodeJS.png\" alt=\"\" width=\"436\" height=\"116\" \/><\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Installing_and_Configuring_Your_Bot\">Installing and Configuring Your Bot<\/span><\/h2>\n<p>With the prerequisites installed and running, you are ready to install the <em>Travel Planning Sample<\/em> bot and then import the <em>Agent Transfer<\/em> dialog task into that bot. In this section, you will:<\/p>\n<ol>\n<li>Install the <em>Travel Planning Sample<\/em> Bot<\/li>\n<li>Import the <em>Agent Transfer<\/em> dialog Task<\/li>\n<li>Create an App Registration<\/li>\n<li>Generate Security Credentials<\/li>\n<li>Install and Configure the BotKit SDK &#8211; config.json, LiveChat.js, and LiveChatAPI.js files<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Installing_the_Travel_Planning_Sample_Bot\">Installing the Travel Planning Sample Bot<\/span><\/h3>\n<p>Kore.ai provides ready to use sample bots that you can install into your instance of Bot Builder. For this tutorial, you will need to install the <em>Travel Planning Sample<\/em> bot.<br \/>\n<strong>To install the Travel Planning\u00a0Sample bot<\/strong><\/p>\n<ol>\n<li>Log on to Bot\u00a0Builder, and then click\u00a0<strong>New Bot &gt; Install Sample Bot<\/strong>.<\/li>\n<li>Point to\u00a0<strong>Travel Planning Sample<\/strong>, and then click\u00a0<strong>Install<\/strong>. The\u00a0<em>Travel Planning Sample_KORE NAME_Instance# installed successfully<\/em>\u00a0message is displayed and the sample bot is added to your\u00a0<strong>Bots<\/strong>\u00a0left-hand navigation menu.<\/li>\n<\/ol>\n<p>For more information, see <a href=\"\/v7-1\/docs\/bots\/bot-builder\/getting-started-bots\/installing-sample-bots\/travel-planning-sample-bot\/\">Travel Planning Sample Bot<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Importing_the_Agent_Transfer_Dialog_Task\">Importing the Agent Transfer Dialog Task<\/span><\/h3>\n<p>Part of this tutorial is to show how you can use the agent transfer component in Bot Builder to transition the bot user from a bot conversation to a live agent. In this section, you will download an exported dialog task, and then import that dialog task into your instance of the <em>Travel Planning Sample<\/em> bot.<br \/>\nDownload the agent transfer dialog task here: <a href=\"https:\/\/drive.google.com\/open?id=1ODCXeMT0x59d-DZus7rQQojZTscUJH12\">Agent Transfer\u00a0<\/a><br \/>\n<strong>To import a dialog task<\/strong><\/p>\n<ol>\n<li>In Bot Builder, select the <em>Travel Planning Sample<\/em> bot that you installed for this tutorial.<\/li>\n<li>On the Bot Tasks page, hover over the <strong>Dialog Tasks<\/strong> tab, and then click the plus sign.<\/li>\n<li>In the <strong>Intent\u00a0Name<\/strong> field, enter <em><span style=\"color: #0000ff;\">Agent Transfer<\/span><\/em>, and then click <strong>Create<\/strong>.<\/li>\n<li>On the top right corner of the task editor, click the\u00a0<strong>Ellipses\u00a0<\/strong>icon, and then click\u00a0<strong>Import<\/strong>.<\/li>\n<li>In the\u00a0<strong>Import a Dialog<\/strong>\u00a0dialog, click\u00a0<strong>Choose File, <\/strong>navigate to your downloaded <em>Agent Transfer<\/em> dialog file, and then click\u00a0<strong>Import<\/strong>.<\/li>\n<\/ol>\n<p>The\u00a0<strong>Import Successful<\/strong>\u00a0dialog and the results of the import are displayed.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Registering_Your_App_and_Generating_Client_Credentials\">Registering Your App and Generating Client Credentials<\/span><\/h3>\n<p>To register your BotKit SDK with the Kore.ai Bots platform, you will need to create an app registration, and then generate security credentials used to securely communicate between the SDK installed on your server platform and the Kore.ai Bots Platform.<br \/>\n<strong>Creating an App Registration<\/strong><\/p>\n<ol>\n<li>Hover over the side-navigation panel of the bot and click\u00a0<b>Apps &amp; Agents<\/b>.<\/li>\n<li>On the Apps &amp; Agents page, click the\u00a0<b>BotKit SDK<\/b>\u00a0tab.<\/li>\n<li>Next to the\u00a0<b>App name\u00a0<\/b>drop-down list, click <strong>Add<\/strong>.<\/li>\n<li>Enter a name for the app and then click Next.<\/li>\n<li>The Client ID and Client Secret details appear. Click\u00a0<strong>Done<\/strong>.<\/li>\n<li>In the\u00a0<strong>Callback URL<\/strong>\u00a0field, enter the URL for your application that you copied from the <strong>Forwarding URL<\/strong> from the <em>ngrok<\/em> application that you installed and ran as part of the prerequisites, for example,\u00a0\u00a0<span style=\"color: #0000ff;\">https:\/\/1bXXXXd2.ngrok.io<\/span>.\n<div class=\"alert alert-info\"><strong>Note:<\/strong> Each running instance of <em>ngrok<\/em> will generate a session unique URL. You need to update the <strong>Callback URL<\/strong> field if you stop and restart <em>ngrok<\/em>.<\/div>\n<\/li>\n<li>In the\u00a0<strong>Events<\/strong>\u00a0section, select:\n<ol>\n<li><strong>OnMessage<\/strong>\u00a0\u2013 An event is triggered when a message from a user is received.<\/li>\n<li><strong>OnAgentTransferNode<\/strong>\u00a0&#8211; An event is triggered when an Agent Transfer node is encountered in the dialog task flow.<\/li>\n<\/ol>\n<\/li>\n<li>Click\u00a0<strong>Create Credentials.\u00a0<\/strong>The\u00a0<strong>Create App<\/strong>\u00a0dialog is closed, and the new app registration along with client credentials are displayed in the\u00a0<strong>SDK Configuration<\/strong>\u00a0section.<\/li>\n<li>Click <strong>Save<\/strong>. The <em>Successfully subscribed<\/em> message is displayed.<\/li>\n<\/ol>\n<p>To configure the BotKit SDK settings, you will need to:<\/p>\n<ul>\n<li>Copy the <strong>Client ID<\/strong>, for example,\u00a0<span style=\"color: #0000ff;\">cs-6e5eb411-XXXX-XXXX-9ba2-ccc748d4f719<\/span>.<\/li>\n<li>View, and then copy the <strong>Client Secret<\/strong>, for example,\u00a0<span style=\"color: #0000ff;\">dTTmuTOgs8SOXXXXXXXXouE0EPy28fXojOJWedOEF6s=<\/span>.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Publishing_the_Bot\">Publishing the Bot<\/span><\/h2>\n<p>A developer can use any installed bot immediately for testing as bots are available to the owner on save. If you only want to run and test this bot for this tutorial, you can skip to the next section, <em>Installing and Configuring the BotKit SDK<\/em>.<br \/>\nTo enable the bot for other users, you must publish the bot so the Enterprise Admin for other users can approve and deploy the bot for users in their enterprise. For more information, see <a href=\"\/v7-1\/docs\/bots\/bot-builder-tool\/publish\/publishing-bot\/#Publishing_Tasks\">Publishing Tasks<\/a>.<br \/>\nAfter you publish a bot in Bot Builder, an Enterprise Admin for your bot must complete one of the following bot deployments in the Bots Admin Console depending if\u00a0your bot <strong>Target Audience<\/strong> is set to <strong>Enterprise Users\u00a0<\/strong>or <strong>General Public<\/strong>:<\/p>\n<ul>\n<li><strong>For Enterprise Users<\/strong>\n<ol>\n<li>In the Bots Admin Console, in the <strong>Bots Management<\/strong> module, on the <strong>Enterprise\u00a0Bots<\/strong> page,\u00a0click the <strong>Ellipses<\/strong> icon for the\u00a0<em>Agent Transfer<\/em>\u00a0bot that you want to deploy,\u00a0and then click <strong>Manage bot tasks<\/strong>. The <strong>Manage Bot Tasks<\/strong> dialog is displayed.<\/li>\n<li>Expand the Bot Tasks field to view the available and deployed tasks.<\/li>\n<li>Select all tasks of the bot and then click <strong>Confirm<\/strong>.<\/li>\n<li>In the <strong>Manage bots tasks<\/strong> dialog, click <strong>Confirm<\/strong>. The <em>Bot status changed successfully<\/em> message is displayed.<\/li>\n<li>On the <strong>Enterprise\u00a0Bots<\/strong> page,\u00a0click the <strong>Ellipses<\/strong> icon for the\u00a0<em>Agent Transfer<\/em>\u00a0bot\u00a0that you want to assign enterprise users to,\u00a0and then click <strong>Bot &amp; task assignments<\/strong>. The <strong>Bot &amp; task assignments<\/strong>\u00a0dialog is displayed.<\/li>\n<li>Assign the bot to the selected users in the enterprise.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p><strong>\u00a0&#8211; or &#8211; <\/strong><\/p>\n<ul>\n<li><strong>For General Public Users<\/strong>\n<ol>\n<li>In the Bots Admin Console, in the <strong>Bots Management<\/strong> module, on the <strong>Consumer\u00a0Bots<\/strong> page,\u00a0click the <strong>Ellipses<\/strong> icon for the\u00a0<em>Agent Transfer<\/em>\u00a0bot\u00a0that you want to deploy,\u00a0and then click <strong>Manage bot tasks<\/strong>. The <strong>Manage Bot Tasks<\/strong> dialog is displayed.<\/li>\n<li>Expand the Bot Tasks field to view the available and deployed tasks.<\/li>\n<li>Select all tasks of the bot and then click <strong>Confirm<\/strong>.\u00a0The <em>Bot status changed successfully<\/em> message is displayed.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Installing_and_Configuring_the_BotKit_SDK\">Installing and Configuring the BotKit SDK<\/span><\/h3>\n<p>You need to download and then uncompress the Kore.ai BotKit\u00a0SDK from <a href=\"https:\/\/github.com\/Koredotcom\/BotKit\">https:\/\/github.com\/Koredotcom\/BotKit<\/a>. Be sure to download the latest version that contains the <a href=\"https:\/\/github.com\/Koredotcom\/BotKit\/blob\/master\/LiveChat.js\"><span style=\"color: #0000ff;\">LiveChat.js<\/span> <\/a>files.<\/p>\n<div class=\"alert alert-info\"><strong>Note:<\/strong> This tutorial may require a newer version of BotSDK files. If the downloaded BotKit SDK files do not contain <a href=\"https:\/\/github.com\/Koredotcom\/BotKit\/blob\/master\/LiveChat.js\">LiveChat.js<\/a> and <a href=\"https:\/\/github.com\/Koredotcom\/BotKit\/blob\/master\/LiveChatAPI.js\">LiveChatAPI.js<\/a> files, contact Kore Support.<\/div>\n<div><\/div>\n<p><strong>config.json<\/strong><\/p>\n<p>In your BotKit SDK folder, you will need to edit the <span style=\"color: #0000ff;\">config.json<\/span> file that contains the connection information to your callback server. For this tutorial, you are using <em>ngrok<\/em>, along with the security credentials generated when you created the app registration for the <em>Travel Planning Sample<\/em> bot, and adding a new line to <span style=\"color: #0000ff;\">config.json<\/span> file that contains the license key for your <em>LiveChat<\/em> agent application.<br \/>\nModify the default <span style=\"color: #0000ff;\">config.json<\/span> file for the following parameters as follows:<\/p>\n<ul>\n<li><code>url<\/code> &#8211; Add this parameter with the <strong>Forwarding URL<\/strong> from <em>ngrok<\/em><\/li>\n<li><code>apikey<\/code> &#8211; Update parameter using <strong>Client Secret<\/strong><\/li>\n<li><code>appId<\/code> &#8211; Update parameter using <strong>Client ID<\/strong><\/li>\n<li><code>liveagentlicense<\/code> &#8211; Add this parameter with license key from LiveChat <strong>Chat URL<\/strong>\u00a0as shown in the following example.<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">{\r\n    \"server\": {\r\n        \"port\": 8003\r\n    },\r\n    \"app\": {\r\n        \"apiPrefix\" : \"\",\r\n        \"url\": \"&lt; ngrok Forwarding URL &gt;\"\r\n    },\r\n    \"credentials\": {\r\n        \"apikey\": \"&lt; Client Secret from Bot Builder &gt;\",\r\n        \"appId\": \"&lt; Client ID from Bot Builder &gt;\"\r\n    },\r\n    \"redis\": {\r\n        \"options\": {\r\n            \"host\": \"localhost\",\r\n            \"port\": 6379\r\n        },\r\n        \"available\": false\r\n    },\r\n    \"examples\" : {\r\n        \"mockServicesHost\"  : \"http:\/\/localhost:8004\"\r\n    },\r\n     \"liveagentlicense\": \"&lt; LiveChat License Key &gt;\"\r\n}<\/pre>\n<p>The following code is an example of a fully defined sample <span style=\"color: #0000ff;\">config.json<\/span> file:<\/p>\n<pre class=\"lang:default decode:true\">{\r\n    \"server\": {\r\n        \"port\": 8003\r\n    },\r\n    \"app\": {\r\n        \"apiPrefix\" : \"\",\r\n        \"url\": \"https:\/\/1b47f1d2.ngrok.io\"\r\n    },\r\n    \"credentials\": {\r\n        \"apikey\": \"dTTmuTOgs8SOCwXXXXXXXXE0EPy28fXojOJWedOEF6s=\",\r\n        \"appId\": \"cs-6e5eb411-XXXX-XXXX-9ba2-ccc748d4f719\"\r\n    },\r\n    \"redis\": {\r\n        \"options\": {\r\n            \"host\": \"localhost\",\r\n            \"port\": 6379\r\n        },\r\n        \"available\": false\r\n    },\r\n    \"examples\" : {\r\n        \"mockServicesHost\"  : \"http:\/\/localhost:8004\"\r\n    },\r\n     \"liveagentlicense\": \"89XXX15\"\r\n}<\/pre>\n<h4>LiveChat.js and LiveChatAPI.js<\/h4>\n<p>The<a href=\"https:\/\/github.com\/Koredotcom\/BotKit\/blob\/master\/LiveChat.js\"> <span style=\"color: #0000ff;\">LiveChat.js<\/span><\/a> and <a href=\"https:\/\/github.com\/Koredotcom\/BotKit\/blob\/master\/LiveChatAPI.js\"><span style=\"color: #0000ff;\">LiveChatAPI.js<\/span><\/a> files in the BotKit SDK contain the JavaScript that controls the seamless transfer from the dialog task in the bot to an agent application. For this tutorial, you will configure the dialog transfer using <em>LiveChat<\/em> with the following information:<br \/>\nIn Bot Builder, select the <em>Travel Planning Sample<\/em> bot, and then on the <strong>Settings<\/strong> tab, click the <strong>Expand<\/strong>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"icon alignnone wp-image-8615 size-full\" src=\"\/wp-content\/uploads\/sites\/12\/RightArrowIcon.png\" width=\"9\" height=\"13\" \/> icon for the <strong>General Settings<\/strong>\u00a0section. The <strong>General Settings\u00a0<\/strong>section is displayed. Copy the:<\/p>\n<ul>\n<li><strong>Bot Name<\/strong> &#8211; The name of the bot on the Bots Platform, for example,\u00a0<em><span style=\"color: #0000ff;\">Travel Planning Sample_KORE ADMIN_10<\/span><\/em>.<\/li>\n<li><strong>Bot ID<\/strong> &#8211; The Bots Platform system unique ID for the Bot, for example,\u00a0<em><span style=\"color: #0000ff;\">st-26cfae3a-XXXX-XXXX-991a-376b7fe579d5<\/span><\/em>.<\/li>\n<\/ul>\n<p>In both the <span style=\"color: #0000ff;\">LiveChat.js<\/span> and <span style=\"color: #0000ff;\">LiveChatAPI.js<\/span>, update and save the following case-sensitive variables with the settings from your bot instance:<br \/>\n<code>var botId = \"&lt; <strong><em>Bot ID<\/em><\/strong> &gt;\";<br \/>\nvar botName = \"&lt; <em><strong>Bot Name<\/strong>\u00a0&gt;<\/em>\";<\/code><br \/>\nFor example:<br \/>\n<code>var botId = \"<span style=\"color: #0000ff;\"><em>st-26cfae3a-XXXX-XXXX-991a-376b7fe579d5<\/em><\/span>\";<br \/>\nvar botName = \"<span style=\"color: #0000ff;\"><em>Travel Planning Sample_KORE ADMIN_10<\/em><\/span>\";<\/code><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Starting_the_BotKit_SDK_Application\">Starting the BotKit SDK Application<\/span><\/h2>\n<p>To start using the <em>Travel Planning Sample<\/em> bot with Agent Transfer using the BotKit SDK, <em>node.js<\/em> must be installed and <em>ngrok<\/em> running listening on port <span style=\"color: #0000ff;\">8003<\/span>.<br \/>\n<strong>To start BotKit SDK<\/strong><br \/>\nIn a <strong>Terminal<\/strong> window, navigate to your BotKit SDK folder, and then enter the following command:<br \/>\n<code>     node app.js<\/code><br \/>\nWhen node.js is running, you should get the following response:<br \/>\n<code>app listening at http:\/\/:::8003<\/code><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Testing_the_BotKit_SDK_Bot\">Testing the BotKit SDK Bot<\/span><\/h2>\n<p>To test your bot, you need the following:<\/p>\n<ul>\n<li><em>ngrok<\/em> running &#8211; Command =\u00a0<code>ngrok http 8003<\/code><\/li>\n<li><em>node.js<\/em> running &#8211; Command =\u00a0<code>node app.js<\/code><\/li>\n<li><em>LiveChat<\/em> &#8211; Logged in and web <strong>Chat<\/strong> page open<\/li>\n<li>Bot Builder &#8211; Start <em>Talk to the Bot<\/em> by clicking the following icon on the bottom right corner of any Bot Builder page:<a class=\"\" ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/talk-to-bot-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-15255\" src=\"\/wp-content\/uploads\/sites\/12\/talk-to-bot-2.png\" alt=\"\" width=\"56\" height=\"68\" \/><\/a><\/li>\n<\/ul>\n<p>After the Agent Transfer dialog is started, messages are exchanged between <em>LiveChat<\/em> and the BotKit SDK.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Next_Steps\"><em>Next Steps<\/em><\/span><\/h3>\n<p>To use the Kore.ai bot in your application, you would need to configure the BotKit SDK and register you application with <strong>CallBack URL<\/strong> to point to your company application server instead of <em>ngrok<\/em>. And of course, to share the bot with other users, the Enterprise Admin for your company would need to approve the bot, and deploy the bot to those users after you publish the bot.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial is an end-to-end walkthrough for setting up and running an instance of the Kore.ai BotKit SDK which is a collection of libraries that you can use for more control of the messages and webhook events for Kore.ai bots for your web service. For this tutorial, you will use the sample bot called Travel&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":["post-17996","post","type-post","status-publish","format-standard","hentry","category-sdks"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/posts\/17996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/comments?post=17996"}],"version-history":[{"count":3,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/posts\/17996\/revisions"}],"predecessor-version":[{"id":21354,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/posts\/17996\/revisions\/21354"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/media?parent=17996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/categories?post=17996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/tags?post=17996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}