UI Controls in Chatbot

UI Controls provide digital experience in chatbot. These can be used to accept some input from user or represent the information to the user.

You can design the conversation effectively with the help of user interface controls. Here is the list of User Control available:

  • List Buttons (Menu options for single select)
  • Multi-select List (Menu options with multi select)
  • Single Select dropdown list
  • Multiple Select dropdown list
  • Date Picker
  • Single Value Slider
  • Double Value Slider
  • Image Card
  • Video Card
  • Static Carousel
  • Dynamic Carousel
  • Meeting Control
  • File Upload
  • Location (Supported for WhatsApp Channel)
  • Form Control

Note: UI Controls are available for Web deployment. These are not available on WhatsApp due to text only interface. Some controls like list control are converted to text based menus on WhatsApp.

List Control

  • The list control is shown to show menu items or list to the user. 
  • User can select one option from the given items.
This image has an empty alt attribute; its file name is image-3-1024x755.png
  • To use List control select the UI Control type as List (Buttons). 
  • The default list control is shown vertical. You can select horizontal option given on the screen.
  • Select Add option button to add each menu item.
  • The field title is shown to the user, where as the field value is filled in the input parameter name when user selects the list item. 
  • Set variable name that will identify selected option. For example, if user select Flight Booking, you can add condition as
    {{TravelOption}} == Flight Booking
This image has an empty alt attribute; its file name is image-1024x893.png

Multi select list

  • Select the UI Control type as Multi-Select List.
  • Set the variable name e.g. var
  • Select Add options button to add check box item.
  • The field title is shown to the user, where as the field value is filled in the variable name when user selects the list item.
  • You can use the value of the selected item as {{var}}. For Example, to check selected item, you can add condition as {{var}} == buy

Dropdown List

Sometimes the a long list needs to be displayed to the user. For example, a list of countries. Such a long list will be bigger than chatbot height, and may not give good user experience. In such case, single select or multi-select drop down list can be used.

To use drop down list,

  1. Select node type as input paramter
  2. Set variable type as UI control
  3. Set UI control type as Drop Down list (Single or multiple-select)
  4. Set variable name to identify value selected by user.
  5. Use Add Options button to add values to be displayed for drop down list.

Date Control

You can use control to accept date from user. You can limit the date range while showing the control. For example, you can block future dates for birth date.

To use the date control,

  1. Set node type as input parameter
  2. Set variable type as UI control
  3. Set UI control type as Date Picker
  4. Set Date format. This will be used in variable once the user selects the date.
  5. You can optionally limit the stat and end date.
  6. To disable past or future dates, use – or + days or years in following format. For example in following screenshot,
    Start Date: -15y means, the date control will allow selection till past 15 years.
    End Date: 0d means user will not be able select future date.

Image Card

An image card is used to show image and menu options below it.

To use image card,
1. Select node type as input parameter
2. Set variable type as UI control
3. Set UI control type as Image card
4. Set Image Title and upload the image
5. Use Add options button to add menu options below image
6. Select type horizontal if you wish to show menus horizontally.
7. Set variable name for selected menu option.

Video Card

An video card is used to show video and menu options below it.


To use video card,
1. Select node type as input parameter
2. Set variable type as UI control
3. Set UI control type as Video card
4. Set Video Title and video URL
5. Use Add options button to add menu options below image
6. Select type horizontal if you wish to show menus horizontally.
7. Set variable name for selected menu option.

Static Carousel

A carousel is used to show collection of image, description and menu options under it. This can be used to display products, description, pricing and different menu options under it. User can browse through different options using left and right arrows

To use image carousel,
1. Select node type as input parameter
2. Set variable type as UI control
3. Set UI control type as Static carousel

4. Set variable name to identify action selected by user.
5. Select template type. Three templates are provided. The template changes the rendering format of image and description. A preview of information is shown while adding the details.

6. Use Add product button to add product details.
7. Copy image URL in IMAGE.
8. You can optionally set name, description, price, currency
9. You can add upto 3 action buttons under the image. You can select pre-defined button or set custom name of the action.

The variable name identifies the action selected by user. To identify the index of the selected card, use {{var_index}}. Index starts from zero.

For example, in above example if user selected Buy now action on second card, and variable name is set as carousel_option then following values are set.

{{carousel_option}} = Buy now

{{carouse_option_index}} = 1

Slider Control

Slider control is used to display range of numbers.

To use slider control,

1. Select node type as input parameter
2. Set variable type as UI control
3. Set UI control type as Slider Value Slider Control or Double Value slider control as per requirement.
4. Set min and max range.
5. Optionally set prefix to display with min and max range.
6. Set variable name to identify selected range by the user.

Meeting Control

You can integrate your gmail or outlook calendar to setup meetings with customers directly. The bot will show available dates, and free slots on selected dates to book a meeting. Once a slot is confirmed, invitation email is sent to customer and agent for meeting.

Before using a meeting Control, you need to setup email accounts of agents and their availability in Dashboard -> Meeting Scheduler.

To use meeting control,

1. Select node type as input parameter
2. Set variable type as UI control
3. Set UI control type as Meeting Control.
4. Set customer email in Email field. This is used to send invitation to the customer.

File Upload Control

You can ask the end users to upload certain documents through chatbot. For example a recruitment bot can ask users to upload their resume.

1. Select node type as input parameter
2. Set variable type as UI control
3. Set UI control type as File Upload
4. Set variable name to get path of the file uploaded.

Location (Supported for WhatsApp Channel) 

Please contact support@amplifyreach.com to use this control in your bot.

Form Control

You can design a Form control in chatbot to accept multiple inputs at a time.

Please contact support@amplifyreach.com to use this control in your bot.

Dynamic UI Controls

You can use UI controls to show data coming from API. To know more on using UI controls dynamically please write to support@amplifyreach.com