Working with custom controls in the IVA for Web Chatbot

Pega Intelligent Virtual Assistant (IVA) for Web Chatbot is based on the Pega Platform user interface. You embed the chatbot user interface as a standard chat window by using a web mashup on your web site. As a result, you can use standard Pega user interface controls or optionally create your own controls to fit the needs and requirements of your organization. By creating custom controls for your chatbot, you improve the overall user experience of the application and help users address their issues quicker and more efficiently.

The IVA includes a mechanism to help channel developers implement custom input controls that the system displays to users while they interact with the chatbot. You can also override the default mechanism used to display the standard built-in controls, such as a date or integer. By default, the chatbot uses a mechanism that is based on property types. For example, if the property of a question asked by the chatbot is a date type, then the system displays the date and time control so that users can pick a date using the Date picker control.

Chatbot user interface controls

Embed-Channel-Control- is the base abstraction class for all standard built-in controls that the IVA for Web Chatbot uses:

  • Embed-Channel-Control-Date - Defines the date control so that users can enter a date in the chatbot.
  • Embed-Channel-Control-DateTime - Defines the date and time control so that users can enter a date and time in the chatbot.
  • Embed-Channel-Control-Decimal - Defines the decimal control so that users can enter a decimal number in the chatbot.
  • Embed-Channel-Control-Form - Defines the form control so that users can fill out a simple form in the chatbot.
  • Embed-Channel-Control-Integer - Defines the integer control so that users can enter an integer number in the chatbot.
  • Embed-Channel-Control-QuickReplies - Defines the quick replies control so that users can quickly select one of several options displayed in the chatbot.
  • Embed-Channel-Control-Text - Defines the text control so that users can enter text in the chatbot.
  • Embed-Channel-Control-TimeOfDay - Defines the time of the day control so that users can enter a time in the chatbot.
  • Embed-Channel-Control-TrueFalse - Defines the true and false control so that users can enter a boolean value in the chatbot.

To create your own custom control for the IVA for Web Chatbot, you must define a new class that inherits from Embed-Channel-Control- in the following format: Embed-Channel-Control-<custom_control_name>. For example, to create a custom control for an autocomplete field, you can create the Embed-Channel-Control-Autocomplete class in the system. You can also extend the standard controls listed above that are used by the chatbot. For example, to create your own date control that displays information in a format for the Aztec calendar, you can create a new class called Embed-Channel-Control-Date-Aztec. For more information, see Creating custom controls for the IVA for Web Chatbot.

Custom controls are one way to display user input in the chatbot. You can also customize the action set that is triggered for the Send button. In addition, you can provide a custom transformation in the system, from a custom control to a text control. However, these additional feature are optional and depend on the requirements of your application. In most cases, you only implement your custom control in the chatbot so that it displays as a different type of input in the system.

Conditions under which the system displays the custom control

The system includes a mechanism that is an extension point, that you can use to determine which control to use based on the current state, for example, the current question in the chat window, or another condition.

Work-Channel-Interaction.pySetInputControl is an extension point with input parameters. By default, this extension point calls the pxCreateControlOfClass API which takes your custom control class as its parameter. The pySetInputControl activity contains the controlClass input parameter that defines the built-in suggestion for which control to use, based on the property type. You can decide whether to pass this parameter to the pxCreateControlOfClass class or not. The class that you specify as the parameter in the pxCreateControlOfClass determines which control the system displays in the preview console and the chat window.