{"id":48044,"date":"2022-10-04T18:06:17","date_gmt":"2022-10-04T17:06:17","guid":{"rendered":"https:\/\/developer.kore.ai\/v10-1\/?p=48044"},"modified":"2022-10-04T19:17:25","modified_gmt":"2022-10-04T18:17:25","slug":"travel-va-using-bot-functions","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/how-tos\/travel-planing-assistant\/travel-va-using-bot-functions\/","title":{"rendered":"Travel VA: Using Bot Functions"},"content":{"rendered":"<p><span style=\"font-weight: 400\">In this use case we will explore a scenario in a Travel Planning Assistant, where Bot Functions can help reuse the same functionality in several places. We will see how a travel spend report can be programmed as a function and used, for example, to send to users upon request in different circumstances, to integrate with apps or create <\/span><span style=\"font-weight: 400\">digital views<\/span><span style=\"font-weight: 400\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">For details on what Bot Functions are and how they are implemented in the Kore.ai Bots platform, <\/span><a href=\"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/bot-settings\/bot-functions\/reusing-bot-functions-custom-script-file\/#Updating_Custom_Script_File\"><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\">In a Travel Planning Assistant used by a travel agency, we have a reporting task that requires the VA to provide information on how much a traveller has spent in different categories, as part of a booking made via the agency.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">This information can be provided in several ways. For the purpose of this article, we will demonstrate how to create a dialog task that sends the user these details upon request, and how to create a widget, as part of a Digital View, that will display the information, say within an app that is integrated via the Widget SDK.<\/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=\"Prerequisites\"><span style=\"font-weight: 400\">Prerequisites<\/span><\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">To go through these configurations, you need to know at least the basics of <\/span><a href=\"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/chatbot-overview\/getting-started-bots\/\"><span style=\"font-weight: 400\">building a Virtual Assistant<\/span><\/a><span style=\"font-weight: 400\">.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">A pre-built Virtual Assistant. We will use the <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\">Travel Planning VA<\/a> for this example.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Following is the Script file with two functions using the message templates to display the data (see here for more on <\/span><a href=\"https:\/\/developer.kore.ai\/v10-1\/docs\/bots\/sdks\/message-templates\/\"><span style=\"font-weight: 400\">message templates<\/span><\/a><span style=\"font-weight: 400\">):<\/span><\/li>\n<ul>\n<li style=\"font-weight: 400\"><em><span style=\"font-weight: 400\">tableTemplate \u2013 <\/span><\/em><span style=\"font-weight: 400\">takes a two-dimensional array and displays the content in a tabular format<\/span><\/li>\n<li style=\"font-weight: 400\"><em><span style=\"font-weight: 400\">pieTemplate \u2013 <\/span><\/em><span style=\"font-weight: 400\">takes a two-dimensional array and displays the content in a pie format<br \/><\/span>Copy the following content and save it as a <em>.js<\/em> file (say, <em>functionEX.js<\/em>)\n<pre>function tableTemplate(data){<br \/>\u00a0var message = {<br \/>\u00a0\u00a0\u00a0\"type\": \"template\",<br \/>\u00a0\u00a0\u00a0\"payload\": {<br \/>\u00a0\u00a0\u00a0\"template_type\": \"mini_table\",<br \/>\u00a0\u00a0\u00a0\"layout\": \"vertical\",<br \/>\u00a0\u00a0\u00a0\"text\":\"Travel Spend\",<br \/>\u00a0\u00a0\u00a0\"elements\": []\u00a0\u00a0}<br \/>\u00a0};<br \/>\u00a0for (i=0; i &lt; data.length; i++) {<br \/>\u00a0\u00a0\u00a0var j=0;<br \/>\u00a0\u00a0\u00a0var element = {<br \/>\u00a0\u00a0\u00a0\u00a0\u00a0\"primary\":[[data[i][j]],[data[i][j+1],\"right\"]],<br \/>\u00a0\u00a0\u00a0\u00a0\u00a0\"additional\":[[data[i][j+2],data[i][j+3]],[data[i][j+4],data[i][j+5]]]\u00a0\u00a0\u00a0};<br \/>\u00a0message.payload.elements.push(element);<br \/>\u00a0}<br \/>\u00a0return JSON.stringify(message);<br \/>};<br \/><br \/>function pieTemplate(data){<br \/>\u00a0\u00a0var message = {<br \/>\u00a0\u00a0\u00a0\"type\": \"template\",<br \/>\u00a0\u00a0\u00a0\"payload\": {<br \/>\u00a0\u00a0\u00a0\"template_type\": \"piechart\",<br \/>\u00a0\u00a0\u00a0\"pie_type\": \"regular\",<br \/>\u00a0\u00a0\u00a0\"text\": \"Travel Spend\",<br \/>\u00a0\u00a0\u00a0\"elements\": []\u00a0\u00a0\u00a0}<br \/>\u00a0\u00a0};<br \/>\u00a0for (i=0; i &lt; data.length; i++) {<br \/>\u00a0\u00a0var element = {<br \/>\u00a0\u00a0\u00a0\"title\": data[i][0],<br \/>\u00a0\u00a0\u00a0\"value\": data[i][1]\u00a0\u00a0\u00a0};<br \/>\u00a0\u00a0message.payload.elements.push(element);<br \/>\u00a0}<br \/>\u00a0return JSON.stringify(message);<br \/>};<\/pre>\n<\/li>\n<\/ul>\n<\/ul>\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=\"Implementation\"><span style=\"font-weight: 400\">Implementation<\/span><\/span><\/h1>\n<p><span style=\"font-weight: 400\"><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><\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Import_the_Bot_Function_Script\"><span style=\"font-weight: 400\">Import the Bot Function Script<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;font-size: 14px\">To begin using Bot Functions, you first need to import a script into your assistant, by following the steps below:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Open the Travel Planning Assistant.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Select the <\/span><strong>Build<\/strong><span style=\"font-weight: 400\"> tab from the top menu<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">From <\/span><strong>Configurations <\/strong><span style=\"font-weight: 400\">select the <\/span><strong>Bot Functions<\/strong><span style=\"font-weight: 400\"> section.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Click <\/span><strong>Import<\/strong><span style=\"font-weight: 400\"> (or Import New) to open the Import Custom Script window<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Drag and drop or Browse the script file that you saved from the Prerequisites section and click <\/span><strong>Import<\/strong><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Once the success message is displayed click <\/span><strong>Done<\/strong><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Your Script file is ready to use.<\/span><span style=\"font-weight: 400\"><br \/><\/span><\/li>\n<\/ol>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004125933\/ht_functions1-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47818\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004125933\/ht_functions1-1-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004125933\/ht_functions1-1-1024x576.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004125933\/ht_functions1-1-300x169.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004125933\/ht_functions1-1.png 1366w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400\"><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><\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Create_a_Dialog_Task\"><span style=\"font-weight: 400\">Create a Dialog Task<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400\">Open the <\/span><strong>Dialog Tasks<\/strong><span style=\"font-weight: 400\"> page and create a New Dialog Task called <\/span><em><span style=\"font-weight: 400\">\u201cGet Travel Spend\u201d.<\/span><\/em><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Add entities to capture the <\/span><strong>Flight Number<\/strong><span style=\"font-weight: 400\"> and <\/span><strong>Fare<\/strong><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Ideally, there would be a service call to fetch the =details. Here we will use static values for demonstration purposes.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Add a <\/span><strong>Script<\/strong><span style=\"font-weight: 400\"> node using the <\/span><strong>Bot Action<\/strong><span style=\"font-weight: 400\"> and enter the following \u2013 we are declaring an array carrying the spent amount on Airlines, Hotels and Experiences. <\/span><span style=\"font-weight: 400\"><br \/><\/span><code><span style=\"font-weight: 400\">context.travelspend = [[\"Airlines\",1264],[\"Hotels\",568],[\"Experiences\", 324];<\/span><\/code><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Add a <\/span><strong>Message<\/strong><span style=\"font-weight: 400\"> node to send this data to the Bot Function declared earlier and get the report.<\/span>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">From <\/span><strong>Bot Responses<\/strong><span style=\"font-weight: 400\"> section, click <\/span><strong>Manage Responses<\/strong><\/li>\n<li style=\"font-weight: 400\"><strong>Add Bot Response<\/strong><span style=\"font-weight: 400\">, select <\/span><em><span style=\"font-weight: 400\">Web\/Mobile Client <\/span><\/em><span style=\"font-weight: 400\">as the <\/span><strong>Channel<\/strong><span style=\"font-weight: 400\">, switch to <\/span><strong>JavaScript<\/strong><span style=\"font-weight: 400\"> tab and enter the following code to display the values in a tabular format:<\/span><span style=\"font-weight: 400\"><br \/><\/span><code><span style=\"font-weight: 400\">var info = context.travelspend;<\/span><span style=\"font-weight: 400\"><br \/><\/span><span style=\"font-weight: 400\">print(tableTemplate(info));<\/span><\/code><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Add another <\/span><strong>Message<\/strong><span style=\"font-weight: 400\"> node to send this data to the Bot Function declared earlier and get the report.<\/span>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">From <\/span><strong>Bot Responses<\/strong><span style=\"font-weight: 400\"> section, click <\/span><strong>Manage Responses<\/strong><\/li>\n<li style=\"font-weight: 400\"><strong>Add Bot Response<\/strong><span style=\"font-weight: 400\">, select <\/span><em><span style=\"font-weight: 400\">Web\/Mobile Client <\/span><\/em><span style=\"font-weight: 400\">as the <\/span><strong>Channel<\/strong><span style=\"font-weight: 400\">, switch to <\/span><strong>JavaScript<\/strong><span style=\"font-weight: 400\"> tab and enter the following code to display the values in a pie chart:<\/span><span style=\"font-weight: 400\"><br \/><\/span><code><span style=\"font-weight: 400\">var info = context.travelspend;<\/span><span style=\"font-weight: 400\"><br \/><\/span><span style=\"font-weight: 400\">print(pieTemplate(info));<\/span><\/code><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400\"><code><\/code>Close the Dialog Task.<\/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=\"Create_a_Widget\"><span style=\"font-weight: 400\">Create a Widget<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400\">The bot function can also be used to create a Widget using Digital Views, as follows:<\/span><\/p>\n<ol>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Go to <\/span><strong>Build &gt; Digital Skills &gt; Digital Views<\/strong><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Click <\/span><strong>Create Widget<\/strong><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><strong>Name your Widget <\/strong><span style=\"font-weight: 400\">as <\/span><em><span style=\"font-weight: 400\">Travel Spend<\/span><\/em><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Select <\/span><em><span style=\"font-weight: 400\">Pie Chart<\/span><\/em><span style=\"font-weight: 400\"> as the <\/span><strong>Template Hint<\/strong><span style=\"font-weight: 400\">.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">You can link the Widget to the Dialog Task you just created. For this example, we will choose <\/span><em><span style=\"font-weight: 400\">JSON <\/span><\/em><span style=\"font-weight: 400\">as the <\/span><strong>Source <\/strong><span style=\"font-weight: 400\">to populate the data for this widget.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Add the following script:<br \/><\/span><\/li>\n<\/ol>\n<\/ol>\n<pre style=\"padding-left: 80px\">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\",\r\n          \"displayValue\": \"$ 568\"\r\n        },\r\n        {\r\n          \"title\": \"Experiences\",\r\n          \"value\": \"324\",\r\n          \"displayValue\": \"$ 324\"\r\n        }\r\n      ]\r\n    };\r\nprint(JSON.stringify(message));\r\n<\/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<h1><span class=\"ez-toc-section\" id=\"Testing\"><span style=\"font-weight: 400\">Testing<\/span><\/span><\/h1>\n<p><span style=\"font-weight: 400\">Use <\/span><strong>Talk to Bot<\/strong><span style=\"font-weight: 400\"> and try both functions. Thus we have used the same function to display the reports in multiple places.<\/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\/20221004125928\/botfunctions-demo-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47815\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004125928\/botfunctions-demo-1-1024x456.png\" alt=\"\" width=\"640\" height=\"285\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004125928\/botfunctions-demo-1-1024x456.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004125928\/botfunctions-demo-1-300x134.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-1\/wp-content\/uploads\/sites\/35\/20221004125928\/botfunctions-demo-1.png 1922w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/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","protected":false},"excerpt":{"rendered":"<p>In this use case we will explore a scenario in a Travel Planning Assistant, where Bot Functions can help reuse the same functionality in several places. We will see how a travel spend report can be programmed as a function and used, for example, to send to users upon request in different circumstances, to integrate&#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-48044","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\/48044","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=48044"}],"version-history":[{"count":3,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/48044\/revisions"}],"predecessor-version":[{"id":48086,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/posts\/48044\/revisions\/48086"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/media?parent=48044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/categories?post=48044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-1\/wp-json\/wp\/v2\/tags?post=48044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}