{"id":18936,"date":"2019-03-28T07:55:19","date_gmt":"2019-03-28T07:55:19","guid":{"rendered":"https:\/\/developer.kore.ai\/v7-1\/?p=18936"},"modified":"2021-03-30T12:37:57","modified_gmt":"2021-03-30T11:37:57","slug":"creating-a-simple-bot","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v7-1\/docs\/bots\/chatbot-overview\/creating-a-simple-bot\/","title":{"rendered":"Creating a Simple Bot"},"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>Once you have <a href=\"\/v7-1\/docs\/bots\/getting-started\/how-to-open-bot-builder\/\">signed up<\/a> with the Kore.ai Bots Platform, the next step would be to create a Bot. Before diving into Bot creation, it is advisable to go through the basics of Bot building from <a href=\"\/v7-1\/docs\/bots\/getting-started\/getting-started-bots\/\" target=\"_blank\" rel=\"noopener noreferrer\">this link<\/a>.<\/p>\n<p>You can follow the steps given in this document to build the Bot at your own pace. Or use the Guided Help for step by step Bot creation process.<\/p>\n<p>To access Guided Help:<\/p>\n<ol>\n<li>Log in to your Bot account.<\/li>\n<li>The <strong>Bot Builder Landing Page<\/strong> opens.<\/li>\n<li>Select the <strong>Help icon<\/strong> on the top right of the page.<\/li>\n<li>Click <strong>Guided Help<\/strong> against the &#8220;<em>Build a &#8216;Hello world&#8217; bot with a guided help<\/em>&#8220;.<\/li>\n<li>You will be presented with a list of use cases to select.<\/li>\n<li>In this document, we are elaborating the steps from Dialog Task Bot (Flight Status Bot).<\/li>\n<\/ol>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h3><span class=\"ez-toc-section\" id=\"Bot_Overview\">Bot Overview<\/span><\/h3>\n<p>The Bot we will be building will give the flight status arriving\/departing from Los Angeles International Airport depending upon the user selection.<br \/>\nThis Bot will:<\/p>\n<ul>\n<li>Ask the user if they want to know about the arrivals or departures.<\/li>\n<li>Make a service call to an API to fetch the details of flights arriving and departing out of the airport.<\/li>\n<li>Display the flight numbers based on the user preference of Arrival or Departure.<\/li>\n<li>Request user to select a flight number.<\/li>\n<li>Display the status details of the selected flight.<\/li>\n<li>Handle any errors.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h3><span class=\"ez-toc-section\" id=\"Step_1_Build_the_Bot\">Step 1: Build the Bot<\/span><\/h3>\n<p>We will be creating a Standard Bot.<\/p>\n<ul>\n<li>Log in to your Kore.ai Bots Platform account<\/li>\n<li>You will be directed to the Bots Landing Page<\/li>\n<li>Click the\u00a0<strong>+ New Bot<\/strong> button on the top right of the page<\/li>\n<li>Enter Bot Details\n<ul>\n<li><strong>Bot Name<\/strong> &#8211; Give a name to your Bot. Example &#8211; &#8220;Airport Bot&#8221;. If the name is already used, try something else.<\/li>\n<li>Set the <strong>Default Bot Language<\/strong> to &#8216;<em>English<\/em>&#8216;<\/li>\n<li>Select the <strong>Bot Type<\/strong> to be &#8216;<em>Standard Bot<\/em>&#8216;.<\/li>\n<li>Click the <strong>Create<\/strong>\u00a0button.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-creation.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18956\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-creation.png\" alt=\"\" width=\"500\" height=\"468\" \/><\/a><\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h3><span class=\"ez-toc-section\" id=\"Step_2_Create_a_Dialog_Task\">Step 2: Create a Dialog Task<\/span><\/h3>\n<p>Successful creation of the Bot will direct you to the Bot Summary Page. We need to add an Intent Dialog as the first step in the Bot. Intent Dialog is the first step in the user-bot conversation flow.<\/p>\n<ul>\n<li>Click on the <strong>+ New Task<\/strong> within the <strong>Tasks<\/strong> widget.<\/li>\n<li>Select <strong>Dialog Task<\/strong>.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addtask.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18957\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addtask.png\" alt=\"\" width=\"500\" height=\"241\" \/><\/a><\/li>\n<li><strong>Bot Task Page<\/strong> will open<\/li>\n<li>Enter the following details:\n<ul>\n<li><strong>Intent Name<\/strong> &#8211; Enter the Intent name, this is the phrase that triggers the dialog. The intent name should be simple and not more than 3-4 words. For example, &#8216;Get flight status&#8217;<\/li>\n<li>\u00a0Under the <strong>More Options<\/strong>, you can add a <strong>description<\/strong> and other dialog related details. Let&#8217;s retain the default settings.<\/li>\n<\/ul>\n<\/li>\n<li>Click <strong>Create &amp; Proceed.<\/strong><br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-intent.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18958\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-intent.png\" alt=\"\" width=\"820\" height=\"461\" \/><\/a><\/li>\n<li>Property Panel for User Intent will be displayed. We will retain the default properties.<\/li>\n<li>Close the User Intent Property Panel.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h3><span class=\"ez-toc-section\" id=\"Step_3_Create_a_User_Preference_Entity_node\">Step 3: Create a User Preference Entity node<\/span><\/h3>\n<p>Entity Node is typically used to gather information from the user.<br \/>\nHere we will be using it to capture the user preference of arrival or departure details.<\/p>\n<ul>\n<li>Click the <strong>+<\/strong> next to the User Intent node<\/li>\n<li>Select <strong>Entity.<\/strong><\/li>\n<li>Click the <strong>New entity node +<\/strong><br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addentity.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18960\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addentity.png\" alt=\"\" width=\"500\" height=\"270\" \/><\/a><\/li>\n<li><strong>Property Panel<\/strong> for the Entity Node is displayed<\/li>\n<li>Enter the following details:\n<ul>\n<li><strong>Name<\/strong>: <em>Preference<\/em><\/li>\n<li><strong>Display Name<\/strong>: <em>Preference\u00a0<\/em><\/li>\n<li><strong>Type<\/strong>: Select &#8216;<em>List of Items (enumerated)<\/em>&#8216; from the drop-down. We need to provide the list of values that the user can select.\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Click on the <strong>Settings icon<\/strong> that appears next to the field.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addlov.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18961\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addlov.png\" alt=\"\" width=\"500\" height=\"259\" \/><\/a><\/li>\n<li>Opt for <strong>Static List.<\/strong><\/li>\n<li>Enter the following options under separate rows as the <strong>Display name\u00a0<\/strong>&#8211; <em>Arrival<\/em> and <em>Departure.<\/em><br \/>\nValue and Synonym columns will auto-populate, leave them as is.<\/li>\n<li>Click <strong>Save<\/strong>.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addlovlist.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18962\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addlovlist.png\" alt=\"\" width=\"820\" height=\"461\" \/><\/a><\/li>\n<li>Navigate back to Entity Property Panel.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>User Prompts:<\/strong> Enter the following text and hit enter to save:<br \/>\n<code>Hello {{context.session.UserContext.firstName}}! Welcome to *Los Angeles International Airport*. I can help you with flight Arrival\/Departure information. Please select your preference.<\/code><br \/>\n<strong>Note<\/strong> that the context variable will retrieve the user&#8217;s first name. Also, we have used markdown for the airport name to appear in bold.<\/li>\n<li><strong>Display List Of Values<\/strong>: Mark as &#8216;<em>Yes, use channel specific standard formatting for default messages and show the available list of values to end user<\/em>&#8216;. This will show the list of value as a button template in supported channels.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-adduserprompt.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18963\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-adduserprompt.png\" alt=\"\" width=\"500\" height=\"349\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<li>Close the Preference Entity Property Panel.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h3><span class=\"ez-toc-section\" id=\"Step_4_Create_a_Service_node\">Step 4: Create a Service node<\/span><\/h3>\n<p>Service Node allows you to make a backend API call.<br \/>\nHere the service node is used to call an API to get flight information for flights From and to LAX airport.<br \/>\nWe will be using a dummy API setup for this tutorial.<\/p>\n<ul>\n<li>Click the <strong>+<\/strong> next to the Preference Entity node<\/li>\n<li>Select <strong>Service<\/strong> &#8211; Service node is used to make a backend API call to get flight information for flights From and to LAX airport.<\/li>\n<li>Click the <strong>New service node +<\/strong><\/li>\n<li><strong>Property Panel<\/strong> for the Service Node is displayed<\/li>\n<li>Enter the following details:\n<ul>\n<li><strong>Name<\/strong>: <em>Fetchflightdetails<\/em><\/li>\n<li><strong>Display Name<\/strong>: <em>Fetch Flight Details<\/em><\/li>\n<li><strong>Service Type<\/strong>: <em>Custom Service<\/em><\/li>\n<li><strong>Type<\/strong>: <em>Webservice<\/em><\/li>\n<li><strong>Sub Type<\/strong>: <em>REST<\/em><\/li>\n<li>Click <strong>DEFINE REQUEST<\/strong><\/li>\n<li>In the <strong>Define Request Page,<\/strong> enter the following details:\n<ul>\n<li><strong>Request type<\/strong> &#8211; <em>GET<\/em><\/li>\n<li><strong>Request URL<\/strong> &#8211; <code>http:\/\/5c66a2bd24e2140014f9ed9d.mockapi.io\/FlightDetails<\/code><br \/>\nThis API does not require any Auth or Header Parameters.<\/li>\n<li>Click the <strong>Test Request<\/strong>\u00a0tab\n<ul>\n<li>Click the <strong>Test<\/strong>\u00a0button<\/li>\n<li>Wait for the test is completed and you get a Status : 200<\/li>\n<li>Click <strong>Save as Sample Response<\/strong><\/li>\n<li>Click <strong>Save<\/strong><\/li>\n<\/ul>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addservice.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18965\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addservice.png\" alt=\"\" width=\"820\" height=\"461\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Close the Service Property Panel<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h3><span class=\"ez-toc-section\" id=\"Step_5_Create_a_Flight_Selection_Entity_node\">Step 5: Create a Flight Selection Entity node<\/span><\/h3>\n<p>This Entity Node is to capture Flight Number for which the user wants the status details.<\/p>\n<ul>\n<li>Click the <strong>+<\/strong> next to the Service node<\/li>\n<li>Select <strong>Entity<\/strong> &#8211; Entity node is required to capture the flight number selected by user.<\/li>\n<li>Click the <strong>New entity node +<\/strong><\/li>\n<li><strong>Property Panel<\/strong> for the Entity Node is displayed<\/li>\n<li>Enter the following details:\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><strong>Name<\/strong>: <em>SelectFlight<\/em><\/li>\n<li><strong>Display Name<\/strong>: <em>Select Flight<\/em><em>\u00a0<\/em><\/li>\n<li><strong>Type<\/strong>: <em>String\u00a0<\/em>(we will be writing a custom script to convert the API string output to a list of values in the following steps, this is the requirement of the dummy API used)<\/li>\n<li><strong>User Prompts:<\/strong> Enter the following text:<br \/>\n<code>Please provide the flight number.<\/code><\/li>\n<li><strong>Manage Prompts:<\/strong> We will be defining a specific prompt for Web SDK channel.\n<ul>\n<li>Click <strong>MANAGE PROMPTS<\/strong> under User Prompts section.<br \/>\n<a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-manageprompt.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18966\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-manageprompt.png\" alt=\"\" width=\"500\" height=\"291\" \/><\/a><\/li>\n<li>Click <strong>ADD PROMPT MESSAGE<\/strong><\/li>\n<li>Select <em>Web\/Mobile client<\/em> from the <strong>Channel<\/strong> drop down.<\/li>\n<li>Click and navigate to <strong>JavaScript tab<\/strong> under <strong>Message<\/strong>.<\/li>\n<li>Add the following <strong>JavaScript<\/strong>. The JavaScript will extract flight numbers matching user preference from the string output from API call and display them in &#8216;<em>Quick Reply<\/em>&#8216; format.\n<pre>var data = context.Fetchflightdetails.response.body.details;\r\ncontext.flights = [];\r\ncontext.info;\r\nvar msg;\r\nfor (var i = 0; i &lt; data.length; i++)\r\n{\r\n    if (context.entities.Preference == data[i].Type)\r\n    {\r\n        var details = {\r\n            \"Airlines\" : data[i].Airlines,\r\n            \"FlightNo\" : data[i].FlightNo,\r\n            \"Airport\" : data[i].Airport,\r\n            \"AirportName\" : data[i].AirportName,\r\n            \"Time\" : data[i].Time\r\n        };\r\n        context.flights.push(details);\r\n    }\r\n}\r\nvar message = {\r\n    \"type\" : \"template\",\r\n    \"payload\" : {\r\n       \"template_type\" : \"quick_replies\",\r\n       \"text\" : \"Here are the flights \" + context.entities.Preference + \" details for Los Angeles International Airport today. Please select the flight number to see details\",\r\n       \"quick_replies\" : []\r\n    }\r\n};\r\nfor (i=0; i &lt; context.flights.length; i++)\r\n{\r\n   var replies = {\r\n        \"content_type\":\"text\",\r\n        \"title\" : context.flights[i].FlightNo,\r\n        \"payload\" : context.flights[i].FlightNo\r\n    };\r\nmessage.payload.quick_replies.push(replies);\r\n}\r\nreturn JSON.stringify(message);<\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<li>Click <b>Save<\/b>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addprompt.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18967\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addprompt.png\" alt=\"\" width=\"820\" height=\"461\" \/><\/a><\/li>\n<li>Navigate back to Dialog Builder<\/li>\n<li>Close the Property Panel<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h3><span class=\"ez-toc-section\" id=\"Step_6_Create_the_Script_Node\">Step 6: Create the Script Node<\/span><\/h3>\n<p>A Script Node is used to write custom JavaScript code in the Dialog task.<br \/>\nHere we will be using the Script to extract the selected flight details. Later we will be adding more functionality to this Script.<\/p>\n<ul>\n<li>Click the <strong>+<\/strong> next to the Flight Entity node<\/li>\n<li>Select <strong>Script<\/strong>.<\/li>\n<li>Click the &#8216;<strong>New script node +<\/strong>&#8216;<\/li>\n<li><strong>Property Panel<\/strong> for the Script Node is displayed<\/li>\n<li>Enter the following details:\n<ul>\n<li><strong>Name<\/strong>: <em>ValidateFlight<\/em><\/li>\n<li><strong>Display Name<\/strong>: <em>Validate Flight\u00a0<\/em><\/li>\n<li><strong>Script Definition<\/strong>: Select <strong>Define Script<\/strong> and copy the following JavaScript in the pop-up window. This code will extract the details of the selected flight number.\n<pre>context.details;\r\nvar x = context.flights.length;\r\nfor (var l = 0; l &lt; x; l++)\r\n{\r\n\u00a0 \u00a0 if (context.entities.SelectFlight == context.flights[l].FlightNo)\r\n\u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0context.details = {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"Airlines\" : context.flights[l].Airlines,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"FlightNo\" : context.flights[l].FlightNo,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"Airport\" : context.flights[l].Airport,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"AirportName\" : context.flights[l].AirportName,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"Time\" :context.flights[l].Time\r\n\u00a0 \u00a0 \u00a0 \u00a0 };\r\n\u00a0 \u00a0 \u00a0 \u00a0 break;\r\n\u00a0 \u00a0 }\r\n}<\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<li>Close the Property Panel.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h3><span class=\"ez-toc-section\" id=\"Step_7_Create_Message_Node\">Step 7: Create Message Node<\/span><\/h3>\n<p>A Message Node is used to display a message from the Bot to the user. Here we will be using the Message node to show appropriate flight details, based on the user preference.<\/p>\n<ul>\n<li>Click the <strong>+<\/strong> next to the ValidateFlight Script node<\/li>\n<li>Select <strong>Message<\/strong> &#8211; Message to print the error and re-start request.<\/li>\n<li>Click the &#8216;<strong>New message node +<\/strong>&#8216;<\/li>\n<li><strong>Property Panel<\/strong> for the Message Node is displayed<\/li>\n<li>Enter the following details:\n<ul>\n<li><strong>Name<\/strong>: <em>FlightDetails<\/em><\/li>\n<li><strong>Display Name<\/strong>: <em>Flight Details<\/em><em>\u00a0<\/em><\/li>\n<li><strong>Bot Responses<\/strong>:<br \/>\n<code>Here are your flight details.<\/code><br \/>\nPress <strong>Enter<\/strong> to save<em>.<br \/>\n<\/em><\/li>\n<li><strong>Manage Prompts:<\/strong> We will be defining a specific prompt for Web SDK channel.<br \/>\nClick <strong>MANAGE RESPONSES<\/strong><\/p>\n<ul>\n<li>Click &#8216;<strong>ADD PROMPT MESSAGE<\/strong>&#8216;<\/li>\n<li>Select <em>Web\/Mobile client<\/em> from the <strong>Channel<\/strong> drop down.<\/li>\n<li>Click and navigate to <strong>JavaScript tab<\/strong> under <strong>Message<\/strong>.<\/li>\n<li>Add the following <strong>JavaScript<\/strong>. The JavaScript is written to display the Flight Details in &#8216;<em>Table<\/em>&#8216; format.\n<pre>var message = {\r\n \"type\": \"template\",\r\n \"payload\": {\r\n \"template_type\": \"mini_table\",\r\n \"layout\": \"horizontal\",\r\n \"text\":\"Flight \" + context.entities.Preference + \" Information\" ,\r\n \"elements\": [\r\n {\r\n \"primary\":[[\"Flight No\"], [context.details.FlightNo, \"right\"]],\r\n \"additional\":[[\"Airlines\", context.details.Airlines],[\"From\",context.details.Airport],[\"Time\",context.details.Time],[\"Remarks\",\"On Time\"]]\r\n }\r\n ]\r\n}\r\n};\r\nprint(JSON.stringify(message));<\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<li>Click <b>Save<\/b>.<\/li>\n<\/ul>\n<\/li>\n<li>Navigate back to the Dialog Builder.<\/li>\n<li>On the Bot Response Property Panel, open the connections tab by clicking the &#8216;<strong>Connections<\/strong>&#8216; icon.\n<ul>\n<li>Change the <strong>Default<\/strong> connection from &#8216;<em>Not Connected<\/em>&#8216; to &#8216;<em>End of Dialog<\/em>&#8216;.<\/li>\n<li>Click\u00a0<strong>Save<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li>Close the Property Panel.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h4>Test the Bot<\/h4>\n<p>To test the Dialog task, you can use the &#8216;Talk to bot&#8217; at the bottom right corner.<br \/>\nEnter the following utterance (intent name)<br \/>\n&#8220;<em>Get me the flight status<\/em>&#8221;<br \/>\nFollow the Bot instructions:<\/p>\n<ul>\n<li>Select Arrival\/Departure;<\/li>\n<li>Select Flight No;<\/li>\n<li>See the flight details displayed in a tabular format.<\/li>\n<\/ul>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-test1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18970\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-test1.png\" alt=\"\" width=\"820\" height=\"461\" \/><\/a><\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h3><span class=\"ez-toc-section\" id=\"Step_8_Add_Events\">Step 8: Add Events<\/span><\/h3>\n<p>Currently, the Bot was waiting for user input on start. Ideally, the Bot should be guiding the user at the start of the conversation, too.<br \/>\nFor this, we will add an Event Handler to initiate this task every time a new connection is established from the Web\/Mobile SDK.<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Close the Dialog Builder.<\/li>\n<li>Hover over the Left Nav, and go to <strong>Natural Language<\/strong> -&gt; <strong>Default Conversation<\/strong> and select <strong>Event Handlers<\/strong> section.<\/li>\n<li>Click on &#8216;<em>Configure<\/em>&#8216; against the &#8216;<strong>On connect<\/strong>&#8216;<\/li>\n<li><em>Initiate Task<\/em> option is selected by default, retain it.<\/li>\n<li>From the drop-down choose &#8216;<em>Get flight status<\/em>&#8216; task<\/li>\n<li>Click the <strong>Save and Enable<\/strong> button at the bottom.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addevent.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18972\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-addevent.png\" alt=\"\" width=\"820\" height=\"461\" \/><\/a><\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h4>Test the Bot<\/h4>\n<p>To test the Dialog task, you can use the &#8216;Talk to bot&#8217; at the bottom right corner. Since the onConnect event was configured, the dialog will be automatically initiated.<br \/>\nFollow the Bot instructions:<\/p>\n<ul>\n<li>Select Arrival\/Departure;<\/li>\n<li>Instead of selecting Flight No, manually enter a number that does not exist on the list;<\/li>\n<li>You will see a generic message like &#8220;I am sorry, something went wrong and I had to discard your task. Please retry.&#8221;.<\/li>\n<\/ul>\n<p>In the next steps, we will see how to rectify this.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h3><span class=\"ez-toc-section\" id=\"Step_9_Modify_Script_Node\">Step 9: Modify Script Node<\/span><\/h3>\n<p>As we have used the &#8216;<strong>String<\/strong>&#8216; type in the &#8216;<strong>Select Flight<\/strong>&#8216; entity, we need to handle the scenario that the user, instead of selecting from the list, may have manually entered an incorrect flight number. We can do this by showing an appropriate message based on &#8216;<strong>Connections<\/strong>&#8216;.<br \/>\nIn this step, we will modify the earlier saved Script to add verification of the user entry.<\/p>\n<ul>\n<li>Open the Dialog Builder page. You can do this either by\n<ul>\n<li>from Left Nav clicking <strong>Bot Tasks<\/strong> and selecting the <strong>Get flight status <\/strong>task; or<\/li>\n<li>from Left Nav, under\u00a0<strong>Dashboard -&gt; Bot Summary<\/strong> clicking the\u00a0<strong>Get flight status<\/strong> task.<\/li>\n<\/ul>\n<\/li>\n<li>Select <strong>ValidateFlight Script<\/strong> node<\/li>\n<li><strong>Property Panel<\/strong> for the Script Node is displayed<\/li>\n<li><strong>Script Definition<\/strong>: Select <strong>Edit Script<\/strong> and copy the following JavaScript <span style=\"text-decoration: underline;\">replacing<\/span> the existing code in the pop-up window. We are adding a valid tag to be set when the flight number entered by the user matches an entry returned by the API service call.\n<pre>context.valid = false;\r\ncontext.details;\r\nvar x = context.flights.length;\r\nfor (var l = 0; l &lt; x; l++)\r\n{\r\n\u00a0 \u00a0 if (context.entities.SelectFlight == context.flights[l].FlightNo)\r\n\u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0context.valid = true;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0context.details = {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"Airlines\" : context.flights[l].Airlines,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"FlightNo\" : context.flights[l].FlightNo,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"Airport\" : context.flights[l].Airport,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"AirportName\" : context.flights[l].AirportName,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"Time\" :context.flights[l].Time\r\n\u00a0 \u00a0 \u00a0 \u00a0 };\r\n\u00a0 \u00a0 \u00a0 \u00a0 break;\r\n\u00a0 \u00a0 }\r\n}\r\nif (context.valid === false)\r\n{\r\n\u00a0 \u00a0 delete context.entities.SelectFlight;\r\n}<\/pre>\n<\/li>\n<li>Close the Property Panel.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h3><span class=\"ez-toc-section\" id=\"Step_10_Create_Conditional_Flow\">Step 10: Create Conditional Flow<\/span><\/h3>\n<p>Following are the steps to add the conditional flow from the ValidateFlight Script node. A new connection from this Script node to a new Message Node will be established. This will be to display an error message from the Bot to the user and redirect to select the flight number again.<\/p>\n<h4>Create Error Message<\/h4>\n<ul>\n<li>Hover on ValidateFlight Script node<\/li>\n<li>You will see an array of icons within the node\n<ul>\n<li>Click the + icon<\/li>\n<li>A new connection is created. From this new connection, create a new Bot message node<\/li>\n<li>Select <strong>Message<\/strong> &#8211; Message to print the error and re-start request.<\/li>\n<li>Click the &#8216;<strong>New message node +<\/strong>&#8216;<\/li>\n<li><strong>Property Panel<\/strong> for the Message Node is displayed<\/li>\n<li>Enter the following details:\n<ul>\n<li><strong>Name<\/strong>: <em>ErrorMessage<\/em><\/li>\n<li><strong>Display Name<\/strong>: <em>Error Message<\/em><em>\u00a0<\/em><\/li>\n<li><strong>Bot Responses<\/strong>:<br \/>\n<code>The Flight number entered is incorrect. Let us start again.<\/code><br \/>\nPress <strong>Enter<\/strong> to save<em>.<br \/>\n<\/em><\/li>\n<\/ul>\n<\/li>\n<li>Navigate to the connections tab by clicking the &#8216;<strong>Connections<\/strong>&#8216; icon.<\/li>\n<li>Change the <strong>Default<\/strong> connection from &#8216;<em>Not Connected<\/em>&#8216; to &#8216;<em>SelectFlight<\/em>&#8216;.<\/li>\n<li>Click\u00a0<strong>Save<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li>Close the Property Panel.<\/li>\n<\/ul>\n<h4>ValidateFlight Script Connections<\/h4>\n<ul>\n<li>Click <strong>ValidateFlight<\/strong> Script node to open the property panel<\/li>\n<li>Navigate to the connections tab by clicking on the &#8216;<strong>Connections<\/strong>&#8216; icon<\/li>\n<li>Under <strong>IF<\/strong>\n<ul>\n<li>Select <strong>Context<\/strong><\/li>\n<li>For <strong>If Condition<\/strong> enter the text &#8216;<em>valid<\/em>&#8216;<\/li>\n<li>Select operator as &#8216;<em>equals to<\/em>&#8216;<\/li>\n<li>Enter Value as &#8216;<em>true<\/em>&#8216;<br \/>\nIf this condition is true, then the dialog needs to navigate to &#8216;<em>FlightDetails<\/em>&#8216;<\/li>\n<\/ul>\n<\/li>\n<li>Under ELSE\n<ul>\n<li>If this condition is false, then the dialog needs to navigate to &#8216;<em>ErrorMessage<\/em>&#8216;<\/li>\n<\/ul>\n<\/li>\n<li>Click <strong>Save<\/strong>.<\/li>\n<li>Close the Property Panel.<\/li>\n<\/ul>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-editscript.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18973\" src=\"\/wp-content\/uploads\/sites\/12\/SimpleBot-editscript.png\" alt=\"\" width=\"820\" height=\"461\" \/><\/a><\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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<h4>Test the Bot<\/h4>\n<p>To test the Dialog task, you can use the &#8216;Talk to bot&#8217; at the bottom right corner. Since the onConnect event was configured, the dialog will be automatically initiated.<br \/>\nAlternately you can always try the following utterance (intent name)<br \/>\n&#8220;<em>Get me the flight status<\/em>&#8221;<br \/>\nFollow the Bot instructions:<\/p>\n<ul>\n<li>Select Arrival\/Departure;<\/li>\n<li>Enter an invalid flight number;<\/li>\n<li>You will see the appropriate error message and will be prompted to enter the flight number again;<\/li>\n<li>Select a flight number;<\/li>\n<li>You will see the flight details in a tabular format.<\/li>\n<li>Select Flight No;<\/li>\n<li>See the flight details displayed in a tabular format.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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>You have successfully created and tested your first Bot.<\/p>\n<p>Next steps would be to<\/p>\n<ul>\n<li>Train your Bot to respond to various user utterances like <em>&#8220;I want to know the status of a flight&#8221;<\/em>, <em>&#8220;What is the status of QR040&#8221;<\/em>. These can be done by <a href=\"\/v7-1\/docs\/bots\/bot-builder-tool\/train-nlp-optimization\/optimizing-bots\/\">training your Bot<\/a>.<\/li>\n<li>Enable a Channel and Publish your Bot for user access. <a href=\"\/v7-1\/docs\/bots\/bot-builder-tool\/channel-enablement\/adding-channels-to-your-bot\/\">See here for more<\/a>.<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_medium 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":"Once you have signed up with the Kore.ai Bots Platform, the next step would be to create a Bot. Before diving into Bot creation, it is advisable to go through the basics of Bot building from this link. You can follow the steps given in this document to build the Bot at your own pace....","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[68],"tags":[],"class_list":["post-18936","post","type-post","status-publish","format-standard","hentry","category-chatbot-overview"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/posts\/18936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/comments?post=18936"}],"version-history":[{"count":3,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/posts\/18936\/revisions"}],"predecessor-version":[{"id":20629,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/posts\/18936\/revisions\/20629"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/media?parent=18936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/categories?post=18936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v7-1\/wp-json\/wp\/v2\/tags?post=18936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}