Discussion
![](https://accounts.pega.com/sites/default/files/styles/user_image/public/2023-06/de4f8957-75c3-49a0-ab1a-3094a8db9dec.jpeg?h=43272360&itok=Y1n0Miqk)
Pegasystems Inc.
PL
Last activity: 28 Nov 2018 8:10 EST
How to create advanced replies in WebChat
Overview
Web chat is one of the OOTB available conversational channel, as in other MCP (multichannel case processor) framework-based channels it is possible to reply via some quick responses of different type. Most of them are quite static, there’s support for multi-variant text responses where the variant is chosen randomly but it is still some static response. There are many cases where we have some more complex use case and we would like to support more dynamic responses based on specific data provided by our application or leverage more complex responses with better user experience.
Custom response
Custom response is one of the OOTB response type in WebChat, it allows user to specify Data Transform rule as a source of response. Data transform is applied during runtime to populate the outbound message with some data which could be:
- simple static content (simple text response or menu response)
- complex static content (“horizontal tiles” response)
- dynamic content (content based on some dynamic data)
To give some better understanding to end user, we have two template DT provided for this response:
- pyPopulateData – produces simple menu response
- pyGenericTemplate – produces two tiles response, each tile has some image and menu items
Note: Data transform has to be defined in Work-Channel-Interaction-WebChat inheritance structure.
Use case
I would like my bot to respond with two fancy tiles with nice images and allow end user to choose options on each of the tile (Sure,Not at all). Tile should contain title and subtitle.
To achieve this we need to create single outbound message with specific structure, here’s the screenshot of the solution and result:
Structure
How to achieve specific result?
Each pyOutboundMessage on pyInteractionCase represents one single chat “bubble”:
To achieve multiple single messages we need to populate multiple pyOutboundMessage’s:
Each outbound message could be rendered as different type, we can do combinations of them as well using the mechanism described above.
Text
.pyText – text displayed as a response
Menu
.pyText – text displayed as a title
.pyChoices – list of choices
.pyChoices(menu_item_index).pyText – text displayed as a choice
.pyChoices(menu_item_index).pyPayload – value which will be send onClick
Tiles
.pyText – empty
.pyChoices – list of tiles
.pyChoices(tile_index).pyText – Tile’s title
.pyChoices(tile_index).pyPayload – Tile’s subtitle
.pyChoices(tile_index).pyContent – url to image
.pyChoices(tile_index).pyChoices – Tile’s menu items
.pyChoices(tile_index).pyChoices(choice_index).pyText - text displayed as a choice
.pyChoices(tile_index).pyChoices(choice_index).pyPayload – value which will be send onClick
Dynamic replies
Using the above examples you can implement Data transform in more dynamic way by iterating over some Data Page or other source and generate the output based on another data. The example below shows how to do that in the simples possible way. It will display .pyUserName of each D_Users record as a single reponse in WebChat.
Summary
For most of Pega Developers it is the best posible way to implement any response, what's more it allows you to refer existing data, it allows you to use custom functions inside and any other stuff available within Data Transform rule. This is called as part of processing so we always have the interaction case context (pyInteractionCase) and access to all system pages like Operator or Application. Please note, this is available only in Dev Studio (Designer Studio) as App Studio (Express) doesn't allow us to use rule forms. In the App Studio portal it is disabled and this response command is read-only.
Tiles format is also available in Facebook Messenger channel, it works on the same structure as WebChat so the DT could be reused between both channels (please note that in this case the class requires to be set to Work-Channel-Interaction, Work-Channel- etc...).