{"id":22466,"date":"2019-09-09T12:40:16","date_gmt":"2019-09-09T11:40:16","guid":{"rendered":"https:\/\/developer.kore.ai\/v7-1\/?p=22466"},"modified":"2019-09-24T05:57:22","modified_gmt":"2019-09-24T04:57:22","slug":"how-to-configure-agent-transfer","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v7-1\/docs\/bots\/how-tos\/how-to-configure-agent-transfer\/","title":{"rendered":"How To Configure Agent Transfer"},"content":{"rendered":"<section class=\"l-section wpb_row height_auto\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row type_default valign_top\"><div class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<p>One of the frequently asked questions is how to transfer a chat to a human agent from the Bot. This is especially necessary if your bot is in the space of customer service. Chatbots are not meant to completely replace humans. Many times chatbot will fail to answer satisfactorily or user would just want to talk\/chat to a human from the beginning. When this happens the chatbot should transfer the chats to a human agent or a customer care representative. But how to achieve that?<br \/>\na<br \/>\nIn this article, we will give an overview of how we can integrate a live chat into our bot using <strong>Kore.ai Agent Transfer<\/strong>. The source code for the Agent Transfer is available at Kore.ai github repo: <a href=\"https:\/\/github.com\/Koredotcom\/BotKit\">https:\/\/github.com\/Koredotcom\/BotKit<\/a><\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"Overview\">Overview<\/span><\/h2>\n<p>Our Bot would be the central piece to the entire solution. Apart from performing all its normal functionality, our bot would also act as a proxy between user and agent.<\/p>\n<ul>\n<li><strong>Bot<\/strong>: Chat Bot that the Users interact.<\/li>\n<li><strong>Users<\/strong>: Users are the customers who would be using this Bot.<\/li>\n<li><strong>Agent<\/strong>: Agents are humans who would chat with the users. Agent will also need a chat window. For this we will use liveperson\/livechat software.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"Prerequisites\">Prerequisites<\/span><\/h2>\n<ul>\n<li>A fully functional Bot (we will be using a Banking Bot).<\/li>\n<li>Download BotKit SDK from <a href=\"https:\/\/github.com\/Koredotcom\/BotKit\" target=\"_blank\" rel=\"noopener noreferrer\">Kore\u2019s github<\/a><\/li>\n<li>Download and Install the Node.js. The BotKit SDK requires node.js to run on the same server where the SDK is installed.\n<ol>\n<li>Go to <code>https:\/\/nodejs.org\/en\/download\/<\/code> and select your OS as a .pkg file type for Mac and .msi file type for Windows.<\/li>\n<li>In a Terminal window, run the <code>node -v<\/code> command to verify installation and version, for example, v6.10.2.<\/li>\n<\/ol>\n<\/li>\n<li>A test callback server application. We will be using NGROK from <a href=\"https:\/\/dl.equinox.io\/ngrok\/ngrok\/stable\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/dl.equinox.io\/ngrok\/ngrok\/stable<\/a>\u00a0to simulate the callback server application. Following are the steps to install NGROK:\n<ol>\n<li>Open <a href=\"https:\/\/dl.equinox.io\/ngrok\/ngrok\/stable\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/dl.equinox.io\/ngrok\/ngrok\/stable<\/a>.<\/li>\n<li>Download and install the ngrok file for your operating system.\n<ul>\n<li>Downloading NGROK on Windows:\n<ol>\n<li>Download the zip file for your Windows machine 32-bit or 64-bit<\/li>\n<li>Unzip and run the <code>ngrok.exe<\/code> file to install ngrok.<\/li>\n<\/ol>\n<\/li>\n<li>Downloading NGROK on mac:\n<ol>\n<li>Press <em><code>Command+Space<\/code><\/em> and type <strong>Terminal<\/strong> and press <strong>enter\/return<\/strong> key.<\/li>\n<li>Run in Terminal app:<br \/>\n<code>ruby -e \"$(curl -fsSL https:\/\/raw.githubusercontent.com\/Homebrew\/install\/master\/install)\" &lt; \/dev\/null 2&gt; \/dev\/null<\/code> and press <strong>enter\/return<\/strong> key.<br \/>\nIf the screen prompts you to enter a password, please enter your Mac&#8217;s user password to continue. When you type the password, it won&#8217;t be displayed on the screen, but the system would accept it. So just type your password and press ENTER\/RETURN key. Then wait for the command to finish.<\/li>\n<li>Run <code>brew cask install ngrok<\/code><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<li>A live agent software. We will be using <a href=\"https:\/\/www.livechatinc.com\" target=\"_blank\" rel=\"noopener noreferrer\">LiveChatInc.com<\/a>. You can use your own LiveChat subscription or set up a free 30-day trial account at LiveChatInc.com by entering your business email in the <strong>Start using LiveChat now!. <\/strong>Sign up and create an account.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"Design_and_Configuration\">Design and Configuration<\/span><\/h2>\n<ol>\n<li>As a Bot developer, open Kore.ai Bot Builder \u2013 <a href=\"https:\/\/bots.kore.ai\/botbuilder\">https:\/\/bots.kore.ai\/botbuilder<\/a><\/li>\n<li>Select the Bot for which Agent Transfer needs to be configured.<\/li>\n<li>Open or create a dialog task (<em>Support Call Back)<\/em> and add an <strong>Agent transfer<\/strong> node.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/AT-node.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22254\" src=\"\/wp-content\/uploads\/sites\/12\/AT-node.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/li>\n<li>Enter a <em>Name (LiveChat)<\/em> and <em>Description<\/em> and <strong>Save<\/strong>.<\/li>\n<li>You will see a message \u2018<em>SDK is not currently configured\/Subscribed. Please go to API Extensions to configure the SDK.<\/em>\u2019. For now ignore this message as we will be showing how to configure SDK, later in this article.<\/li>\n<li>From the Bot Builder screen traverse to <strong>API Extensions -&gt; Agent Transfer<\/strong><\/li>\n<li>In the <strong>App Name<\/strong> section, select an existing app from the list or use the Create App option to create a new app.<\/li>\n<li>Make a note of the <strong>Bot ID<\/strong>, <strong>Client ID<\/strong> and <strong>Client Secret<\/strong> keys.<\/li>\n<li>Enter the Callback URL of your application, to be invoked by BotKIt SDK events. Since we are using NGROK, we will show how to obtain the callback URL:\n<ol>\n<li>In a <strong>Terminal<\/strong> Window, start <em>ngrok<\/em> to monitor port 8003 using the following command: <code>ngrok http 8003<\/code>.<\/li>\n<li>Copy ngrok forwarding URL. It will be in the format &#8211; <code>http:\/\/XXXXXXaa.ngrok.io<\/code><br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/AT-callbackurl-ngrok.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22255\" src=\"\/wp-content\/uploads\/sites\/12\/AT-callbackurl-ngrok.png\" alt=\"\" width=\"642\" height=\"166\" \/><\/a><\/li>\n<li>Use this forwarding URL as the call back URL and save.<br \/>\n<strong>Note<\/strong>: The forwarding URL changes whenever the ngrok is restarted. Make sure you make the changes to the callback URL every time ngrok is restarted.<\/li>\n<\/ol>\n<\/li>\n<li>The agent transfer is configured at the dialog level. You can open the dialog task, and open agent transfer node to see that the configuration is saved as shown below. You can select the Events required (<a href=\"#Events\">see below for details<\/a>)<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/AT-nodeConfig.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22256\" src=\"\/wp-content\/uploads\/sites\/12\/AT-nodeConfig.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/li>\n<li>Install any live agent software eg Livechat, Liveperson, Concentrix, Vayusphere etc depending on your enterprise requirement and license availability. Since we are using LiveChat, we will should you how to obtain the license details needed for Agent Transfer:\n<ol>\n<li>Sign in to your LiveChat account.<\/li>\n<li>Go to <strong>Settings<\/strong> from the left navigation and select <strong>chat link<\/strong>.<\/li>\n<li>Copy the URL and note the <strong>license code<\/strong>. If the URL is <code>https:\/\/lc.chat\/now\/104xx297\/<\/code> and then the license code is <code>104xx297<\/code><\/li>\n<\/ol>\n<\/li>\n<li>Open the downloaded <strong>BotKit SDK folder<\/strong> and do the following:\n<ul>\n<li>Edit <code>livechatapi.js:<\/code>\n<ol>\n<li>Give the respective botId and botName of your bot, which you have copied earlier.<\/li>\n<li>This JS file contains 3 API\u2019s of Kore &#8211; Initialization, Send Message, Get Message. If required, any new API\u2019s written for human agent transfer should be put in here.<br \/>\nExample: If closing connection is required, then close connection api written needs to go into livechatapi.js<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/AT-livechatapi.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22257\" src=\"\/wp-content\/uploads\/sites\/12\/AT-livechatapi.png\" alt=\"\" width=\"1072\" height=\"343\" \/><\/a><\/li>\n<\/ol>\n<\/li>\n<li>Edit <code>config.json<\/code>\n<ol>\n<li>Client ID, Client Secret key, respective server ports running and liveagent license of the third-party server goes here.<\/li>\n<li>Client Id, Client Secret can be copied from Events and Extensions &#8211; Agent Transfer.<\/li>\n<li>ngrok forwarding url can be copied from ngrok running instance. It is the call back url. This should be the URL entry.<\/li>\n<li>Liveagentlicense is the code given in the chatlink of livechat<\/li>\n<\/ol>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/AT-configjson.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22259\" src=\"\/wp-content\/uploads\/sites\/12\/AT-configjson.png\" alt=\"\" width=\"841\" height=\"503\" \/><\/a><\/li>\n<li>Edit <code>LiveChat.js<\/code>\n<ul>\n<li>Give the respective botId and botName of your bot, which you have copied earlier and save<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/AT-livechat.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22260\" src=\"\/wp-content\/uploads\/sites\/12\/AT-livechat.png\" alt=\"\" width=\"1075\" height=\"555\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<li>Edit app.js\n<ol>\n<li>Add the following line <code>sdk.registerBot(require('.\/LiveChat.js'))<\/code><\/li>\n<li>Delete any existing sdk.registerBot statements, if not needed<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/AT-appjs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22261\" src=\"\/wp-content\/uploads\/sites\/12\/AT-appjs.png\" alt=\"\" width=\"375\" height=\"203\" \/><\/a><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"Execution\">Execution<\/span><\/h2>\n<ol>\n<li>Open a terminal window and run the BotKit SDK by entering the command:<br \/>\n<code>node app.js<\/code><\/li>\n<li>Please make sure to install all the missing modules for running the server successfully without any errors as shown below.<br \/>\nExample, if error &#8220;<em>method url-template, node-schedule are missing&#8221;<\/em> is shown, then install the above modules using command<br \/>\n<code>npm install &lt;module-name&gt;<\/code> for windows, <code>sudo npm install &lt;module-name&gt;<\/code> for mac<\/li>\n<li>ngrok and node.js server will be running in different terminals.<\/li>\n<li>When user initiates the chat from the bot, bot transfers the call to an agent and sends a message to the user<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/AT-chat1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22263\" src=\"\/wp-content\/uploads\/sites\/12\/AT-chat1.png\" alt=\"\" width=\"1649\" height=\"826\" \/><\/a><\/li>\n<li>Agent receives a notification about this on the livechat<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/AT-chat2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22264\" src=\"\/wp-content\/uploads\/sites\/12\/AT-chat2.png\" alt=\"\" width=\"1660\" height=\"619\" \/><\/a><\/li>\n<li>Now connection between agent and the user has been established and the conversation continues.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/AT-chat3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22265\" src=\"\/wp-content\/uploads\/sites\/12\/AT-chat3.png\" alt=\"\" width=\"1655\" height=\"766\" \/><\/a><\/li>\n<\/ol>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"Events\">Events<\/span><\/h2>\n<p><strong>Note<\/strong>: The events and methods required for sending messages from User, bot and transferring to Agent are outlined in LiveChat.JS<\/p>\n<ol>\n<li><em>on_user_message<\/em> event is triggered when a user sends a message and this message is sent to the bot using sendBotMessage method.<\/li>\n<li><em>on_bot_message<\/em> is triggered when bot sends a message and this message is sent to the user using SendUserMessage method.<\/li>\n<li><em>on_agent_transfer<\/em> event is triggered when the service agentTransfer node is triggered in bot. And this event connects to the agent using connectToAgent method, which internally calls initChat API<\/li>\n<li><em>gethistory<\/em> method, gives the chat history of the user with the bot to the transferred agent<\/li>\n<li><em>scheduleJob<\/em> is run for every 5 secs and it polls for the pending messages from the Agent, which internally calls getPendingMessages<\/li>\n<li><em>getPendingMessages<\/em>\u00a0gets all the pending messages from Agent and delivers it to the User<\/li>\n<li><em>chat_closed<\/em> gets triggered when the agent closes the chat with the user.<\/li>\n<\/ol>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"One of the frequently asked questions is how to transfer a chat to a human agent from the Bot. This is especially necessary if your bot is in the space of customer service. Chatbots are not meant to completely replace humans. Many times chatbot will fail to answer satisfactorily or user would just want to...","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74],"tags":[],"class_list":["post-22466","post","type-post","status-publish","format-standard","hentry","category-how-tos"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/posts\/22466","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/comments?post=22466"}],"version-history":[{"count":3,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/posts\/22466\/revisions"}],"predecessor-version":[{"id":22570,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/posts\/22466\/revisions\/22570"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/media?parent=22466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/categories?post=22466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/tags?post=22466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}