{"id":23376,"date":"2020-04-04T04:34:20","date_gmt":"2020-04-04T03:34:20","guid":{"rendered":"https:\/\/developer.kore.ai\/v7-3\/?p=23376"},"modified":"2020-04-16T10:10:31","modified_gmt":"2020-04-16T09:10:31","slug":"how-to-configure-digital-views","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v7-3\/docs\/bots\/how-tos\/how-to-configure-digital-views\/","title":{"rendered":"How to Configure Digital Views"},"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>In this How-To, we will explore a scenario in a Banking Bot, where with just one click user can view his\/her account details. We will see how this Digital View can be presented using Panels and Widgets. Widgets can be used to trigger Dialog Tasks and display appropriate messages and Panel can be used to hold these Widgets.<br \/>\nWe will also see how the Panel can be hosted on Web\/Mobile Client using the Widget SDK.<\/p>\n<p>For details on what Digital Views are and how it is implemented in the Kore.ai Bots platform, <a href=\"\/v7-3\/docs\/bots\/bot-builder-tool\/digital-views\/\" target=\"_blank\" rel=\"noopener noreferrer\">refer here<\/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=\"Problem_Statement\">Problem Statement<\/span><\/h2>\n<p>Consider a Banking Bot trying to address the following scenarios:<\/p>\n<div style=\"width: 410px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-23376-1\" width=\"410\" height=\"528\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"\/wp-content\/uploads\/sites\/15\/WP_howto.mp4?_=1\" \/><a href=\"\/wp-content\/uploads\/sites\/15\/WP_howto.mp4\">\/wp-content\/uploads\/sites\/15\/WP_howto.mp4<\/a><\/video><\/div>\n<p>This document gives a detailed step-by-step approach to achieving all the above-mentioned scenarios using &#8211; Digital Views (Panels, Widgets), Widget SDK and Web\/Mobile Client.<\/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=\"Pre-requisites\">Pre-requisites<\/span><\/h2>\n<ul>\n<li>Bot building knowledge<\/li>\n<li>A <a href=\"\/v7-3\/docs\/bots\/how-tos\/creating-a-banking-bot\/\" target=\"_blank\" rel=\"noopener noreferrer\">Banking Bot<\/a> with a dialog as mentioned below:\n<ul>\n<li><a href=\"\/v7-3\/docs\/bots\/how-tos\/creating-a-banking-bot\/#Get_Balance_Intent\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Get Balance<\/strong><\/a> &#8211; Dialog task prompting the user for their Account Number and Account Type and displaying the available balance in the account.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_dialog.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22889\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_dialog.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/li>\n<\/ul>\n<\/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=\"Configurations\">Configurations<\/span><\/h2>\n<p>Let us consider each of the following scenarios one by one:<\/p>\n<ol>\n<li>Dialog Task to display balance in a given account using Widget SDK channel.<\/li>\n<li>Widgets to trigger the above dialog task and a Panel set with the widgets.<\/li>\n<li>Panel to hold a widget displaying static JSON templace message.<\/li>\n<\/ol>\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<h3><span class=\"ez-toc-section\" id=\"Message_Template\">Message Template<\/span><\/h3>\n<p>First, the Dialog task which would be triggered from the Widget should have a message definition for the Widget SDK channel.<\/p>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_message.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22897\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_message.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/p>\n<p>We are using the following message to display the account details:<\/p>\n<pre>var output = 'The Balance in your' + context.entities.AccountType + ' account is ' + context.GetAccountBalance.response.body.Balance;\r\nvar message = {\r\n    \"elements\": [\r\n        {\r\n            \"title\": \"Account View\",\r\n            \"sub_title\": output,\r\n            \"icon\": \"https:\/\/kore.ai\/wp-content\/uploads\/sites\/15\/banking-home.png\",\r\n        }\r\n    ]\r\n};\r\nprint(JSON.stringify(message));<\/pre>\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<h3><span class=\"ez-toc-section\" id=\"Widgets_Configuration\">Widgets Configuration<\/span><\/h3>\n<h4>Dialog Task Widgets<\/h4>\n<p>We will be creating two Widgets to trigger a Dialog Task.<\/p>\n<p><strong>Current Account:<\/strong><\/p>\n<p>First, let us see how to configure a Widget to display balance from the current account of the user.<\/p>\n<ul>\n<li>From the left navigation menu, under\u00a0<strong>Bot Tasks<\/strong> open\u00a0<strong>Digital Views<\/strong>.<\/li>\n<li>Click the <strong>Create Widget<\/strong> button.<\/li>\n<li>Give a Widget Name and a Display Name.<\/li>\n<li>Set the\u00a0<strong>Source<\/strong>, we are triggering Dialog Task, hence select\u00a0<em>Dialog Task<\/em>.<\/li>\n<li><strong>Select Dialog Task<\/strong> as\u00a0<em>Get Balance<\/em>, as per our use case<\/li>\n<li>In the\u00a0<strong>Entity Assignment<\/strong>, set the following entities (you can select from the drop box that appears as you type) as per the Dialog Task requirement:\n<ul>\n<li><strong>AccountType<\/strong> to <em>current;<\/em><\/li>\n<li><strong>AccountNumber<\/strong> to\u00a0<em>1<\/em>.<br \/>\nYou can use the\u00a0<strong>Open Dialog Task<\/strong> icon, next to the select Dialog Task drop down, to open the dialog and check the entities needed.<\/li>\n<\/ul>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_widgetentity.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22900\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_widgetentity.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/li>\n<li><strong>Save<\/strong> the widget.<\/li>\n<li><strong>Edit<\/strong> the widget and click\u00a0<strong>Run &amp; Preview<\/strong> to see the widget output.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_widgetreview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22899\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_widgetreview.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/li>\n<li><strong>Save as preview<\/strong> will set the output as the thumbnail against the widget.<\/li>\n<\/ul>\n<p><strong>Savings Account<\/strong><br \/>\nRepeat the above steps for Account View from\u00a0<em>savings<\/em> account of the same account number.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_widgets.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22902\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_widgets.png\" alt=\"\" width=\"443\" height=\"539\" \/><\/a><\/p>\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<h3><span class=\"ez-toc-section\" id=\"Panel_Configuration\">Panel Configuration<\/span><\/h3>\n<p>The Widgets thus created need to be attached to a Panel for runtime display and execution.<\/p>\n<ol>\n<li>Click the <strong>Create Panel<\/strong> button to create a Panel.<\/li>\n<li>In the <strong>New Panel<\/strong> widnow, enter Panel Name, Display Name and a URL for Icon.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_panel.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22904\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_panel.png\" alt=\"\" width=\"523\" height=\"451\" \/><\/a><\/li>\n<li>Click the\u00a0<strong>Add Widget<\/strong> button to open the\u00a0<strong>Panel Management<\/strong> window.<\/li>\n<li>Use the\u00a0<strong>Add Widget<\/strong> to select and add the Widgets that we want to display, in this case Account Balance and Current Account widgets.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_panelwidget.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22905\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_panelwidget.png\" alt=\"\" width=\"523\" height=\"407\" \/><\/a><\/li>\n<li>Use the\u00a0<strong>Test<\/strong> button to see the widgets in action.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_paneltest.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22911\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_paneltest.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/li>\n<\/ol>\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<h3><span class=\"ez-toc-section\" id=\"Panel_with_JSON_Widgets\">Panel with JSON Widgets<\/span><\/h3>\n<p>We will see how to create Widgets with static JSON content. We will use a JSON to display a pie chart.<\/p>\n<ol>\n<li>Click on\u00a0<strong>Create Panel<\/strong> to create a new panel and name it\u00a0<strong>JSON Example<\/strong>.<\/li>\n<li>Use the\u00a0<strong>more<\/strong> icon and select\u00a0<strong>Panel Management<\/strong>, there you will find the option to\u00a0<strong>Create Widget<\/strong>. Click on that.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_panel_createwidget.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22908\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_panel_createwidget.png\" alt=\"\" width=\"527\" height=\"509\" \/><\/a><\/li>\n<li>In the\u00a0<strong>New Widget<\/strong> dialog, enter the Name, and set the source to JSON.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_panel_widgetJSON.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22909\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_panel_widgetJSON.png\" alt=\"\" width=\"527\" height=\"765\" \/><\/a><\/li>\n<li>Enter the following in the JavaScript Editor. This is a message template to display a pie chart with a break up for amounts spent under various heads like travel, food, and accommodation. For more on supported message templates, <a href=\"\/v7-3\/docs\/bots\/sdks\/widget-sdk-message-formatting-and-templates\/\" target=\"_blank\" rel=\"noopener noreferrer\">refer here<\/a>.\n<pre class=\"lang:default decode:true \">var message =\r\n{\r\n      \"templateType\": \"piechart\",\r\n      \"pie_type\": \"regular\",\r\n      \"title\": \"Summary\",\r\n      \"description\": \"monthly report\",\r\n      \"elements\": [\r\n        {\r\n          \"title\": \"Airlines\",\r\n          \"value\": \"1264.0\",\r\n          \"displayValue\": \"$ 1,234\"\r\n        },\r\n        {\r\n          \"title\": \"Hotels\",\r\n          \"value\": \"568.10\",\r\n          \"displayValue\": \"$ 568\"\r\n        },\r\n        {\r\n          \"title\": \"Food\",\r\n          \"value\": \"324.50\",\r\n          \"displayValue\": \"$ 324\"\r\n        }\r\n      ]\r\n    };\r\nprint(JSON.stringify(message));<\/pre>\n<\/li>\n<li><strong>Test<\/strong> the panel and you will see both the panel icons, click on each to see them in action.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_paneltest_final.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22921\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_paneltest_final.png\" alt=\"\" width=\"568\" height=\"349\" \/><\/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=\"Publish\">Publish<\/span><\/h2>\n<p>To publish the Bot first enable channels:<\/p>\n<ol>\n<li>From left navigation menu, select\u00a0<strong>Channel<\/strong> for publishing. For our use case we will select both Web\/Mobile Client and Widget SDK channels.<\/li>\n<li>Select the channels and from\u00a0<strong>Configurations<\/strong> tab, make a note of the\u00a0<strong>Bot Name<\/strong>, <strong>Bot Id<\/strong>, <strong>Client Id<\/strong> and <strong>Client Secret<\/strong>.<\/li>\n<li>From left navigation menu, select\u00a0<strong>Publish<\/strong> option. Under Tasks &amp; languages section, ensure that the Widget and Panels we developed are selected for publication.<\/li>\n<li><strong>Proceed<\/strong> with the Publish.<\/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=\"Hosting\">Hosting<\/span><\/h2>\n<p>We will be hosting the Panels in the web\/mobile client. <a href=\"\/v7-3\/docs\/bots\/sdks\/kore-ai-widget-sdk-tutorial\/\" target=\"_blank\" rel=\"noopener noreferrer\">See here<\/a> for more details on the Widget SDK usage.<\/p>\n<ol>\n<li>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\u00a0<strong>Download<\/strong>.<\/li>\n<li>Extract all files to the\u00a0<em>\u2026\/SDKApp\/sdk<\/em>\u00a0folder.<\/li>\n<li>Open the above SDK folder, and traverse to\u00a0<em>UI<\/em> folder.<\/li>\n<li>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 copied\u00a0 in\u00a0 above\u00a0 section.\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<p>Make other changes as per your requirements.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_hosting_web.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22915\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_hosting_web.png\" alt=\"\" width=\"1137\" height=\"392\" \/><\/a><\/li>\n<li>Open the <code>kore-widgets-config.js<\/code><\/li>\n<li>Configure your <code>botOptionsWiz<\/code> with the \u2018<em>Widget SDK<\/em>\u2019 channel configurations copied\u00a0 in\u00a0 above\u00a0 section.\n<ul>\n<li><code>botOptionsWiz.botInfo<\/code><\/li>\n<li><code>botOptionsWiz.clientId<\/code><\/li>\n<li><code>botOptionsWiz.clientSecret<\/code><\/li>\n<\/ul>\n<p>Make other changes as per your requirements.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_hosting_widget.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22916\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_hosting_widget.png\" alt=\"\" width=\"1093\" height=\"332\" \/><\/a><\/li>\n<li>Open the <code>index_widgets_chat.html<\/code> file in the browser and see the chat window along with the widgets.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/15\/PW_UC_hosting.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22914\" src=\"\/wp-content\/uploads\/sites\/15\/PW_UC_hosting.png\" alt=\"\" width=\"1366\" height=\"768\" \/><\/a><\/li>\n<li>If you want to host the Panels individually use the <code>index_widgets.html<\/code> file. See the GitHub for hosting the same in your web site.<\/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":"In this How-To, we will explore a scenario in a Banking Bot, where with just one click user can view his\/her account details. We will see how this Digital View can be presented using Panels and Widgets. Widgets can be used to trigger Dialog Tasks and display appropriate messages and Panel can be used to...","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-23376","post","type-post","status-publish","format-standard","hentry","category-how-tos"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v7-3\/wp-json\/wp\/v2\/posts\/23376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.kore.ai\/v7-3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developer.kore.ai\/v7-3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-3\/wp-json\/wp\/v2\/comments?post=23376"}],"version-history":[{"count":3,"href":"https:\/\/developer.kore.ai\/v7-3\/wp-json\/wp\/v2\/posts\/23376\/revisions"}],"predecessor-version":[{"id":23496,"href":"https:\/\/developer.kore.ai\/v7-3\/wp-json\/wp\/v2\/posts\/23376\/revisions\/23496"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v7-3\/wp-json\/wp\/v2\/media?parent=23376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-3\/wp-json\/wp\/v2\/categories?post=23376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-3\/wp-json\/wp\/v2\/tags?post=23376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}