Comment on page
Elements Interactive Forms
Symphony Elements Forms enable bots to send messages that contain interactive forms with pre-designed text fields, dropdown menus, person selectors, buttons and more. This allows bots to interact with users in a very easy and guided way.
By reusing our pre-designed standard UX component libraries, Elements provide developers with out-of-the-box tools to easily create interactive bot messages that look and feel like they belong in Symphony. To use the Elements, you just need to call the Create Message endpoint with your bot, using the MessageML format.
Here after, you will find a brief introduction of how to send Elements, then an update of the message flow for Elements, and finally the form specifications.
To start using Symphony Elements, you first need to create a form element using the
<form>MessageML tag. The form element can be considered the "frame" of a message, containing elements that will be sent by the bot and subsequently read by the datafeed.
You can see below an example of how a user can interact with a form that was sent by a bot, as well as the messageML structure of the message that was sent by the bot, and the payload that is generated and therefore delivered to the bot via the datafeed, containing the information completed and submitted by the user. Please use the tabs to navigate between these 3 documents.
User interacting with a form message
Structure of message sent
<text-field name="name" required="true" placeholder="Name" />
<text-field name="email" required="true" placeholder="email" />
<h4>Select your country</h4>
<h4>Choose your option</h4>
<radio name="example_radio" value="option_01" checked="true">Marked</radio>
<radio name="example_radio" value="option_02">Unmarked</radio>
<h4>Choose your option</h4>
<checkbox name="checkbox_1" value="value01" checked="true">Checked</checkbox>
<checkbox name="checkbox_2" value="value02">Unchecked</checkbox>
<h4>Send a comment</h4>
<textarea name="comment" placeholder="Add your comment here" required="true" />
<button name="submit_button" type="action">Submit</button>
"displayName": "Internal User",
To begin leveraging Symphony Elements in your bot workflows continue onto our Available Elements that you can find in the subpages.
Every message exists as part of a flow, in a continuum of events that results in user interaction.
Here is that flow in colorful diagram form, for you to know more about each stage of the message:
- 1.A Bot sends a message with Symphony Elements in a form
- 2.The message/from is visible to users. Users interact with the elements
- 3.Once submitted, the data is submitted to the bot
- 4.Bots can access the data, by reading the datafeed.
Forms are represented by the <form> tag, as you can see in the examples above.
- The form element can be considered the "frame" of a message, containing elements that will be sent by the bot and subsequently read by the datafeed.
- All of the data within a form element will be sent to a bot via the datafeed when a user clicks one of the action buttons in that form. The
nameattribute of the button will be the value of the
actionfield within the datafeed payload. That way the bot manager can know which button triggered the submission of that form. Starting with Agent 23.11, the auto-submit feature allows to submit the form with a TextField, or with a DropDown Menu.
- If there is more than one element in the form having the same
nameattribute, the value is converted to an array. Every index of the array is related to a specific element value. The index order is not guaranteed, so the developer needs to iterate through this array and collect the values.
- When a form is submitted and
multi-submitattribute is not specified, all the elements within it will be disabled, not being possible to edit or resend the same form. However, if the page is refreshed, the user can fill out the form again and submit it as a new form.
- The attribute
multi-submitallows the us to submit the form several times even without needing to refresh the page. It can take 2 different string values:
resetwhich resets the form to the default value when enabling it again for the user,
no-resetwhich keeps the values that were submitted by the user when enabling it again for the user.
The following example shows three forms being used as follows:
- The first form (default) shows how Symphony users interact with a form, and how the Elements are disabled once the form is submitted.
- The second form (multi-submit-reset) shows how to create a form that can be submitted several times and which resets all its Elements to their default value once the user submits it. You note the Elements are first disabled while loading, then the button shows the user the form has been submitted, before the form is enabled back to its default value for the user to submit it again.
- The third form (multi-submit-no-reset) shows how to create a form that can be submitted several times and which keeps last submitted values once the user submits it. You note the Elements are first disabled while loading, then the button shows the user the form has been submitted, before the form is enabled back to its last submitted value for the user to submit it again.
<text-field name="test"> This form becomes disabled once submitted</text-field>
<form id="multi-submit-reset" multi-submit="reset">
<text-field name="test" label="Resets values to default"> This form can be submitted more than once</text-field>
<form id="multi-submit-no-reset" multi-submit="no-reset">
<text-field name="test" label="Keeps last submitted values"> This form can be submitted more than once</text-field>
Last modified 12d ago