Creating custom controls for the IVA for Web Chatbot
Improve how users interact with Pega Intelligent Virtual Assistant™ (IVA) for Web Chatbot by implementing your own user input controls for the chatbot. By implementing custom controls you ensure a better overall user experience, and that the IVA meets the needs and requirements of your organization. For example, when a chatbot displays your custom controls, such as an autocomplete field, users can obtain help and resolve their issues more quickly.
- Switch to Dev Studio.
- Create a new abstract class for your custom control in the following format: Embed-Channel-Control-<custom_control_name>.
- Open the Embed-Channel-Control-.pyDefault rule, save this data transform rule as Embed-Channel-Control-<custom_control_name>.pyDefault, set pxIsSimpleMode to false, and clear the Call superclass data transform check box.
- Override the Work-Channel-Interaction.pySetInputControl
rule and trigger the pxCreateControlOfClass activity with
Embed-Channel-Control-<custom_control_name> as
its parameter.
- Optional: To use a different type of input in the chatbot for the custom control, perform
the following steps:
- Open the Embed-Channel-Control-.pyInput section rule.
- Save this rule as the Embed-Channel-Control-<custom_control_name>.pyInput section.
- Edit the section rule to customize the input, and then save your changes.
- Optional: To customize the style and behavior of the Send button
in the custom control, perform the following steps:
- Open the Embed-Channel-Control-.pySubmitButton rule.
- Save this rule as the Embed-Channel-Control-<custom_control_name>.pySubmitButton section.
- Edit the section rule to customize the Send button and save your changes.
- Optional: To add more action buttons in the custom control, perform the following
steps:
- Open the Embed-Channel-Control-.pyActionButtons rule.
- Save this rule as the Embed-Channel-Control-<user_control_name>.pyActionButtons section.
- Edit the section rule to add more action buttons and save your changes.
- Optional: To switch between the simple and advanced mode shown in the default text area
of the custom control, perform the following steps:
- Open the Embed-Channel-Control-.pyOnSwitchToSimpleMode activity.
- Save this rule as the Embed-Channel-Control-<custom_control_name>.pyOnSwitchToSimpleMode activity.
- Edit the activity rule to switch to simple mode and save your
changes.These steps ensure that you provide a value conversion when the pxSwitchToSimpleMode API is called, no matter whether the system uses a standard control or your custom control.
- Open the Embed-Channel-Control-.pyOnSwitchToAdvancedMode activity.
- Save this rule as the Embed-Channel-Control-<custom_control_name>.pyOnSwitchToAdvancedMode activity.
- Edit the activity rule to switch to advanced mode and save your
changes.These steps ensure that you provide a value conversion when the pxSwitchToSimpleMode API is called, no matter whether the system uses a standard control or your custom control.
- Optional: To provide additional conversion of text entered in the custom control before
the system submits this user input to the chatbot for processing, perform the
following steps:
- Open the Embed-Channel-Control-.pyOnSubmit activity.
- Save this activity rule as Embed-Channel-Control-<custom_control_name>.pyOnSubmit.
- Edit the activity rule to provide additional conversion for the entered text, and then save your changes.
- Optional: To enable the addition of attachments for the custom control, perform the
following steps:
- Open the Embed-Channel-Control-.pyAttachmentAddingEnabled when rule.
- Save this rule as Embed-Channel-Control-<custom_control_name>.pyAttachmentAddingEnabled.
- Modify the when rule so that it returns true, and then save your changes.
- Optional: To customize a section that the system displays above the input area in the
chat window, perform the following steps:
- Open the Embed-Channel-Control-.pyActionsBar section rule.
- Save this rule as the Embed-Channel-Control-<custom_control_name>.pyActionsBar section.
- Edit the section rule used for the input area, and then save your changes.
- To make the custom section visible when your custom control is used, open the Embed-Channel-Control-.pyShowActionsBar when rule.
- Save this rule as Embed-Channel-Control-<custom_control_name>.pyShowActionsBar.
- Modify the when rule so that it returns true, and then save your changes.
- Switch back to App Studio.
Previous topic Changing the default text for action prompt in the IVA for Web Chatbot Next topic Working with custom controls in the IVA for Web Chatbot