{"id":23185,"date":"2020-02-07T12:22:00","date_gmt":"2020-02-07T12:22:00","guid":{"rendered":"https:\/\/developer.kore.ai\/v10-1\/?p=23185"},"modified":"2020-04-04T04:42:46","modified_gmt":"2020-04-04T03:42:46","slug":"kore-ai-widget-sdk-tutorial","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/sdks\/kore-ai-widget-sdk-tutorial\/","title":{"rendered":"Kore.ai Widget 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 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>This tutorial is an end-to-end walkthrough for setting up and running an instance of the Kore.ai Bots Web SDK to host widgets for presenting information from your bots and enabling interaction with your bots.<\/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=\"Widget_SDK_Overview\">Widget SDK Overview<\/span><\/h2>\n<p>There are two ways to host the Kore.ai Widget SDK:<\/p>\n<ul>\n<li>co-host them along with the WebSDK &#8211; enable and configure both Web\/Mobile Client and Widget SDK channels; or<\/li>\n<li>independently &#8211; enable and configure just the Widget SDK channel.<\/li>\n<\/ul>\n<p>In this tutorial, we will be listing the instructions for both the variations.<\/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=\"Installing_and_Running_the_Koreai_Widget_SDK\">Installing and Running the Kore.ai Widget SDK<\/span><\/h2>\n<p>This section provides detailed steps on how to run a Kore.ai bot using the Widget SDK and a test application running on your computer localhost server.<\/p>\n<p><strong>Pre-requisites<\/strong><\/p>\n<ol>\n<li>To get started, you will need to build a bot with Digital Views to run in the test application (<a href=\"\/docs\/bots\/bot-builder-tool\/digital-views\/\" target=\"_blank\" rel=\"noopener noreferrer\">see here for more on Digital Views<\/a>).<\/li>\n<li>You need enable the Widget SDK channel for the above bot by either creating a new client app or use an existing client app and define the channel settings. <a href=\"\/docs\/bots\/bot-builder-tool\/channel-enablement\/adding-the-widget-sdk-channel\/\" target=\"_blank\" rel=\"noopener noreferrer\">See here<\/a> for a detailed explanation of the steps.<\/li>\n<li>If you want to co-host the Panels &amp; Widgets along with the WebSDK, you need enable the Web\/Mobile Client channel for the above bot by either creating a new client app or use an existing client app and define the channel settings. <a href=\"\/docs\/bots\/sdks\/kore-ai-web-sdk-tutorial\/\" target=\"_blank\" rel=\"noopener noreferrer\">See here<\/a> for a detailed explanation of the steps.<\/li>\n<li>Publish the bot.<\/li>\n<li>From the <strong>Channels -&gt; Configured Channels<\/strong> click to open the configured <strong>Widget SDK<\/strong> channel. From the Configurations tab make a note of the following, we will be using them later in the Widget SDK setup:\n<ul>\n<li>Bot Name<\/li>\n<li>Bot ID<\/li>\n<li>Client ID<\/li>\n<li>Client Secret<\/li>\n<\/ul>\n<\/li>\n<li>If you want to co-host Panels &amp; Widgets with Web\/Mobile SDK, then from the <strong>Channels -&gt; Configured Channels<\/strong> click to open the configured <strong>Web\/Mobile Client<\/strong> channel. From the Configurations tab make a note of the following, we will be using them later in the Widget SDK setup:\n<ul>\n<li>Bot Name<\/li>\n<li>Bot ID<\/li>\n<li>Client ID<\/li>\n<li>Client Secret<\/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<p><em>Next step would be to download, uncompress, install and configure the software packages required for the Widget SDK and a test application to run the bot locally on your localhost server.<\/em><\/p>\n<p>Based upon your requirement see the appropriate sections below:<\/p>\n<ul>\n<li>host Panels individually; or<\/li>\n<li>co-host Panels with Web SDK.<\/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<p><strong>Setup to host Panels individually<\/strong>:<\/p>\n<p>To download the Kore.ai Widget SDK, go to <a href=\"https:\/\/github.com\/Koredotcom\/web-kore-sdk\">https:\/\/github.com\/Koredotcom\/web-kore-sdk<\/a>, and then click <strong>Download<\/strong>. Extract all files to the <span style=\"color: #0000ff\"><em>&#8230;\/SDKApp\/sdk<\/em><\/span> folder.<\/p>\n<ol>\n<li>Open the <em>UI<\/em> folder.<\/li>\n<li>Locate and open the <code>kore-widgets-config.js<\/code><\/li>\n<li>Configure your <code>botOptions<\/code>\u00a0with the \u2018<em>Widget SDK<\/em>\u2019 channel configurations created in bot builder:\n<ul>\n<li><code>botOptions.botInfo<\/code><\/li>\n<li><code>botOptions.clientId<\/code><\/li>\n<li><code>botOptions.clientSecret<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Open the <code>index_widgets.html<\/code> file in the browser and see the Panels displayed. You can add this <code>&lt;div&gt;<\/code> element to your website html page to host the Panels there.<\/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>Setup to co-host Panels with Web\/Mobile SDK<\/strong>:<\/p>\n<p>To download the Kore.ai Widget SDK, go to <a href=\"https:\/\/github.com\/Koredotcom\/web-kore-sdk\">https:\/\/github.com\/Koredotcom\/web-kore-sdk<\/a>, and then click <strong>Download<\/strong>. Extract all files to the <span style=\"color: #0000ff\"><em>&#8230;\/SDKApp\/sdk<\/em><\/span> folder.<\/p>\n<ol>\n<li>Open\u00a0<em>UI<\/em> folder.<\/li>\n<li>Locate and open the <code>kore-config.js<\/code><\/li>\n<li>Configure your <code>botOptions<\/code> with the \u2018<em>web\/mobile client<\/em>\u2019 channel configurations created in bot builder\n<ul>\n<li><code>botOptions.botInfo<\/code><\/li>\n<li><code>botOptions.clientId<\/code><\/li>\n<li><code>botOptions.clientSecret<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Open the <code>kore-widgets-config.js<\/code><\/li>\n<li>Configure your <code>botOptions<\/code>\u00a0with the \u2018<em>Widget SDK<\/em>\u2019 channel configurations created in bot builder\n<ul>\n<li><code>botOptions.botInfo<\/code><\/li>\n<li><code>botOptions.clientId<\/code><\/li>\n<li><code>botOptions.clientSecret<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Open the <code>index_widgets_chat.html<\/code> file in the browser and see the chat window along with the widgets.<\/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":"This tutorial is an end-to-end walkthrough for setting up and running an instance of the Kore.ai Bots Web SDK to host widgets for presenting information from your bots and enabling interaction with your bots. Widget SDK Overview There are two ways to host the Kore.ai Widget SDK: co-host them along with the WebSDK - enable...","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":["post-23185","post","type-post","status-publish","format-standard","hentry","category-sdks"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/23185","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=23185"}],"version-history":[{"count":4,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/23185\/revisions"}],"predecessor-version":[{"id":23382,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/23185\/revisions\/23382"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/media?parent=23185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/categories?post=23185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/tags?post=23185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}