{"id":48007,"date":"2022-10-04T16:56:13","date_gmt":"2022-10-04T15:56:13","guid":{"rendered":"https:\/\/developer.kore.ai\/v10-2\/?p=48007"},"modified":"2024-07-01T10:38:22","modified_gmt":"2024-07-01T09:38:22","slug":"travel-va-configuring-digital-forms","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/how-tos\/travel-planing-assistant\/travel-va-configuring-digital-forms\/","title":{"rendered":"Travel VA: Configuring Digital Forms"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">In this How-To, we will explore a scenario in a Travel Planning assistant, through which a user can book a flight. We will see how Digital Forms can be used to gather all the required information from the user, then make the booking based on that information.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For details on what Digital Forms are and how they are implemented in the Kore.ai XO Platform, <\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/digital-forms\/\"><span style=\"font-weight: 400;\">refer here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\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 book a flight. There are several information categories that the VA should collect from the user in order to complete this task. Rather than asking the user for each piece of information one by one, the VA can ask the user just once to complete a form that collects all the necessary data. Once the form is successfully submitted, the VA can pull the data and process the booking.<\/span><\/p>\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><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/how-tos\/travel-planing-assistant\/create-a-travel-virtual-assistant\/\" target=\"_blank\" rel=\"noopener noreferrer\">Building a Virtual Assistant<\/a>: This is because your assistant needs to have been already built when you begin working on your forms.<\/li>\n<li style=\"font-weight: 400;\"><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/digital-forms\/\"><span style=\"font-weight: 400;\">Working with Digital Forms<\/span><span style=\"font-weight: 400;\">.<\/span><\/a><\/li>\n<\/ul>\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;\">When a user makes a booking, the following needs to happen within your assistant<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A Digital Form needs to be displayed in order to gather input from the user;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A Dialog Task needs to:<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">trigger the above Digital Form; and<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">capture the user-entered booking information.<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Digital_Form_Configuration\"><span style=\"font-weight: 400;\">Digital Form Configuration<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Moving forward, we will be creating a form that gathers some of the necessary information in order to allow the user to book a flight:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Trip Type &#8211; Roundtrip or One Way.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Departure Airport (From);<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Arrival Airport (To);<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Departure Date;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Return Date\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fare &#8211; default selection set to <\/span><em><span style=\"font-weight: 400;\">Premium Economy<\/span><\/em><span style=\"font-weight: 400;\">;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Pro Tip &#8211; showcases a promotional offer for <\/span><em><span style=\"font-weight: 400;\">Premium Economy<\/span><\/em><span style=\"font-weight: 400;\"> seats and only displays when the selected Fare is <\/span><em><span style=\"font-weight: 400;\">Economy.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Passenger First Name and Last Name.<\/span><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Form_Creation\"><span style=\"font-weight: 400;\">Form Creation<\/span><\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">From the Kore.ai XO Platform, 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 the left navigation menu, select <\/span><strong>Digital Skills &gt; Digital Forms<\/strong><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click <\/span><strong>New Form<\/strong><span style=\"font-weight: 400;\"> and enter the following:<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><strong>Name<\/strong><span style=\"font-weight: 400;\"> \u2013 name to the form, say <\/span><em><span style=\"font-weight: 400;\">BookingForm<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Display Name<\/strong><span style=\"font-weight: 400;\"> for the form, say <\/span><em><span style=\"font-weight: 400;\">Booking Form<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Description<\/strong><span style=\"font-weight: 400;\"> of the form.<\/span><\/li>\n<li><b>Logo and style <\/b><span style=\"font-weight: 400;\">for the form header<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong>Description <\/strong>toggle set to on\/off depending on whether you want to display the form description in the header<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><strong>Save &amp; Proceed<\/strong><span style=\"font-weight: 400;\"> to the next step.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103619\/Req-4_Digital-Forms-Add-logo.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-59282 size-full\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103619\/Req-4_Digital-Forms-Add-logo.png\" alt=\"\" width=\"683\" height=\"745\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103619\/Req-4_Digital-Forms-Add-logo.png 683w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911103619\/Req-4_Digital-Forms-Add-logo-275x300.png 275w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/a><\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"The_Form_Editor\"><span style=\"font-weight: 400;\">The Form Editor<\/span><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The Form Editor opens with components on the left, and a blank form. You can drag and drop components to the form as per your requirement. By default, a <\/span><strong>Submit button<\/strong><span style=\"font-weight: 400;\"> is added to the form. This would trigger the submit event which would capture the user input and save in the context object. As soon as you drag and drop a component, its property settings panel will be displayed. There are several settings available for each component and you can set them up according to your own requirements. Some of these settings include: making a field mandatory, adding tooltips, securing field data, and more. This article takes you through the basic ones.<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Start by adding a selection field for the <\/span><strong>Trip Type<\/strong><span style=\"font-weight: 400;\">. Drag and drop a <\/span><strong>Toggle <\/strong><span style=\"font-weight: 400;\">component onto the form and set the following values:<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><strong>Display Name, <\/strong><span style=\"font-weight: 400;\">say <\/span><em><span style=\"font-weight: 400;\">Trip Type.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Name<\/strong><span style=\"font-weight: 400;\"> used for internal reference, say <\/span><em><span style=\"font-weight: 400;\">TripType.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Description<\/strong><span style=\"font-weight: 400;\"> of the field.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Placeholder<\/strong><span style=\"font-weight: 400;\"> value to be displayed in the field when blank, say, <\/span><em><span style=\"font-weight: 400;\">Please select whether you are booking a roundtrip.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Value <\/strong><span style=\"font-weight: 400;\">used to display functionality when the toggle is either on or off. When the toggle is <\/span><em><span style=\"font-weight: 400;\">enabled<\/span><\/em><span style=\"font-weight: 400;\">, set the value to <\/span><em><span style=\"font-weight: 400;\">Roundtrip<\/span><\/em><span style=\"font-weight: 400;\">. For the <\/span><em><span style=\"font-weight: 400;\">disabled <\/span><\/em><span style=\"font-weight: 400;\">state of the toggle, set the value to <\/span><em><span style=\"font-weight: 400;\">One Way<\/span><\/em><span style=\"font-weight: 400;\">.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161224\/toggle-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47953\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161224\/toggle-1-1024x456.png\" alt=\"\" width=\"640\" height=\"285\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161224\/toggle-1-1024x456.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161224\/toggle-1-300x134.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161224\/toggle-1.png 1922w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><br \/>\n<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\">Drag and Drop a <strong>Dropdown <\/strong>component onto the form, for the <strong>From <\/strong>field.\n<ol>\n<li style=\"font-weight: 400;\"><strong>Display Name, <\/strong><span style=\"font-weight: 400;\">say <\/span><em><span style=\"font-weight: 400;\">From.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Name<\/strong><span style=\"font-weight: 400;\"> used for internal reference, say <\/span><em><span style=\"font-weight: 400;\">From.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Description<\/strong><span style=\"font-weight: 400;\"> of the field.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Placeholder<\/strong><span style=\"font-weight: 400;\"> value to be displayed in the field when blank, say, <\/span><em><span style=\"font-weight: 400;\">Select the trip type<\/span><\/em><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Scroll and locate <\/span><strong>Data Settings,<\/strong><span style=\"font-weight: 400;\"> then click <\/span><strong>Add Values<\/strong><span style=\"font-weight: 400;\"> to enter the values. You can add a list of airports from which flights are departing.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161131\/dropdown-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47929\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161131\/dropdown-1-1024x456.png\" alt=\"\" width=\"640\" height=\"285\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161131\/dropdown-1-1024x456.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161131\/dropdown-1-300x134.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161131\/dropdown-1.png 1922w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><br \/>\n<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><strong>Repeat Step 2 <\/strong>to add the <strong>To <\/strong>field, for the arrival airport.<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Drag and drop a <\/span><strong>Date <\/strong><span style=\"font-weight: 400;\">field onto the form, to add the <\/span><strong>Departure Date<\/strong><span style=\"font-weight: 400;\">.\u00a0<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><strong>Display Name, <\/strong><span style=\"font-weight: 400;\">say <\/span><em><span style=\"font-weight: 400;\">Departure Date.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Name<\/strong><span style=\"font-weight: 400;\"> used for internal reference, say <\/span><em><span style=\"font-weight: 400;\">DepartureDate.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Description<\/strong><span style=\"font-weight: 400;\"> of the field.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Placeholder<\/strong><span style=\"font-weight: 400;\"> value to be displayed in the field when blank, say, <\/span><em><span style=\"font-weight: 400;\">Please select the departure date.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><b>Default Value<\/b> (Optional), you can, for example, mention the Current Date; <b>please note<\/b><\/span><span style=\"font-weight: 400;\"> that you can clear (using the \u2018x\u2019 option on the field) as well as edit this value at run-time, if the field is not read-only.<\/span><em><span style=\"font-weight: 400;\"><br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161119\/date-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47923\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161119\/date-3-1024x456.png\" alt=\"\" width=\"640\" height=\"285\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161119\/date-3-1024x456.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161119\/date-3-300x134.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161119\/date-3.png 1922w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><br \/>\n<\/span><\/em><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Add a second Date field, for the Return Date and repeat Step 4.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Drag and drop a Radio Button component onto the form for the <\/span><strong>Fare <\/strong><span style=\"font-weight: 400;\">field, and set it up as follows:<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Display Name, say Fare.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Name used for internal reference, say Fare.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Description of the field.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Placeholder value to be displayed in the field when blank, say, Please select the Fare Category.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Scroll and locate Data Settings, then click Add Values to enter the values \u2013 Economy, Premium Economy and First Class. You can mark one value, e.g. Premium Economy, as default. This would be selected by default at the time of execution.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161210\/radiobutton.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47944\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161210\/radiobutton-1024x456.png\" alt=\"\" width=\"640\" height=\"285\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161210\/radiobutton-1024x456.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161210\/radiobutton-300x134.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161210\/radiobutton.png 1922w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><br \/>\n<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Add a <\/span><strong>Pro Tip<\/strong><span style=\"font-weight: 400;\"> component. This field will only be visible if the user selects <\/span><em><span style=\"font-weight: 400;\">Economy <\/span><\/em><span style=\"font-weight: 400;\">as the <\/span><em><span style=\"font-weight: 400;\">Fare<\/span><\/em><span style=\"font-weight: 400;\">.<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><strong>Display Name, <\/strong><span style=\"font-weight: 400;\">say <\/span><em><span style=\"font-weight: 400;\">Pro Tip<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Name<\/strong><span style=\"font-weight: 400;\"> used for internal reference, say <\/span><em><span style=\"font-weight: 400;\">Protip.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Description<\/strong><span style=\"font-weight: 400;\"> of the field, say <\/span><em><span style=\"font-weight: 400;\">Book a Premium Economy seat and get a free hot meal onboard.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Placeholder<\/strong><span style=\"font-weight: 400;\"> value to be displayed in the field when blank.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Scroll down to <\/span><strong>Visibility Settings <\/strong><span style=\"font-weight: 400;\">and click <\/span><strong>Add Visibility Rule.\u00a0<\/strong><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Now, set the rule by building the following logical expression:<\/span><\/span><em><em>Fare <code>Equal to Value<\/code> Economy.<\/em><\/em>This rule ensures that the <em>Pro Tip <\/em>will only be visible when the user selects the <em>Economy <\/em>option under the Fare field.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161229\/visibility-rules.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47956\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161229\/visibility-rules-1024x456.png\" alt=\"\" width=\"640\" height=\"285\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161229\/visibility-rules-1024x456.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161229\/visibility-rules-300x134.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161229\/visibility-rules.png 1922w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\">Drag and drop a <strong>Text Field<\/strong> component onto the form, to add the <strong>Passenger First Name<\/strong> field.\n<ol>\n<li style=\"font-weight: 400;\"><strong>Display Name, <\/strong><span style=\"font-weight: 400;\">say <\/span><em><span style=\"font-weight: 400;\">Passenger First Name.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Name<\/strong><span style=\"font-weight: 400;\"> used for internal reference, say <\/span><em><span style=\"font-weight: 400;\">PassengerFirstName.<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Description<\/strong><span style=\"font-weight: 400;\"> of the field.<\/span><\/li>\n<li style=\"font-weight: 400;\"><strong>Placeholder<\/strong><span style=\"font-weight: 400;\"> value to be displayed in the field when blank, say, <\/span><em><span style=\"font-weight: 400;\">Enter the name of the account holder<\/span><\/em><span style=\"font-weight: 400;\">.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161219\/textbox.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47950\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161219\/textbox-1024x456.png\" alt=\"\" width=\"640\" height=\"285\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161219\/textbox-1024x456.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161219\/textbox-300x134.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161219\/textbox.png 1922w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><br \/>\n<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Repeat <\/span><strong>Step 7<\/strong><span style=\"font-weight: 400;\"> to add the <\/span><strong>Passenger Last Name<\/strong><span style=\"font-weight: 400;\"> field.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use any additional fields that are required for your process. For example, a <\/span><em><span style=\"font-weight: 400;\">Select Flight<\/span><\/em><span style=\"font-weight: 400;\"> field, as a Radio Button, further fields for flight documents, (as e.g.: Text, Text Area, etc.) onboard meal options (as e.g.: Checkboxes or Radio Buttons), etc.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">You can select how the VA handles the conversation when the user cancels the form. <\/span><span style=\"font-weight: 400;\">You can choose from two options:<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Discard the task and trigger End of Task Event:<\/span> <span style=\"font-weight: 400;\">This is the default option.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911105732\/Req-1_Form-Cancel-Default-behavior.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-59294\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911105732\/Req-1_Form-Cancel-Default-behavior-281x300.png\" alt=\"\" width=\"281\" height=\"300\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911105732\/Req-1_Form-Cancel-Default-behavior-281x300.png 281w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911105732\/Req-1_Form-Cancel-Default-behavior.png 433w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><\/a><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Continue with this task and transition to this node: In the <\/span><b>Select Node<\/b><span style=\"font-weight: 400;\"> drop-down list, you can select any node present in the current dialog task.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911105900\/Req-1_Form-Cancel-Task-not-ending.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-59297\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911105900\/Req-1_Form-Cancel-Task-not-ending-209x300.png\" alt=\"\" width=\"209\" height=\"300\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911105900\/Req-1_Form-Cancel-Task-not-ending-209x300.png 209w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911105900\/Req-1_Form-Cancel-Task-not-ending.png 378w\" sizes=\"auto, (max-width: 209px) 100vw, 209px\" \/><\/a><br \/>\n<\/span><\/li>\n<\/ul>\n<table style=\"background-color: #fffbea; width: 1317px; height: 62px;\" width=\"100%\">\n<tbody>\n<tr>\n<td width=\"100%\"><strong><em>Note<\/em><\/strong><em>: <span style=\"font-weight: 400;\">:The target node has to be in the same dialog, you cannot make a jump to a target node outside the current dialog. The list of target nodes only shows the local nodes. <\/span><span style=\"font-weight: 400;\">If the target node is not present during runtime, the platform presents the error <\/span><b>Error in continuing the conversation, <\/b><span style=\"font-weight: 400;\">and the task should get discarded.<\/span><\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Your form is ready.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can toggle between <\/span><strong>Desktop View<\/strong><span style=\"font-weight: 400;\"> and <\/span><strong>Mobile View<\/strong><span style=\"font-weight: 400;\"> to see how it looks on each device type.\u00a0<\/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-2\/wp-content\/uploads\/sites\/45\/20221004161125\/device-views.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47926\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161125\/device-views-1024x501.png\" alt=\"\" width=\"640\" height=\"313\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161125\/device-views-1024x501.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161125\/device-views-300x147.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161125\/device-views.png 1922w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Use the <\/span><strong>Test <\/strong><span style=\"font-weight: 400;\">button to see a preview. Below is a demo of the user experience with the form we have built:<\/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-2\/wp-content\/uploads\/sites\/45\/20221004161150\/form-ux.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-47932\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161150\/form-ux.gif\" alt=\"\" width=\"667\" height=\"350\" \/><\/a><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dialog_Task_Configuration\"><span style=\"font-weight: 400;\">Dialog Task Configuration<\/span><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We will be creating a dialog task and adding a form node to trigger the Digital Form created in the above step and use a service node to make a service call to complete the booking process. Please see <\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/chatbot-overview\/using-the-dialog-builder-tool\/\"><span style=\"font-weight: 400;\">Using the Dialog Builder<\/span><\/a><span style=\"font-weight: 400;\"> for details on working with Dialog Tasks.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Create_a_Dialog_Task\"><span style=\"font-weight: 400;\">Create a Dialog Task<\/span><\/span><\/h3>\n<ol>\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 the left navigation menu, select <\/span><strong>Conversational Skills &gt; Dialog Tasks.<\/strong><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click <\/span><strong>Create Dialog<\/strong><span style=\"font-weight: 400;\"> to create a new Task<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Enter the <\/span><strong>Intent Name<\/strong><span style=\"font-weight: 400;\">, say, <\/span><em><span style=\"font-weight: 400;\">Book a Flight<\/span><\/em><\/li>\n<li style=\"font-weight: 400;\"><strong>Create &amp; Proceed<\/strong><span style=\"font-weight: 400;\"> to open the dialog builder page.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161205\/newtask-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47941\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161205\/newtask-3.png\" alt=\"\" width=\"476\" height=\"420\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161205\/newtask-3.png 958w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161205\/newtask-3-300x265.png 300w\" sizes=\"auto, (max-width: 476px) 100vw, 476px\" \/><\/a><br \/>\n<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Add_a_Digital_Form_Node\"><span style=\"font-weight: 400;\">Add a Digital Form Node<\/span><\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click the <\/span><strong>+<\/strong><span style=\"font-weight: 400;\"> next to the intent node and select the <\/span><strong>Digital Form<\/strong><span style=\"font-weight: 400;\"> node.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">From the dropdown list select the <\/span><em><span style=\"font-weight: 400;\">Booking Form<\/span><\/em><span style=\"font-weight: 400;\"> we created earlier.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You will be prompted to select the <\/span><strong>Form Experience.<\/strong><span style=\"font-weight: 400;\"> Kore.ai XO Platform allows you to gather user input both from the form and through conversation based on the channel.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">For this use case, let us select <\/span><strong>Only Form UI<\/strong><span style=\"font-weight: 400;\"> experience.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A Form Node would be added, you can customize the form name, etc.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">We are changing the <\/span><strong>Name<\/strong><span style=\"font-weight: 400;\"> to <\/span><em><span style=\"font-weight: 400;\">BookingForm <\/span><\/em><span style=\"font-weight: 400;\">and <\/span><strong>Display Name<\/strong> <span style=\"font-weight: 400;\">to <\/span><em><span style=\"font-weight: 400;\">Booking Form<\/span><\/em><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ol>\n<p><a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161113\/add-formnode.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47920\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161113\/add-formnode-1024x456.png\" alt=\"\" width=\"640\" height=\"285\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161113\/add-formnode-1024x456.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161113\/add-formnode-300x134.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161113\/add-formnode.png 1922w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Add_a_Message_Node\"><span style=\"font-weight: 400;\">Add a Message Node<\/span><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Next, we will see how to capture the values returned by the Form Node using a Script and a Message node..<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Add a <\/span><strong>Message Node<\/strong><span style=\"font-weight: 400;\"> to the form node.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Set the <\/span><strong>Name<\/strong><span style=\"font-weight: 400;\"> to <\/span><em><span style=\"font-weight: 400;\">FormMessage<\/span><\/em><span style=\"font-weight: 400;\"> and <\/span><strong>Display Name<\/strong><span style=\"font-weight: 400;\"> to <\/span><em><span style=\"font-weight: 400;\">Form Message<\/span><\/em><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click <\/span><strong>Manage <\/strong><span style=\"font-weight: 400;\">under <\/span><strong>Bot Responses<\/strong><span style=\"font-weight: 400;\"> to open the message editor.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Select the <\/span><strong>JavaScript<\/strong><span style=\"font-weight: 400;\"> tab and enter the following code. This is a simple script that captures some of the data from within the context object, as submitted by the user into the Form, and displays it accordingly.<br \/>\n<\/span><code>var message;<\/code><br \/>\n<code>\u00a0 message = 'You have booked a '+context.forms.BookingForm.TripType+' flight in the name of '+context.forms. BookingForm.PassengerLastName;<\/code><br \/>\n<code>\u00a0 message = message + ' and opted for '+ context.forms. BookingForm.Fare;<\/code><br \/>\n<code>print(message);<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911145447\/Req-3_TravelVA_Updated-pro-tip-for-manage-user-prompt.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-59344 size-large\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911145447\/Req-3_TravelVA_Updated-pro-tip-for-manage-user-prompt-1024x485.png\" alt=\"\" width=\"640\" height=\"303\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911145447\/Req-3_TravelVA_Updated-pro-tip-for-manage-user-prompt-1024x485.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911145447\/Req-3_TravelVA_Updated-pro-tip-for-manage-user-prompt-300x142.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20230911145447\/Req-3_TravelVA_Updated-pro-tip-for-manage-user-prompt.png 1868w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><br \/>\n<\/a><\/code><\/li>\n<li style=\"font-weight: 400;\">Your dialog task is ready to use a digital form.<br \/>\n<a ref=\"magnificPopup\" href=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161156\/message-node.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47935\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161156\/message-node-1024x456.png\" alt=\"\" width=\"640\" height=\"285\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161156\/message-node-1024x456.png 1024w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161156\/message-node-300x134.png 300w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161156\/message-node.png 1922w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h1><span class=\"ez-toc-section\" id=\"Test_the_Assistant\"><span style=\"font-weight: 400;\">Test the Assistant<\/span><\/span><\/h1>\n<p><strong>Talk to the bot<\/strong><span style=\"font-weight: 400;\"> to trigger the above dialog. The form will be displayed, enter the values and click Submit, the message will be displayed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can use the context object as shown above in <\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/dialog-task\/working-with-the-script-node\/\"><strong>Script<\/strong> <\/a><span style=\"font-weight: 400;\">or <\/span><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/bot-builder-tool\/dialog-task\/working-with-the-service-node\/\"><strong>Service<\/strong> <\/a><span style=\"font-weight: 400;\">nodes for further processing of the booking.<\/span><\/p>\n<p><a href=\"https:\/\/developer.kore.ai\/v10-2\/docs\/bots\/how-tos\/how-to-add-data-into-data-tables-from-digital-forms\/\"><span style=\"font-weight: 400;\">See here<\/span><\/a><span style=\"font-weight: 400;\"> for how to add this data into data tables.<\/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-2\/wp-content\/uploads\/sites\/45\/20221004161214\/talk-to-bot-7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-47947\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161214\/talk-to-bot-7.png\" alt=\"\" width=\"490\" height=\"421\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161214\/talk-to-bot-7.png 600w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v10-2\/wp-content\/uploads\/sites\/45\/20221004161214\/talk-to-bot-7-300x258.png 300w\" sizes=\"auto, (max-width: 490px) 100vw, 490px\" \/><\/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 How-To, we will explore a scenario in a Travel Planning assistant, through which a user can book a flight. We will see how Digital Forms can be used to gather all the required information from the user, then make the booking based on that information. For details on what Digital Forms are and&#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-48007","post","type-post","status-publish","format-standard","hentry","category-travel-planing-assistant"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/posts\/48007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/comments?post=48007"}],"version-history":[{"count":6,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/posts\/48007\/revisions"}],"predecessor-version":[{"id":61962,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/posts\/48007\/revisions\/61962"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/media?parent=48007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/categories?post=48007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v10-2\/wp-json\/wp\/v2\/tags?post=48007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}