{"id":48004,"date":"2022-10-04T16:53:33","date_gmt":"2022-10-04T15:53:33","guid":{"rendered":"https:\/\/developer.kore.ai\/v10-1\/?p=48004"},"modified":"2022-10-04T19:07:47","modified_gmt":"2022-10-04T18:07:47","slug":"travel-va-configure-digital-views","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/how-tos\/travel-planing-assistant\/travel-va-configure-digital-views\/","title":{"rendered":"Travel VA: Configure Digital Views"},"content":{"rendered":"<p><span style=\"font-weight: 400\">In this How-To, we will explore a scenario in a Travel Planning Assistant, where with just one click a user can view upcoming bookings. 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; while Panels can be used as containers to hold these Widgets.<\/span><\/p>\n<p><span style=\"font-weight: 400\">We will also see how the Panel can be hosted on a Web\/Mobile Client using the Widget SDK.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For details on what Digital Views are and how they are implemented in the Kore.ai XO Platform, <\/span><a href=\"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/bot-builder-tool\/digital-views\/\"><span style=\"font-weight: 400\">refer here<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>\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>\n<h1><span class=\"ez-toc-section\" id=\"Problem_Statement\"><span style=\"font-weight: 400\">Problem Statement<\/span><\/span><\/h1>\n<p><span style=\"font-weight: 400\">Consider a Travel Planning assistant helping a user retrieve upcoming bookings. Rather than displaying this in text form, the assistant can use Digital Views to provide the information more effectively and in a more visually appealing manner.<\/span><\/p>\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>\n<h1><span class=\"ez-toc-section\" id=\"Prerequisites\"><span style=\"font-weight: 400\">Prerequisites<\/span><\/span><\/h1>\n<p><span style=\"font-weight: 400\">To go through these configurations, you need to know at least the basics of the following XO Platform features:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\"><a href=\"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/how-tos\/travel-planing-assistant\/create-a-travel-virtual-assistant\/\" target=\"_blank\" rel=\"noopener noreferrer\">Building a Virtual Assistant<\/a>:<\/span><span style=\"font-weight: 400\">\u00a0This is because your assistant needs to have been already built when you begin working on your Views.<\/span><\/li>\n<li style=\"font-weight: 400\"><a href=\"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/bot-builder-tool\/digital-views\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400\">Working with Digital Views<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">You also need a Dialog Task that handles upcoming bookings. Read more about <\/span><span style=\"font-weight: 400\">working with the Dialog Builder<\/span><span style=\"font-weight: 400\">.<\/span><\/p>\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>\n<h1><span class=\"ez-toc-section\" id=\"Configurations\"><span style=\"font-weight: 400\">Configurations<\/span><\/span><\/h1>\n<p><span style=\"font-weight: 400\">Let us consider each of the following scenarios one by one:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Dialog Task to display Upcoming Bookings, using the Widget SDK Channel.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Widgets to trigger the above dialog task and a Panel set with the widgets.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">A Panel to hold a widget displaying a static JSON template message.<\/span><\/li>\n<\/ol>\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>\n<h2><span class=\"ez-toc-section\" id=\"Message_Template\"><span style=\"font-weight: 400\">Message Template<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400\">First, the Dialog task which would be triggered from the Widget should have a message definition for the Widget SDK channel.<\/span><\/p>\n<p><span style=\"font-weight: 400\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163426\/widgetsdk-channel-message.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-48000\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163426\/widgetsdk-channel-message.png\" alt=\"\" width=\"673\" height=\"300\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163426\/widgetsdk-channel-message.png 1922w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163426\/widgetsdk-channel-message-300x134.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163426\/widgetsdk-channel-message-1024x456.png 1024w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/a><\/span><\/p>\n<p><span style=\"font-weight: 400\">We are using the following message to display the upcoming bookings.<\/span><\/p>\n<pre><code>var lastBooking, dateAfterFifteenDays<\/code><br \/><code>lastBooking = BotUserSession.get('bookedFlightInfo')<\/code><br \/><code>if(lastBooking === undefined || lastBooking === null) {<\/code><br \/><code>lastBooking = {}<\/code><br \/><code>dateAfterFifteenDays = koreUtil.moment().add(15, 'days').format('D MMM YYYY')<\/code><br \/><code>lastBooking['travelDate'] = dateAfterFifteenDays<\/code><br \/><code>lastBooking['passengerCount'] = 1<\/code><br \/><code>lastBooking['flyingFrom'] = 'Orlando, FL, USA'<\/code><br \/><code>lastBooking['flyingTo'] = 'New York, NY, USA'<\/code><br \/><code>}<\/code><br \/><code>var message = {<\/code><br \/><code>\"templateType\": \"List\",<\/code><br \/><code>\"widgetName\": \"Upcoming Bookings\",<\/code><br \/><code>\"description\": \"Shows future bookings\",<\/code><br \/><code>\"headerOptions\": {<\/code><br \/><code>},<\/code><br \/><code>\"elements\": [<\/code><br \/><code>{<\/code><br \/><code>\"image\": {<\/code><br \/><code>\"image_type\": \"image\",<\/code><br \/><code>\"image_src\": \"https:\/\/demo.kore.ai\/barefoot\/sites\/default\/files\/demo_uploads\/panelwidgetupcoming.png\"<\/code><br \/><code>},<\/code><br \/><code>\"title\": \"Date of Journey: \" + lastBooking['travelDate'],<\/code><br \/><code>\"subtitle\": \"Passengers: \" + lastBooking['passengerCount'],<\/code><br \/><code>\"value\":<\/code><br \/><code>{<\/code><br \/><code>\"layout\": <\/code><br \/><code>{<\/code><br \/><code>\"align\": \"centre\",<\/code><br \/><code>\"colSize\": \"25%\"<\/code><br \/><code>},<\/code><br \/><code>\"type\":\"button\",<\/code><br \/><code>\"text\":\"\",<\/code><br \/><code>\"button\": <\/code><br \/><code>{<\/code><br \/><code>\"title\": \"Web CheckIn\",<\/code><br \/><code>\"theme\": \"#3377FF\",<\/code><br \/><code>\"type\": \"postback\",<\/code><br \/><code>\"payload\": \"I want to do web check-in\",\/\/+title,<\/code><br \/><code>\"utterance\": \"I want to do web check-in\"\/\/+title<\/code><br \/><code>}<\/code><br \/><code>},<\/code><br \/><code>\"details\": [<\/code><br \/><code>{<\/code><br \/><code>\"image\": {<\/code><br \/><code>\"image_type\": \"image\",<\/code><br \/><code>\"image_src\": \"https:\/\/demo.kore.ai\/barefoot\/sites\/default\/files\/demo_uploads\/Panelfrom.png\"<\/code><br \/><code>},<\/code><br \/><code>\"description\": \"Flying from: \" + lastBooking['flyingFrom']<\/code><br \/><code>},<\/code><br \/><code>{<\/code><br \/><code>\"image\": {<\/code><br \/><code>\"image_type\": \"image\",<\/code><br \/><code>\"image_src\": \"https:\/\/demo.kore.ai\/barefoot\/sites\/default\/files\/demo_uploads\/Panelto.png\"<\/code><br \/><code>},<\/code><br \/><code>\"description\": \"Flying to: \" + lastBooking['flyingTo']<\/code><br \/><code>}<\/code><br \/><code>]<\/code><br \/><code>}<\/code><br \/><code>]<\/code><br \/><code>}<\/code><br \/><code>print(JSON.stringify(message));<\/code><\/pre>\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>\n<h2><span class=\"ez-toc-section\" id=\"Widget_Configuration\"><span style=\"font-weight: 400\">Widget Configuration<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400\">We will be creating a Widget that triggers a Dialog Task in order to display upcoming bookings for a user. To do so, let us follow the steps below:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Ensure that <\/span><strong>Build<\/strong><span style=\"font-weight: 400\"> is selected from the top menu.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">From under <\/span><strong>Digital Skills<\/strong><span style=\"font-weight: 400\"> open <\/span><strong>Digital Views<\/strong><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Click the <\/span><strong>Create Widget<\/strong><span style=\"font-weight: 400\"> button.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Provide a <\/span><strong>Widget Name<\/strong><span style=\"font-weight: 400\"> and a <\/span><strong>Display Name<\/strong><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Set the <\/span><strong>Source<\/strong><span style=\"font-weight: 400\">, we are triggering Dialog Task, hence select <\/span><em><span style=\"font-weight: 400\">Dialog Task<\/span><\/em><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><strong>Select Dialog Task<\/strong><span style=\"font-weight: 400\"> as <\/span><em><span style=\"font-weight: 400\">Upcoming Bookings<\/span><\/em><span style=\"font-weight: 400\">, as per our use case<\/span><\/li>\n<li style=\"font-weight: 400\"><strong>Save<\/strong><span style=\"font-weight: 400\"> the widget.<\/span><\/li>\n<li style=\"font-weight: 400\"><strong>Edit<\/strong><span style=\"font-weight: 400\"> the widget and click <\/span><strong>Run &amp; Preview<\/strong><span style=\"font-weight: 400\"> to see the widget output.<\/span><\/li>\n<li style=\"font-weight: 400\"><strong>Save as preview<\/strong><span style=\"font-weight: 400\"> will set the output as the thumbnail against the widget.<br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163326\/add-widget.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-47964\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163326\/add-widget.png\" alt=\"\" width=\"366\" height=\"623\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163326\/add-widget.png 627w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163326\/add-widget-176x300.png 176w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163326\/add-widget-602x1024.png 602w\" sizes=\"auto, (max-width: 366px) 100vw, 366px\" \/><\/a><br \/><\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Once configured, your Widget might look like this:<\/span><\/p>\n<p><span style=\"font-weight: 400\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163420\/widget-preview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-47997\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163420\/widget-preview.png\" alt=\"\" width=\"499\" height=\"181\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163420\/widget-preview.png 499w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163420\/widget-preview-300x109.png 300w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/a><\/span><\/p>\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>\n<h2><span class=\"ez-toc-section\" id=\"Panel_Configuration\"><span style=\"font-weight: 400\">Panel Configuration<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400\">The Widgets thus created need to be attached to a Panel for runtime display and execution.<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Click the <\/span><strong>Create Panel<\/strong><span style=\"font-weight: 400\"> button to create a Panel. We will be creating a <\/span><em><span style=\"font-weight: 400\">Bookings <\/span><\/em><span style=\"font-weight: 400\">Panel, within which to integrate the Widget we just created.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">In the <\/span><strong>New Panel<\/strong><span style=\"font-weight: 400\"> window, enter Panel Name, Display Name and a URL for its Icon.<br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163348\/new-panel-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-47973\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163348\/new-panel-1.png\" alt=\"\" width=\"411\" height=\"553\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163348\/new-panel-1.png 627w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163348\/new-panel-1-223x300.png 223w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/a><\/span><span style=\"font-weight: 400\"><br \/><\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Click the <\/span><strong>Add Widget<\/strong><span style=\"font-weight: 400\"> button to open the <\/span><strong>Panel Management<\/strong><span style=\"font-weight: 400\"> window.<br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163335\/add-widget-to-panel.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-47967\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163335\/add-widget-to-panel.png\" alt=\"\" width=\"603\" height=\"140\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163335\/add-widget-to-panel.png 801w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163335\/add-widget-to-panel-300x70.png 300w\" sizes=\"auto, (max-width: 603px) 100vw, 603px\" \/><\/a><br \/><\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Use the <\/span><strong>Add Widget<\/strong><span style=\"font-weight: 400\"> option to select and add the Widgets that we want to display, in this case the Upcoming Bookings widget. You can use this window to add further widgets to the Bookings panel if you like.<br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163358\/select-widget-add-to-panel.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-47982\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163358\/select-widget-add-to-panel.png\" alt=\"\" width=\"594\" height=\"257\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163358\/select-widget-add-to-panel.png 629w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163358\/select-widget-add-to-panel-300x130.png 300w\" sizes=\"auto, (max-width: 594px) 100vw, 594px\" \/><\/a><\/span><span style=\"font-weight: 400\"><br \/><\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Use the <\/span><strong>Test<\/strong><span style=\"font-weight: 400\"> button to see the widget in action. This will open the <\/span><strong>Talk to Bot <\/strong><span style=\"font-weight: 400\">feature, where you can ask the VA for Upcoming Bookings. If your setup is successful, you should be shown the widget we just created.\u00a0<\/span><\/li>\n<\/ol>\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>\n<h2><span class=\"ez-toc-section\" id=\"Panel_with_JSON_Widgets\"><span style=\"font-weight: 400\">Panel with JSON Widgets<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400\">Next, we will see how to create Widgets with static JSON content. We will use a JSON to display a pie chart.<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Create a Widget and call it <\/span><strong>Travel Spend.<\/strong><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">In the <\/span><strong>New Widget<\/strong><span style=\"font-weight: 400\"> dialog, enter the Name, and set the source to JSON.<br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163417\/travel-spend-widget.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-47994\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163417\/travel-spend-widget.png\" alt=\"\" width=\"642\" height=\"392\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163417\/travel-spend-widget.png 1346w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163417\/travel-spend-widget-300x183.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163417\/travel-spend-widget-1024x625.png 1024w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/a>\n<p><\/span>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=\"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/sdks\/widget-sdk-message-formatting-and-templates\/\">refer here<\/a>.<\/p>\n<pre><code>var message =<\/code><br \/><code>{<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"templateType\": \"piechart\",<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"pie_type\": \"regular\",<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"title\": \"Summary\",<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"description\": \"monthly report\",<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"elements\": [<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"title\": \"Airlines\",<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"value\": \"1264.0\",<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"displayValue\": \"$ 1,234\"<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"title\": \"Hotels\",<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"value\": \"568.10\",<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"displayValue\": \"$ 568\"<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"title\": \"Food\",<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"value\": \"324.50\",<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"displayValue\": \"$ 324\"<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]<\/code><br \/><code>\u00a0\u00a0\u00a0\u00a0};<\/code><br \/><code>print(JSON.stringify(message));<\/code><\/pre>\n<\/li>\n<li style=\"font-weight: 400\"><strong>Create a Panel<\/strong><span style=\"font-weight: 400\"> and name it <\/span><strong>Travel Spend Breakdown<\/strong><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Add the <\/span><strong>Travel Spend Widget <\/strong><span style=\"font-weight: 400\">to the <\/span><strong>Travel Spend Breakdown Panel<\/strong><span style=\"font-weight: 400\">.<br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163411\/travel-spend-breakdown-panel.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-47991\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163411\/travel-spend-breakdown-panel.png\" alt=\"\" width=\"706\" height=\"466\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163411\/travel-spend-breakdown-panel.png 706w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163411\/travel-spend-breakdown-panel-300x198.png 300w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/a><br \/><\/span><\/li>\n<li style=\"font-weight: 400\"><strong>Test<\/strong><span style=\"font-weight: 400\"> the panel and you will see it in action.<br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163402\/test-json-widget.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-47985\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163402\/test-json-widget.png\" alt=\"\" width=\"528\" height=\"545\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163402\/test-json-widget.png 758w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163402\/test-json-widget-290x300.png 290w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><\/a><br \/><\/span><\/li>\n<\/ol>\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>\n<h1><span class=\"ez-toc-section\" id=\"Publishing\"><span style=\"font-weight: 400\">Publishing<\/span><\/span><\/h1>\n<p><span style=\"font-weight: 400\">To publish the Assistant, first enable channels:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">From the left navigation menu, select <\/span><strong>Channel<\/strong><span style=\"font-weight: 400\"> for publishing. For our use case we will select both Web\/Mobile Client and Widget SDK channels.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Select the channels and from the <\/span><strong>Configurations <\/strong><span style=\"font-weight: 400\">tab, make a note of the <\/span><strong>Bot Name<\/strong><span style=\"font-weight: 400\">, <\/span><strong>Bot Id<\/strong><span style=\"font-weight: 400\">, <\/span><strong>Client Id<\/strong><span style=\"font-weight: 400\"> and <\/span><strong>Client Secret<\/strong><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">From the left navigation menu, select the <\/span><strong>Publish <\/strong><span style=\"font-weight: 400\">option. Under the Tasks &amp; languages section, ensure that the Widget and Panels we developed are selected for publication.<\/span><\/li>\n<li style=\"font-weight: 400\"><strong>Proceed<\/strong><span style=\"font-weight: 400\"> with the Publish.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400\">Learn more about <\/span><a href=\"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/publish\/publishing-bot\/\"><span style=\"font-weight: 400\">publishing your Virtual Assistant<\/span><\/a><span style=\"font-weight: 400\">.\u00a0<\/span><\/p>\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>\n<h1><span class=\"ez-toc-section\" id=\"Hosting\"><span style=\"font-weight: 400\">Hosting<\/span><\/span><\/h1>\n<p><span style=\"font-weight: 400\">We will be hosting the Panels in the web\/mobile client. <\/span><a href=\"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/sdks\/kore-ai-widget-sdk-tutorial\/\"><span style=\"font-weight: 400\">See here<\/span><\/a><span style=\"font-weight: 400\"> for more details on the Widget SDK usage.<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Download the Kore.ai Widget SDK, go to <\/span><a href=\"https:\/\/github.com\/Koredotcom\/web-kore-sdk\"><span style=\"font-weight: 400\">https:\/\/github.com\/Koredotcom\/web-kore-sdk<\/span><\/a><span style=\"font-weight: 400\">, and then click <\/span><strong>Download<\/strong><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Extract all files to the <\/span><em><span style=\"font-weight: 400\">\u2026\/SDKApp\/sdk<\/span><\/em><span style=\"font-weight: 400\"> folder.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Open the above SDK folder, and traverse to the <\/span><em><span style=\"font-weight: 400\">UI <\/span><\/em><span style=\"font-weight: 400\">folder.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Open the <\/span><code><span style=\"font-weight: 400\">kore-config.js<\/span><\/code><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Configure your <\/span><code><span style=\"font-weight: 400\">botOptions<\/span><\/code><span style=\"font-weight: 400\"> with the \u2018<\/span><em><span style=\"font-weight: 400\">web\/mobile client<\/span><\/em><span style=\"font-weight: 400\">\u2019 channel configurations copied\u00a0 in the above section.<\/span><\/li>\n<ol>\n<li style=\"font-weight: 400\"><code><span style=\"font-weight: 400\">botOptions.botInfo<\/span><\/code><\/li>\n<li style=\"font-weight: 400\"><code><span style=\"font-weight: 400\">botOptions.clientId<\/span><\/code><\/li>\n<li style=\"font-weight: 400\"><code><span style=\"font-weight: 400\">botOptions.clientSecret<\/span><\/code><\/li>\n<\/ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Make other changes as per your requirements.<br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163351\/PW-UC-hosting-web.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-47976\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163351\/PW-UC-hosting-web.png\" alt=\"\" width=\"1137\" height=\"392\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163351\/PW-UC-hosting-web.png 1137w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163351\/PW-UC-hosting-web-300x103.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163351\/PW-UC-hosting-web-1024x353.png 1024w\" sizes=\"auto, (max-width: 1137px) 100vw, 1137px\" \/><\/a><\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Open the <\/span><span style=\"font-weight: 400\">kore-widgets-config.js<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Configure your <\/span><code><span style=\"font-weight: 400\">botOptionsWiz<\/span><\/code><span style=\"font-weight: 400\"> with the \u2018<\/span><em><span style=\"font-weight: 400\">Widget SDK<\/span><\/em><span style=\"font-weight: 400\">\u2019 channel configurations copied in the above\u00a0 section.<\/span><\/li>\n<ol>\n<li style=\"font-weight: 400\"><code><span style=\"font-weight: 400\">botOptionsWiz.botInfo<\/span><\/code><\/li>\n<li style=\"font-weight: 400\"><code><span style=\"font-weight: 400\">botOptionsWiz.clientId<\/span><\/code><\/li>\n<li style=\"font-weight: 400\"><code><span style=\"font-weight: 400\">botOptionsWiz.clientSecret<\/span><\/code><\/li>\n<\/ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Make other changes as per your requirements.<br \/><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163355\/PW-UC-hosting-widget.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-47979\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163355\/PW-UC-hosting-widget.png\" alt=\"\" width=\"1093\" height=\"332\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163355\/PW-UC-hosting-widget.png 1093w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163355\/PW-UC-hosting-widget-300x91.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004163355\/PW-UC-hosting-widget-1024x311.png 1024w\" sizes=\"auto, (max-width: 1093px) 100vw, 1093px\" \/><\/a><\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Open the <\/span><code><span style=\"font-weight: 400\">index_widgets_chat.html<\/span><\/code><span style=\"font-weight: 400\"> file in the browser and see the chat window along with the widgets.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">If you want to host the Panels individually use the <\/span><code><span style=\"font-weight: 400\">index_widgets.html<\/span><\/code><span style=\"font-weight: 400\"> file.<\/span><\/li>\n<\/ol>\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>\n","protected":false},"excerpt":{"rendered":"<p>In this How-To, we will explore a scenario in a Travel Planning Assistant, where with just one click a user can view upcoming bookings. 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; while Panels can be used&#8230;<\/p>\n","protected":false},"author":27,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[197],"tags":[],"class_list":["post-48004","post","type-post","status-publish","format-standard","hentry","category-travel-planing-assistant"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/48004","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\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/comments?post=48004"}],"version-history":[{"count":2,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/48004\/revisions"}],"predecessor-version":[{"id":48079,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/48004\/revisions\/48079"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/media?parent=48004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/categories?post=48004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/tags?post=48004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}