{"id":26049,"date":"2020-12-14T07:16:49","date_gmt":"2020-12-14T07:16:49","guid":{"rendered":"https:\/\/developer.kore.ai\/v8-0\/?p=26049"},"modified":"2020-12-14T09:52:07","modified_gmt":"2020-12-14T09:52:07","slug":"kore-unblu-integration","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v8-0\/docs\/bots\/how-tos\/kore-unblu-integration\/","title":{"rendered":"Kore-Unblu Integration"},"content":{"rendered":"<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<h2><span class=\"ez-toc-section\" id=\"Overview\">Overview<\/span><\/h2>\n<p>Unblu is a conversational platform that allows agents and advisors in your organization to collaborate with your customers and website visitors. It enables collaboration through online channels like live chat, secure text messaging, and video chat to achieve a better customer experience.<\/span><\/p>\n<p>Transferring a chat to a human agent from the bot is necessary if your bot is in the space of customer service. Chatbots are not meant to completely replace humans. At times, the chatbot fails to answer satisfactorily or the user wants to chat with a human being. If this happens, the chatbot should transfer the chats to a human agent or a customer care representative. To help users accomplish this task, Kore can be integrated with the Unblu application.<\/span><\/p>\n<p>Here, the bot is the core of the entire solution. Apart from performing all its functionalities, the bot also acts as a proxy between users and agents.<\/span><\/p>\n<ul>\n<li><b>Bot<\/b>: Chat Bot that the user interacts with.<\/span><\/li>\n<li><b>Users<\/b>: Users are the customers who are using this bot.<\/span><\/li>\n<li><b>Agent<\/b>: Agents are humans who chat with users. The agent will also need a chat window. For this, you can use <\/span><i>Unblu <\/span><\/i>software.<\/span><\/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=\"Prerequisites\">Prerequisites<\/span><\/h2>\n<p>The prerequisites are listed below:<\/span><\/p>\n<ul>\n<li>A fully functional bot.<\/span><\/li>\n<li>An Unblu account.<\/span><\/li>\n<li>Download BotKit SDK from Kore\u2019s <\/span><a href=\"https:\/\/github.com\/Koredotcom\/BotKit\">GitHub<\/span><\/a>.<\/span><\/li>\n<li>Download and install the &lt;<\/span><i>Node.js<\/span><\/i>&gt;<\/span> file. The BotKit SDK requires &lt;<\/span><i>node.js<\/span><\/i>&gt; files to run on the same server where the SDK is installed. The &lt;<\/span><i>node.js<\/span><\/i>&gt; version must be v12.0 and above.<\/span><\/li>\n<li>Ngrok to simulate the callback server application.<\/span><\/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=\"Configuration\">Configuration<\/span><\/h2>\n<p>To perform the Kore-Unblu integration, follow the below steps:<\/span><\/p>\n<ol>\n<li>Log in to the Kore Bots platform with valid credentials.<\/span><\/li>\n<li>On the left pane, click <\/span><b>API Extensions<\/b>.<\/span><\/li>\n<li>On the API Extensions page, by default, the <\/span><b>BotKit SDK<\/b> option is selected. Click <\/span><b>Agent Transfer<\/b>.<\/span><\/li>\n<li>On the Agent Transfer page, under <\/span><b>App Name<\/b>, click <\/span><b>Add<\/b>.<\/span><\/li>\n<li>On the Create Client App window, enter the application name in the <\/span><b>Name <\/b> field.<\/li>\n<li>Click <\/span><b>Next <\/b>&gt; <\/span><b>Done<\/b>.<\/span><\/li>\n<li>In the<\/span><b> Callback URL<\/b> field, enter <\/span>the BotKit URL endpoint. For example, https:\/\/&lt;domainname&gt;\/unblu.<\/span><\/li>\n<li>Click <\/span><b>Save<\/b>.<\/span><\/li>\n<li>Now, log in to the Unblu account with valid credentials.<\/span><\/li>\n<li>Click your profile on the top-right; under the <\/span><b>Administration <\/b>section, select <\/span><b>Manage Account<\/b>.<\/span><\/li>\n<li>On the Account Configuration page, by default, <\/span><b>Account Overview<\/b> is displayed.<\/span><\/li>\n<li>On the left pane, under the <\/span><b>Site Integration<\/b> section, select <\/span><b>Domains<\/b>.<\/span><\/li>\n<li>On the Domains page, click <\/span><b>New Domain<\/b> on the top-right.<\/span><\/li>\n<li>On the New Domain window, enter the URL in the <\/span><b>Domain URL<\/b> field.\u00a0<\/span><br \/><b>Note<\/b>: This is the Callback URL. Refer to step 7. <\/span>If this is not a constant public IP or Ngrok IP, you must update the IP whenever it changes.<\/span><\/li>\n<li>In the <\/span><b>Protocol<\/b> field, select <\/span><b>Both<\/b>.<\/span><\/li>\n<li>Click <\/span><b>Save<\/b>.<\/span><\/li>\n<\/ol>\n<p>After completing the above configurations, make the required changes in the &lt;<\/span><i>config.json<\/span><\/i>&gt; file. <a href=\"#sample\">Refer below<\/a> for &lt;<\/span><i>sample_config_file.txt<\/span><\/i>&gt;.<\/span><\/p>\n<ol>\n<li>Go to &lt;<\/span><i>config.json<\/span><\/i>&gt; file and make the below-mentioned changes.<\/span><\/li>\n<li style=\"font-weight: 400\">Under the <b>app <\/b>section, paste the<b> URL<\/b> (Ngrok or publicly accessible URL). Refer to the below image.<br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080526\/unblu-1-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080526\/unblu-1-1.png\" alt=\"\" width=\"393\" height=\"131\" class=\"alignnone size-full wp-image-26066\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080526\/unblu-1-1.png 393w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080526\/unblu-1-1-300x100.png 300w\" sizes=\"auto, (max-width: 393px) 100vw, 393px\" \/><\/a><\/li>\n<li>Under the <\/span><b>credentials <\/b>section,<\/span> paste the Kore Bot details: API Key (client secret), App ID (client id), and Bot Name. Refer to the below image.<\/span><br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080553\/unblu-2-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080553\/unblu-2-1.png\" alt=\"\" width=\"508\" height=\"98\" class=\"alignnone size-full wp-image-26068\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080553\/unblu-2-1.png 508w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080553\/unblu-2-1-300x58.png 300w\" sizes=\"auto, (max-width: 508px) 100vw, 508px\" \/><\/a><br \/>To find these details,\n<ol>\n<li>Log in to the Kore Bots platform with valid credentials.<\/span><\/li>\n<li>On the left pane, click <\/span><b>API Extensions<\/b>.<\/span><\/li>\n<li style=\"font-weight: 400\">On the API Extensions page, by default, the <b>BotKit SDK<\/b> option is selected. You can find the details as shown in the below image.<br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080622\/unblu-3-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080622\/unblu-3-1.png\" alt=\"\" width=\"1334\" height=\"377\" class=\"alignnone size-full wp-image-26070\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080622\/unblu-3-1.png 1334w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080622\/unblu-3-1-300x85.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080622\/unblu-3-1-1024x289.png 1024w\" sizes=\"auto, (max-width: 1334px) 100vw, 1334px\" \/><\/a><\/li>\n<\/ol>\n<\/li>\n<li>Under the Unblu section, make the below changes:\n<ol>\n<li>Paste Unblu credentials under the <\/span><b>Unblu credentials <\/b>section.<\/span><\/li>\n<li>Under the <\/span><b>external_messenger <\/b>section, enter the name, description, etc., you want to display in the chat.<\/span><br \/>To access the external messenger details,\n<ol>\n<li>Log in to the Unblu desktop application.<\/span><\/li>\n<li>On the left pane, under the <\/span><b>External Integration<\/b> section,<\/span> select <\/span><b>External Messengers<\/b>.<\/span><\/li>\n<li>On the External Messengers page, select the respective messenger and you can find the messenger details.<\/span><\/li>\n<\/ol>\n<\/li>\n<li>Under<\/span> the <\/span><b>agent <\/b>section, enter the agent details you want to create.<\/span><\/li>\n<li>Under the <\/span><b>named_area<\/b> section, enter a <\/span><b>Name <\/b>and <\/span><b>Meta Tag ID<\/b>.<\/span><br \/>To create a named area,\n<ol>\n<li>Log in to the Unblu application.<\/span><\/li>\n<li>On the left pane, under the <\/span><b>Site Integration<\/b> section,<\/span> select <\/span><b>Named Areas<\/b>.\u00a0<\/span><\/li>\n<li>On the Named Areas page, click<\/span><b> New Named Area <\/b>on the top-right.<\/span><\/li>\n<li>On the New Named Area window, select a registered domain from the <\/span><b>Domain Name<\/b> drop-down list and enter a name in the<\/span><b> Name <\/b>field. You can also register a domain by clicking <\/span><b>Register a New Domain<\/b>.<\/span><\/li>\n<li>Click <\/span><b>Save<\/b>.<\/span><\/li>\n<\/ol>\n<\/li>\n<li>Under the <\/span><b>admin <\/b>section, enter the Unblu username.<\/span><br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080650\/unblu-4-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080650\/unblu-4-1.png\" alt=\"\" width=\"590\" height=\"550\" class=\"alignnone size-full wp-image-26072\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080650\/unblu-4-1.png 590w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080650\/unblu-4-1-300x280.png 300w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/li>\n<\/ol>\n<\/li>\n<li>After you have updated the &lt;<\/span><i>config.json<\/span><\/i>&gt; file, install the dependencies by executing the command <\/span><i>npm i<\/span><\/i>.<\/span><\/li>\n<li>Run the integration setup by executing the command <\/span><i>npm start<\/span><\/i>.\u00a0\u00a0\u00a0<\/span><br \/><b>Note<\/b>: The webhook URL must be the same in API Extensions, &lt;<\/span><i>config.json<\/span><\/i>&gt; file, and the external messenger section (Endpoint URL of the respective messenger) of your Unblu account as mentioned above (The Botkit URL in API Extensions, app.url, and unblu.custom.external_messenger).<\/span><\/li>\n<li>The agent transfer is configured at the dialog level. You can open the dialog task, and open the agent transfer node to see that the configuration is saved as shown below.<\/span><br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080718\/unblu-5-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080718\/unblu-5-1.png\" alt=\"\" width=\"1339\" height=\"610\" class=\"alignnone size-full wp-image-26074\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080718\/unblu-5-1.png 1339w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080718\/unblu-5-1-300x137.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v8-0\/wp-content\/uploads\/sites\/16\/20201214080718\/unblu-5-1-1024x466.png 1024w\" sizes=\"auto, (max-width: 1339px) 100vw, 1339px\" \/><\/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<p><strong id=\"sample\">Sample Configuration File<\/strong><\/p>\n<pre>{\r\n  \"server\": {\r\n    \"port\": 8003\r\n  },\r\n  \"app\": {\r\n    \"apiPrefix\": \"\/unblu\",\r\n    \"url\": \"https:\/\/fxxxxxxexxxx.ngrok.io\"\r\n  },\r\n  \"credentials\": {\r\n    \"st-dxaxxxfx-xxxx-xxxx-xdxx-xxfbcaaxabx\": {\r\n      \"apikey\": \"ixyxxxj\/jyklUDsEkELzNYPxPJeTQOPfNrfxjxnXZxx\",\r\n      \"appId\": \"cs-xxxxxfxe-dxxc-xxxe-add-axxxbdxxxxdx\",\r\n      \"botName\": \"Banking App\"\r\n    }\r\n  },\r\n  \"redis\": {\r\n    \"options\": {\r\n      \"host\": \"localhost\",\r\n      \"port\": xxxx\r\n    },\r\n    \"available\": false\r\n  },\r\n  \"examples\": {\r\n    \"mockServicesHost\": \"http:\/\/localhost:xxxx\"\r\n  },\r\n  \"supportsMessageAck\": true,\r\n  \"languages\": [\r\n    \"en\",\r\n    \"de\"\r\n  ],\r\n  \"unblu\": {\r\n    \"custom\": {\r\n      \"external_messenger\": {\r\n        \"name\": \"xxxx-Kore Messenger\",\r\n        \"description\": \"Kore Messenger channel for PoC\",\r\n        \"sourceId\": \"xxx_kore_source_id\",\r\n        \"webhookEndpoint\": \"https:\/\/fxxxxxxexxxx.ngrok.io\/webhook\",\r\n        \"webhookSecret\": \"xxx-kore\"\r\n      },\r\n      \"agent\": {\r\n        \"firstName\": \"Xxx\",\r\n        \"lastName\": \"Bank Agent\",\r\n        \"username\": \"xxx_bank1_agent\",\r\n        \"displayName\": \"xxx Bank1 Agent\",\r\n        \"email\": \"\",\r\n        \"phone\": \"\",\r\n        \"sourceId\": \"xxx_Agent_Source_Id\",\r\n        \"personSource\": \"VIRTUAL\"\r\n      },\r\n      \"named_area\": {\r\n        \"name\": \"xxx-Unblu Named Area\",\r\n        \"meta_tag_id\": \"SxCxntqnQxxxHFhTMykIHA\"\r\n      },\r\n      \"admin\": {\r\n        \"user_name\": \"xxx\"\r\n      }\r\n    },\r\n    \"credentials\": {\r\n      \"url\": \"https:\/\/kore.unblu-test.com\/\",\r\n      \"webhook\": \"webhook\",\r\n      \"auth\": {\r\n        \"username\": \"xxx\",\r\n        \"password\": \"sdfghj\"\r\n      }\r\n    }\r\n  }\r\n}<\/pre>\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>\n","protected":false},"excerpt":{"rendered":"Overview Unblu is a conversational platform that allows agents and advisors in your organization to collaborate with your customers and website visitors. It enables collaboration through online channels like live chat, secure text messaging, and video chat to achieve a better customer experience. Transferring a chat to a human agent from the bot is necessary...","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74],"tags":[],"class_list":["post-26049","post","type-post","status-publish","format-standard","hentry","category-how-tos"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v8-0\/wp-json\/wp\/v2\/posts\/26049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.kore.ai\/v8-0\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developer.kore.ai\/v8-0\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v8-0\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v8-0\/wp-json\/wp\/v2\/comments?post=26049"}],"version-history":[{"count":10,"href":"https:\/\/developer.kore.ai\/v8-0\/wp-json\/wp\/v2\/posts\/26049\/revisions"}],"predecessor-version":[{"id":26083,"href":"https:\/\/developer.kore.ai\/v8-0\/wp-json\/wp\/v2\/posts\/26049\/revisions\/26083"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v8-0\/wp-json\/wp\/v2\/media?parent=26049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v8-0\/wp-json\/wp\/v2\/categories?post=26049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v8-0\/wp-json\/wp\/v2\/tags?post=26049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}