{"id":17879,"date":"2016-08-08T17:00:06","date_gmt":"2016-08-08T17:00:06","guid":{"rendered":"http:\/\/apidocs.kore.com\/?post_type=docs&#038;p=4948"},"modified":"2023-10-16T10:40:24","modified_gmt":"2023-10-16T09:40:24","slug":"adding-the-webmobile-client-channel","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/channel-enablement\/adding-the-webmobile-client-channel\/","title":{"rendered":"Adding the Web\/Mobile Client Channel"},"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><span style=\"font-weight: 400;\">To use any Kore.ai Bot SDKs, you must first register your app to get the authentication credentials to communicate between the Kore.ai bot and your application hosting the bot. The Kore.ai bot SDKs can be used to add a chat widget to your company application that enables users to chat with the application using natural language input. The Kore.ai bots platform interprets the user input, processes the request, and responds to the user.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The bots Platform accepts requests only from authorized clients for connection and exchanging messages. To authorize the connection, you must register your app and get the required client credentials. The credentials authorize the client app and provide for user assertion.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">This topic describes how to register your application and generate credentials for your clients that are required to exchange messages between your application and the Kore.ai bots Platform and then configure and add the Web\/Mobile Client Channel to your bot.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To add the Web\/Mobile Client Channel to your bot, you must first register or create an app in Bot Builder. When you create an app, you are provisioning credentials for your application to communicate securely with Kore.ai servers. After you create an app, you can use that app registration in the configuration to add the Web\/Mobile Client Channel to your bot.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Add_WebMobile_Client_Channel\">Add Web\/Mobile Client Channel<\/span><\/h2>\n<p>The Web\/Mobile Client channel can be configured using the following options:<\/p>\n<p><strong>Associate an App<\/strong><\/p>\n<ul>\n<li>When you choose to enable Web\/Mobile client, an app is automatically created for you<\/li>\n<li>You can choose to replace this app with any other app that you may want to use<\/li>\n<\/ul>\n<p>To create your own app, follow these steps:<\/p>\n<ol>\n<li>Open the bot on which you want to add the Web\/Mobile Client channel.<\/li>\n<li>On the bots menu, click <strong>Channel &gt; Web\/Mobile<\/strong> <strong>Client<\/strong>.<\/li>\n<li><span style=\"font-weight: 400;\">In the <\/span><b>Select App<\/b><span style=\"font-weight: 400;\"> drop-down list, select your existing app registration or click <\/span><b>Add App<\/b><span style=\"font-weight: 400;\"> to create a new app<\/span>.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807075634\/Web_SDK_Client_App.png\"><img loading=\"lazy\" decoding=\"async\" width=\"745\" height=\"586\" class=\"alignnone size-medium wp-image-58556\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807075634\/Web_SDK_Client_App.png\" alt=\"\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807075634\/Web_SDK_Client_App.png 745w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807075634\/Web_SDK_Client_App-300x236.png 300w\" sizes=\"auto, (max-width: 745px) 100vw, 745px\" \/><\/a><\/li>\n<li>In the <strong>Name<\/strong> field, enter the name for the app registration used in Bot Builder. For example, <strong>weather app<\/strong>.<\/li>\n<li>Select one of these scopes for the app:\n<ul>\n<li><strong>Allow anonymous users to chat with the bot<\/strong>: Enables anonymous users to interact with the bot.<\/li>\n<li><strong>Auto register new users on Kore.ai Bots Platform<\/strong>:\u00a0Select to control the auto-user registration in Kore.ai if the user assertion is unknown.<\/li>\n<\/ul>\n<\/li>\n<li>In the <strong>JWT Signing<\/strong> <strong>Algorithms Used For Client App Authentication<\/strong>\u00a0drop-down list, select one of the following security algorithms:\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>RS256\/<\/b><b>RS512<\/b><b>: <\/b><span style=\"font-weight: 400;\">Select to enable the <\/span><b>Public Key.<\/b> <i><span style=\"font-weight: 400;\">The Private key, used for encryption, is provided by the user, and the Public key, used for decryption, is provided by the Platform<\/span><\/i><span style=\"font-weight: 400;\">. Both the keys have to be used for generating the token.<\/span><span style=\"font-weight: 400;\"> The Public Key is used by the XO Platform to authenticate the client application.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>HS256\/<\/b><b>HS512<\/b><b>:<\/b><span style=\"font-weight: 400;\"> Select to generate a <\/span><b>Secret Key <\/b><span style=\"font-weight: 400;\">and a <\/span><b>Client ID<\/b><span style=\"font-weight: 400;\">. The <\/span><b>Client ID<\/b><span style=\"font-weight: 400;\"> is required for app initialization, and the <\/span><b>Secret Key<\/b><span style=\"font-weight: 400;\"> is used by the XO Platform to authenticate the client application.<\/span><\/li>\n<\/ul>\n<\/li>\n<li><span style=\"font-weight: 400;\">(Optional) In the <\/span><b>Push Notifications<\/b><span style=\"font-weight: 400;\"> section, click <\/span><b>Enable<\/b><span style=\"font-weight: 400;\"> and then specify a URL to send the notifications<\/span>.<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807080118\/Web_SDK_Client_App1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"749\" height=\"825\" class=\"alignnone size-medium wp-image-58559\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807080118\/Web_SDK_Client_App1.png\" alt=\"\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807080118\/Web_SDK_Client_App1.png 749w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807080118\/Web_SDK_Client_App1-272x300.png 272w\" sizes=\"auto, (max-width: 749px) 100vw, 749px\" \/><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">When you Enable the Push Notifications, you can select one of the following options to manage the notifications:<\/span>\n<ul>\n<li aria-level=\"1\"><b>All Messages<\/b><span style=\"font-weight: 400;\"> &#8211; Sends push notifications for all conversation messages to the client app.<\/span><\/li>\n<li aria-level=\"1\"><b>Message Delivery Failures<\/b><span style=\"font-weight: 400;\"> &#8211; Sends push notifications for failure scenarios such as WebSocket Disconnected, App is Killed, and Message Delivery Failure.<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807081323\/Web_SDK_Client_App2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"752\" height=\"821\" class=\"alignnone size-medium wp-image-58562\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807081323\/Web_SDK_Client_App2.png\" alt=\"\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807081323\/Web_SDK_Client_App2.png 752w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807081323\/Web_SDK_Client_App2-275x300.png 275w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li><span style=\"font-weight: 400;\">To customize the display messages for the push notifications messages sent to the client app, select one of the following options:<\/span>\n<ul>\n<li><b>Send Original Messages<\/b><span style=\"font-weight: 400;\"> &#8211; Sends the actual conversation message as part of the push notification.<\/span><\/li>\n<li><b>Show a standard message from standard responses<\/b><span style=\"font-weight: 400;\"> &#8211; Sends a generic message instead of the original message.<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807081734\/Web_SDK_Client_App3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"747\" height=\"823\" class=\"alignnone size-medium wp-image-58565\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807081734\/Web_SDK_Client_App3.png\" alt=\"\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807081734\/Web_SDK_Client_App3.png 747w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807081734\/Web_SDK_Client_App3-272x300.png 272w\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" \/><\/a><\/span><\/li>\n<li><span style=\"font-weight: 400;\">Click <\/span><b>Manage Responses<\/b><span style=\"font-weight: 400;\"> to add custom messages in the push notification. To learn more about adding responses, see <\/span><a href=\"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/bot-intelligence\/default-standard-responses\/\"><span style=\"font-weight: 400;\">Default Standard Responses<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/bot-intelligence\/default-dialog\/\"><span style=\"font-weight: 400;\">Default Conversations<\/span><\/a><span style=\"font-weight: 400;\">.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807082646\/Web_SDK_Client_App4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"835\" height=\"896\" class=\"alignnone size-medium wp-image-58568\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807082646\/Web_SDK_Client_App4.png\" alt=\"\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807082646\/Web_SDK_Client_App4.png 835w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807082646\/Web_SDK_Client_App4-280x300.png 280w\" sizes=\"auto, (max-width: 835px) 100vw, 835px\" \/><\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li><span style=\"font-weight: 400;\">Click <\/span><b>Save <\/b><span style=\"font-weight: 400;\">and then <\/span><b>Create<\/b><span style=\"font-weight: 400;\">. The app registration details appear<\/span>.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807082905\/Web_SDK_Client_App5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1193\" height=\"888\" class=\"alignnone size-medium wp-image-58571\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807082905\/Web_SDK_Client_App5.png\" alt=\"\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807082905\/Web_SDK_Client_App5.png 1193w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807082905\/Web_SDK_Client_App5-300x223.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20230807082905\/Web_SDK_Client_App5-1024x762.png 1024w\" sizes=\"auto, (max-width: 1193px) 100vw, 1193px\" \/><\/a><\/li>\n<li>To copy\u00a0the app registration details to the clipboard for your application, you can click <strong><span style=\"color: #333333;\">Copy<\/span><\/strong>\u00a0for\u00a0<strong>Bot Name<\/strong>, <strong>Bot ID<\/strong>, and\u00a0<strong>Client ID<\/strong>. For <strong>Client Secret<\/strong>, click <strong>View<\/strong>, and then click <strong>Copy<\/strong>.<\/li>\n<li>In the <strong>Allow Alert Task Setup<\/strong> section, select <strong>Yes<\/strong> to enable your application users to\u00a0set up their own alert tasks using the web client. By default, this setting is disabled for web client users, but mobile client users can always setup their own alerts.<\/li>\n<li>In the <strong>Enable Channel<\/strong> section, select <strong>Yes<\/strong> to enable the channel immediately after saving.<\/li>\n<li>Click <strong>Save<\/strong> to save the settings and close the <strong>Web\/Mobile Client\u00a0Channel<\/strong> page.<\/li>\n<\/ol>\n<p>The <em>Channel Information updated successfully<\/em> message is displayed on the top-right of the page.<br \/>\nOnce enabled <a href=\"\/docs\/bots\/advanced-topics\/kore-web-sdk\/kore-ai-web-sdk-tutorial\/\">click here<\/a> for steps to integrate your bot into your web application.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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=\"Choose_Deployment_Options\">Choose Deployment Options<\/span><\/h2>\n<p>There are two different ways of deploying the Web\/mobile client. You can either use the Kore.ai hosted Client or set up your own client and host it.<\/p>\n<p>If you are using the Kore.ai hosted client, then there are two different approaches:<\/p>\n<ul>\n<li>Share the URL with users<\/li>\n<li>Embed code in your website<\/li>\n<\/ul>\n<p>To choose deployment options, follow these steps:<\/p>\n<ol>\n<li>In the <strong>Web Client Details <\/strong> section, copy the URL to share this URL with users to interact with your virtual assistant.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-32203\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20220216051430\/web_client.png\" alt=\"\" width=\"600\" height=\"250\" \/><\/li>\n<li>In the <strong>Embed Code<\/strong> section, copy the code to embed this Channel in your application pages where you want to display this virtual assistant widget.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-32204\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20220216051722\/web_client1.png\" alt=\"\" width=\"600\" height=\"250\" \/><\/li>\n<li>In the <strong>Whitelist Domains<\/strong> section, click <strong>+Add Domain <\/strong> to add URLs which want to include in the whitelist for your assistant.<\/li>\n<li>Click the <strong>Download SDK<\/strong> link to download, setup and configure the Web\/Mobile SDK using the prebuilt SDK libraries.<\/li>\n<li>Select an appropriate option to Allow Alert Task setup. You can choose either <strong>Yes<\/strong> or <strong>No<\/strong> to let users to set up Alerts using Web Client.<\/li>\n<li>Click <strong>Save<\/strong> to save the settings and close the Web\/Mobile Client Channel page.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-32205\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20220216052221\/web_client2.png\" alt=\"\" width=\"600\" height=\"250\" \/><\/li>\n<\/ol>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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=\"Edit_WebMobile_Channel\">Edit Web\/Mobile Channel<\/span><\/h2>\n<p>To edit the Web\/Mobile Client channel, follow the below steps:<\/p>\n<ol>\n<li>Hover over the channel to modify, and then click the <strong>Settings<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"icon alignnone wp-image-2113 size-full\" src=\"\/wp-content\/uploads\/sites\/35\/DIYSettingsIcon-1.png\" width=\"18\" height=\"18\" \/> icon displayed <span style=\"font-weight: 400;\">to view the command menu, as shown in the screenshot below<\/span>.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/35\/DIYChannelsTabWebMobileEdit.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9439 alignnone\" src=\"\/wp-content\/uploads\/sites\/35\/DIYChannelsTabWebMobileEdit.png\" alt=\"Editing the Web\/Mobile Client Channel\" width=\"897\" height=\"228\" \/><\/a><br \/>\nSelect one of the following commands to modify the channel:<\/li>\n<\/ol>\n<ul>\n<li><strong>Edit<\/strong> &#8211; Click to open the Web\/Mobile Client channel setup page.<\/li>\n<li><strong>Disable\/Enable<\/strong> &#8211; Click <strong>Disable<\/strong> to temporarily disable the use of the Web\/Mobile Client channel for your bot. When the channel is disabled, click <strong>Enable<\/strong> to enable the use of the Web\/Mobile Client channel.<\/li>\n<li><strong>Delete<\/strong> &#8211; Click <strong>Delete<\/strong>, and then click <strong>OK<\/strong> in the <strong>Delete Confirmation<\/strong> dialog to permanently delete the bot channel configuration.<\/li>\n<\/ul>\n<p class=\"warning\">Warning: This operation is permanent, and cannot be undone.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"To use any Kore.ai Bot SDKs, you must first register your app to get the authentication credentials to communicate between the Kore.ai bot and your application hosting the bot. The Kore.ai bot SDKs can be used to add a chat widget to your company application that enables users to chat with the application using natural...","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-17879","post","type-post","status-publish","format-standard","hentry","category-channel-enablement"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/17879","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/comments?post=17879"}],"version-history":[{"count":19,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/17879\/revisions"}],"predecessor-version":[{"id":59872,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/17879\/revisions\/59872"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/media?parent=17879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/categories?post=17879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/tags?post=17879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}