{"id":1086,"date":"2021-06-01T09:57:02","date_gmt":"2021-06-01T09:57:02","guid":{"rendered":"https:\/\/multisite.korebots.com\/SearchAssist\/?p=1086"},"modified":"2021-07-16T03:49:26","modified_gmt":"2021-07-16T03:49:26","slug":"web-sdk-tutorial","status":"publish","type":"post","link":"https:\/\/multisite.korebots.com\/SearchAssist\/app-management\/web-sdk-tutorial\/","title":{"rendered":"Web SDK Tutorial"},"content":{"rendered":"<section class=\"l-section wpb_row height_auto\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row via_grid cols_1 laptops-cols_inherit tablets-cols_inherit mobiles-cols_1 valign_top type_default stacking_default\"><div class=\"wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><p><span style=\"font-weight: 400;\">This tutorial is an end-to-end walkthrough for setting up and running an instance of the SearchAssist Web SDK, which is a collection of libraries that you can use to integrate SearchAssist apps with your own web applications.<\/span><\/p>\n<\/div><\/div><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 class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h2><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The following list describes the general steps you will take to install and configure the Web SDK.<\/p>\n<ul>\n<li><strong>Build an App to be integrated<\/strong> \u2013 To get started, you need to develop a search assist app through the SearchAssist business user portal, and then configure the app to run in the Web\/Mobile Client channel. <a href=\"\/SearchAssist\/getting-started\/introduction\/#Application\" target=\"_blank\" rel=\"noopener noreferrer\">Refer here for how<\/a>.<\/li>\n<li><strong>Create a new Credential<\/strong> \u2013 As a prerequisite, you need to create a credential that would be referred to while configuring the Web\/Mobile client channel. <a href=\"\/SearchAssist\/app-management\/credentials\/\" target=\"_blank\" rel=\"noopener noreferrer\">Refer here for how<\/a>.<\/li>\n<li><strong>Configure Web\/Mobile Client channel<\/strong> \u2013 To use the SearchAssist app with the Web SDK, you must configure the App for the Web\/Mobile Client channel using the credentials created in the above step. <a href=\"\/SearchAssist\/app-management\/channels\/\" target=\"_blank\" rel=\"noopener noreferrer\">Refer here for how<\/a>.<\/li>\n<li>From the Web\/Mobile client detail page and copy the below details from the Web\/Mobile client details page\n<ul>\n<li>App Name<\/li>\n<li>App ID<\/li>\n<li>Client ID<\/li>\n<li>Client secret ID<\/li>\n<li>Search ID<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div><\/div><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 class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h3><span class=\"ez-toc-section\" id=\"Configuring_web_SDK\"><\/span><span style=\"font-weight: 400;\">Configuring web SDK<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now it is time to download, uncompress the file required for the Web SDK and a test application to run the SearchAssist App on your local host server.<\/p>\n<ol>\n<li><span style=\"font-weight: 400;\">To download the SearchAssist Web SDK, go to <\/span><a href=\"https:\/\/github.com\/Koredotcom\/web-kore-sdk\"><i><span style=\"font-weight: 400;\">https:\/\/github.com\/SearchAssistdotcom\/web-SearchAssist-sdk<\/span><\/i><\/a><span style=\"font-weight: 400;\">, and then click <\/span><b>Download<\/b><span style=\"font-weight: 400;\">. <\/span><\/li>\n<li><span style=\"font-weight: 400;\">Extract all files to your local folder<\/span><\/li>\n<li><span style=\"font-weight: 400;\">From the SearchAssist Business Portal -&gt; Manage -&gt; <\/span><b>Web\/Mobile Client Channel<\/b><span style=\"font-weight: 400;\"> page on the <\/span><b>Channels<\/b><span style=\"font-weight: 400;\"> menu, copy the following : (These values needs to updated in the \u2018SearchAssist-config.js\u2019 file)<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">App Name\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">App ID<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Client ID\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Client secret ID<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Search ID<\/span><\/li>\n<\/ul>\n<\/li>\n<li aria-level=\"2\">Open the extracted folder, locate and navigate to \/<i><span style=\"font-weight: 400;\">web-kore-sdk-private\/<\/span><\/i><em>findly\/<\/em><em>demo\/<\/em> folder<\/li>\n<li aria-level=\"2\"><span style=\"font-weight: 400;\">Open \u2018<\/span><i><span style=\"font-weight: 400;\">SearchAssist-config.js\u2019 <\/span><\/i><span style=\"font-weight: 400;\">\u00a0file in any of the editors(Ex:- Notepad++, Visual studio)<\/span><\/li>\n<li aria-level=\"2\"><span style=\"font-weight: 400;\">Update the <\/span><i><span style=\"font-weight: 400;\">botOptions<\/span><\/i><span style=\"font-weight: 400;\"> parameters botInfo, clientId and clientSecret, and your email id as userIdentity.<\/span>\n<pre>botOptionsFindly.koreAPIUrl = \"Host URL\"; (Ex: \u2018https:\/\/qa.kore.ai\/searchassistapi\/\u2019)\r\nbotOptionsFindly.baseAPIServer = \u201c\u201d;   (Ex: \u2018https:\/\/qa.kore.ai\/\u2019)\r\nbotOptionsFindly.botInfo = { chatBot: \"\", \"taskBotId\": \"\"};\r\nbotOptionsFindly.clientId = \"\";\r\nbotOptionsFindly.clientSecret = \"\";\r\nbotOptionsFindly.searchIndexID = \"\";\r\nbotOptionsFindly.reWriteSocketURL = {\r\n        protocol: 'wss',\r\n        hostname: ''  (Ex: \u2018qa.kore.ai\u2019)\r\n    };\r\n<\/pre>\n<\/li>\n<li aria-level=\"2\"><span style=\"font-weight: 400;\">Save the changes done in the <\/span><span style=\"font-weight: 400;\">\u2018SearchAssist-config.js\u2019 file<\/span><\/li>\n<li>Locate and navigate to \/<i><span style=\"font-weight: 400;\">web-kore-sdk-private\/<\/span><\/i><em>demo\/<\/em> folder<\/li>\n<li aria-level=\"2\"><span style=\"font-weight: 400;\">Right-click \u201c<\/span><i><span style=\"font-weight: 400;\">index.html<\/span><\/i><span style=\"font-weight: 400;\">\u201d file and open with any one of the browsers<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">End User SDK will be opened with the changes done in the configured app<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Start the searches in the SDK and relevant results will be displayed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Data searched in the End User SDK (\u201csearches\u201d,\u201dUsers\u201d,\u201dClicks\u201d and \u201cAppearance of Sources data\u201d) will be displayed in the Business user portal.<\/span><\/li>\n<\/ol>\n<p><b>Note<\/b><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">If the app is running in a <span style=\"text-decoration: underline;\">local box<\/span>, in order to validate it below steps are mandatory<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">We need to run SDK in chromium or chrome browser with security disability mode to allow the Cross-Origin Resource Sharing (CORS)\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">For that open windows run command and paste <\/span><b><i>chrome.exe &#8211;disable-web-security &#8211;user-data-dir=c:\\my-chrome-data\\data<\/i><\/b><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Hit enter chrome will be opened in disabled security disabled mode paste the <em>index.html<\/em> path here to run the sdk<\/li>\n<\/ul>\n<\/div><\/div><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 class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h3><span class=\"ez-toc-section\" id=\"Passing_data_via_webSDK\"><\/span><span style=\"font-weight: 400;\">Passing data via webSDK<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You can pass additional information of the user accessing the channel by adding the custom data at <\/span><b>botInfo<\/b><span style=\"font-weight: 400;\"> inside the <\/span><i><span style=\"font-weight: 400;\">SearchAssist-config.js <\/span><\/i><span style=\"font-weight: 400;\">file.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">botOptionsFindly.botInfo = { <\/span><i><span style=\"font-weight: 400;\">chatBot: \"&lt;App Name&gt;\", \r\n                            \"taskBotId\": \"&lt;App ID&gt;\"<\/span><\/i><span style=\"font-weight: 400;\">,\r\n                            \"customData\":{<\/span>\r\n<span style=\"font-weight: 400;\">         } };<\/span><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Example\"><\/span><span style=\"font-weight: 400;\">Example:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre>botOptionsFindly.botInfo = {<i><span style=\"font-weight: 400;\">chatBot: \"&lt;App Name&gt;\", \r\n                            \"taskBotId\": \"&lt;App ID&gt;\"<\/span><\/i><span style=\"font-weight: 400;\">,\r\n                            \"customData\":{\"test\":\"s\"} \r\n                       };<\/span>\r\n<\/pre>\n<\/div><\/div><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 class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h3><span class=\"ez-toc-section\" id=\"Commonly_Encountered_Errors\"><\/span><span style=\"font-weight: 400;\">Commonly Encountered Errors<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><i><span style=\"font-weight: 400;\">A wrong URL<\/span><\/i><span style=\"font-weight: 400;\"> is given in index.html, users see a 404 error. Double-check the URL. URL changes depending on whether you are hosting the bot on your own web SDK or on SearchAssist\u2019s web SDK.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><i><span style=\"font-weight: 400;\">Not found: <\/span><\/i><span style=\"font-weight: 400;\">User sees this error when either wrong clientID or no clientID is given. Check the correct ClientID from Business Portal -&gt; Manage -&gt; <\/span><b>Web\/Mobile Client Channel<\/b><span style=\"font-weight: 400;\"> page on the <\/span><b>Channels<\/b><span style=\"font-weight: 400;\"> menu<\/span>\n<pre><span style=\"font-weight: 400;\">botOptions.clientId = \u201c{clientID}\u201d; \/\/ secure client-id<\/span><\/pre>\n<\/li>\n<li><i><span style=\"font-weight: 400;\">error verifying the jwt: the <\/span><\/i><span style=\"font-weight: 400;\">Wrong clientSecret is given in index.html: Check the correct clientSecret you get from Business Portal -&gt; Manage -&gt; <\/span><b>Web\/Mobile Client Channel<\/b><span style=\"font-weight: 400;\"> page on the <\/span><b>Channels<\/b><span style=\"font-weight: 400;\"> menu<\/span>\n<pre><span style=\"font-weight: 400;\">\u201cclientSecret\u201d: \"{clientSecret}\u201d \/\/provide clientSecret here<\/span><\/pre>\n<\/li>\n<\/ul>\n<\/div><\/div><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>[vc_raw_html]JTNDZGl2JTIwY2xhc3MlM0QlMjJ3LXBvc3QtZWxtJTIwcG9zdF9uYXZpZ2F0aW9uJTIwbGF5b3V0X3NpbXBsZSUyMGludl9mYWxzZSUyMiUzRSUwQSUwOSUzQ2ElMjBjbGFzcyUzRCUyMnBvc3RfbmF2aWdhdGlvbi1pdGVtJTIwb3JkZXJfZmlyc3QlMjB0b19wcmV2JTIyJTIwaHJlZiUzRCUyMiUyRlNlYXJjaEFzc2lzdCUyRmFwcC1tYW5hZ2VtZW50JTJGbWFuYWdlLWFwcGxpY2F0aW9uJTJGJTIyJTNFJTNDJTJGcCUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIycG9zdF9uYXZpZ2F0aW9uLWl0ZW0tYXJyb3clMjIlM0UlM0MlMkZkaXYlM0UlMEElM0NkaXYlMjBjbGFzcyUzRCUyMnBvc3RfbmF2aWdhdGlvbi1pdGVtLW1ldGElMjIlM0VQcmV2aW91cyUzQyUyRmRpdiUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIycG9zdF9uYXZpZ2F0aW9uLWl0ZW0tdGl0bGUlMjIlM0UlM0NzcGFuJTNFQXBwJTIwTWFuYWdlbWVudCUzQyUyRnNwYW4lM0UlM0MlMkZkaXYlM0UlMEElM0NwJTNFJTNDJTJGYSUzRSUzQ2JyJTIwJTJGJTNFJTBBJTNDYSUyMGNsYXNzJTNEJTIycG9zdF9uYXZpZ2F0aW9uLWl0ZW0lMjBvcmRlcl9zZWNvbmQlMjB0b19uZXh0JTIyJTIwaHJlZiUzRCUyMiUyMyUyMiUzRSUzQyUyRnAlM0UlMEElM0NkaXYlMjBjbGFzcyUzRCUyMnBvc3RfbmF2aWdhdGlvbi1pdGVtLW1ldGElMjIlM0UlM0MlMkZkaXYlM0UlMEElM0NkaXYlMjBjbGFzcyUzRCUyMnBvc3RfbmF2aWdhdGlvbi1pdGVtLXRpdGxlJTIyJTNFJTNDJTJGZGl2JTNFJTBBJTNDcCUzRSUzQyUyRmElM0UlM0MlMkZkaXYlM0U=[\/vc_raw_html]<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><\/section>\n","protected":false},"excerpt":{"rendered":"This tutorial is an end-to-end walkthrough for setting up and running an instance of the SearchAssist Web SDK, which is a collection of libraries that you can use to integrate SearchAssist apps with your own web applications. Prerequisites The following list describes the general steps you will take to install and configure the Web SDK....","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/posts\/1086"}],"collection":[{"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/comments?post=1086"}],"version-history":[{"count":4,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/posts\/1086\/revisions"}],"predecessor-version":[{"id":1238,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/posts\/1086\/revisions\/1238"}],"wp:attachment":[{"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/media?parent=1086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/categories?post=1086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisite.korebots.com\/SearchAssist\/wp-json\/wp\/v2\/tags?post=1086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}