---
sourceDocument: Yokohama Conversational Interfaces
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/conversational-interfaces

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama Conversational Interfaces

ft:clusterId :

    - convint

bundleId :

    - convint

workflow :

    - Platform


---

# Default input and output rich controls for a custom chat integration

# Default input and output rich controls for a custom chat integration {#ariaid-title1}

Release version: Yokohama  
Updated January 30, 2025  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read
Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of Default input and output rich controls for a custom chat integration

This content explains how to map default input and output rich controls to a custom chat integration in ServiceNow using theCustom Adapter Configurations \[syscscustomadapterconfig\]table.
Proper mapping and transformer implementation are essential to ensure smooth chat responses and a positive end-user experience.
The controls correspond to theuiTypeparameter used in Virtual Agent Designer to build conversations.
Show full answer Show less  

## Key Features

* **ActionRichControl:** Manages various conversation events and actions. It wraps multiple action message types (e.g., StartSpinnerActionMsg, SwitchToVirtualAgentActionMsg) into a single outbound transformer, simplifying integration. No inbound transformer is needed for this control. If sent from a live agent, it includes an **agentInfo** attribute.
* **DefaultPicker:** Supports File Picker, Topic Picker, and Boolean controls. It allows configuration of options with labels, values, descriptions, attachments, and enablement status. An **order** parameter can prioritize displayed topics.
* **DefaultText:** Maps Input Text, Output Text, and File Upload controls. It supports properties like requirement status, text recognition (nluTextEnabled), input masking (e.g., SECURE, SENSITIVE), and labeling.
* **DefaultDate:** Supports Date, DateTime, and Time input controls with similar configuration options.
* **DefaultOutputLink:** Defines link response controls with customizable label, header, type, and action URL.
* **DefaultOutputImage:** Manages image response controls by specifying the image URL.
* **DefaultOutputCard:** Supports card-style response controls, including template name and JSON data string.
* **DefaultOutputHtml:** Enables HTML content responses with configurable style, size, and HTML code.
* **DefaultOutputTable:** Provides table response controls with headers, navigation button labels, and data arrays.
* **DefaultGroupedPartsOutputControl:** Handles multi-response controls grouping multiple links or items with headers and contextual information.
* **DefaultMultiPartOutput:** Supports multi-part responses containing embedded controls such as HTML content, with navigation controls.
* **DefaultCustomControl:** Allows integration of user-defined custom controls with properties for naming, requirement, UX component IDs, input/output designation, and serialized JSON data.

## Practical Implications for ServiceNow Customers

Mapping these default rich controls correctly in your custom chat adapter ensures that your chat integration can handle a wide variety of conversation elements, from simple text and date inputs to complex multi-part and custom controls. It guarantees that users will receive appropriate responses and interactive elements tailored to the channel's capabilities. Implementing outbound transformers for these controls ensures that responses are served effectively, enhancing the chat experience. Live agent interactions carry additional metadata, enabling better context handling.

By understanding and utilizing these default controls, ServiceNow customers can efficiently build, customize, and extend their Virtual Agent chat experiences to fit their specific business needs and communication channels.  
Input and output rich controls must be mapped to your custom chat integration in the
Custom Adapter Configurations \[sys_cs_custom_adapter_config\] table. If a rich control is missing
an outbound transformer implementation, a response is not served to the end user and that user
may get an unsatisfactory chat experience.
The following default rich controls map to input and output rich controls. The
uiType parameter refers to a topic control used to build
conversations in Virtual Agent Designer.  
{#default-rich-controls-va-cccif__table_rqm_lvn_qmb__entry__2}

| Rich control | Description |
|-|-|
| ActionRichControl | This component handles the different events and actions that occur in a conversation. Some actions may not apply to all channels. For example, StartSpinnerActionMsg is ignored in SMS. ServiceNow® Virtual Agent produces the following types of action messages through this framework. The custom chat interface only recognizes certain action message types. * SeparatorActionMsg \|\|actionMsg instanceof * SystemActionMsg \|\|actionMsg instanceof * TopicFinishedActionMsg \|\|actionMsg instanceof * SwitchToVirtualAgentActionMsg \|\|actionMsg instanceof * SwitchConversationActionMsg \|\|actionMsg instanceof * ChatSubHeaderActionMsg \|\|actionMsg instanceof * StartSpinnerActionMsg \|\|actionMsg instanceof EndSpinnerActionMsg * SubscribetoSupportQueue \|\|actionMsg instanceof * SubscribeToChatPresence \|\|actionMsg instanceof * SwitchToLiveAgentActionMsg \|\|actionMsg instanceof {#default-rich-controls-va-cccif__ul_odf_ykm_hmb} ActionRichControl wraps these messages inside the actionMsg element. So, a single outbound transformer for ActionRichControl can handle all of these messages. There is no need for an inbound transformer for this component. |
| agentInfo parameter | If the rich control is sent from a live agent, then the agentInfo attribute is added to the rich control. Example: { uiType: "someType", group: "someGroup" agentInfo: { sentFromAgent: true }  // please note that this object may contain more info in subsequent releases. ... } |
| DefaultPicker | Maps to [File Picker](https://servicenow-prod.fluidtopics.net/D60UEeCPVwDNOZFfzBmVMA "Use the File Picker user input control in a Virtual Agent topic to prompt a user to upload an image or any file type. After the user uploads an image file, the image appears immediately in the Virtual Agent client."), Topic Picker, and [Boolean](https://servicenow-prod.fluidtopics.net/_fU1PDSS5mneXWUElT5GQw "Use the Boolean user input control in a Virtual Agent topic to present a Yes/No prompt to the user.") controls. Example: { uiType: "Picker/TopicPicker/Boolean", group: "DefaultPicker", nluTextEnabled: true/false, promptMsg: "", // optional (needed for TopicPicker) label: "The question for the list",   // always filled itemType: "Picture/List"  // needed to user key to expect picture attached options: [ { label: "display label prompt", value: "the value required to satisfy the question", description: "a description of value_1 item" attachment: "www.foo", enabled: true/false }, ... ] } The optional order parameter lets you specify the order in which promoted topics should display. For example: "options": [ { label: "Check IT Ticket Status", value: "55720b465bf0201024f11fc40a81c72d", order: 100, enabled: true }, { label: "Live Agent Support", value: "ce2ee85053130010cf8cddeeff7b12bf", order: 200, enabled: true }, { label: "Open IT Ticket 2", value: "2a46cffbc7602010v088bbf603c260a7", order: 300, enabled: true } ] |
| DefaultText | Maps to [Input Text](https://servicenow-prod.fluidtopics.net/nFFAwDdJsnoHmzgubmBnww "The Text user input control in a Virtual Agent topic prompts the user for a text string."), [Output Text](https://servicenow-prod.fluidtopics.net/Lq75NOS8y2~qPGMdsUQ1KQ "Use the Text bot response control in a Virtual Agent topic to display a bot response as text. You can format the Text bot responses using the text editor controls. For example, you can bold or italicize the text, as well as include links, bulleted lists, and emojis."), and File Upload controls. Example: { uiType: "InputText/OutputText/FileUpload/Picture", group: "DefaultText", required: true/false, nluTextEnabled: true/false, itemType: "file/image/inputtext/outputtext", maskType: "SECURE/SENSITIVE/NONE"  // null except for InputText/OutputText label: "The Question?" } |
| DefaultDate | Maps to [Date and Time](https://servicenow-prod.fluidtopics.net/slmJG0UiR36gTM_x7hwgSQ "Use the Date Time user input control in a Virtual Agent topic to enable the user to select a calendar date, time (hours and minutes), or both.") controls. { uiType: "Date/DateTime/Time", group: "DefaultDate", required: true/false, nluTextEnabled: true/false, label: "The Question?" } |
| DefaultOutputLink | Maps to [link response](https://servicenow-prod.fluidtopics.net/~qFQJTJjfpV7SUNA9nu0nQ "Use the Link bot response control in a Virtual Agent topic to present a bot response. The response contains a header prompt with either a single URL link to an item or multiple URL links for up to three items.") controls. Example: { uiType: "OutputLink", group: "DefaultOutputLink", label: "link label", header: "link header", type: "link", value: { action: "www.foo", } } } |
| DefaultOutputImage | Maps to [image response](https://servicenow-prod.fluidtopics.net/3Wqfixbjq58yxSZutrAYEw "Use the Image bot response control in a Virtual Agent topic to upload and display an image from a URL link. The image aspect ratio determines how the image is sized in the bot chat bubble.") controls. Example: { uiType: "OutputImage", group: "DefaultOutputImage", value: "www.foo" } |
| DefaultOutputCard | Maps to [card response](https://servicenow-prod.fluidtopics.net/w4TRyRs4YqQe0tTN~bTnvQ "Use the Card bot response control in a Virtual Agent topic to upload and display selected information from a record on your instance, along with rich content, such as a video or image.") controls. Example: { uiType: "OutputCard", group: "DefaultOutputCard", templateName: "Card", data: "some json data string" } |
| DefaultOutputHtml | Maps to [HTML response](https://servicenow-prod.fluidtopics.net/B9hHwnPYv99vwDutkjF5nQ "Use the HTML bot response control to display static HTML text in the Virtual Agent bot response.") controls. Example: { uiType: "OutputHtml", group: "DefaultOutputHtml", style: "inline", height: 100, width: 100, value: "<div>html</div>" } |
| DefaultOutputTable | Maps to [table response](https://servicenow-prod.fluidtopics.net/dvGoFAPKgfmWppG35ucz4w "Use the Table bot response control in a Virtual Agent topic to display a bot response as a table.") controls. Example: { uiType: "OutputTable", group: "DefaultOutputTable", label: "Table Title", headers: ["Column 1", "Column 2"], navigationBtnLabel: "See next", data: [ ["foo1", "foo2"], ["bar1", "bar2"] ] } |
| DefaultGroupedPartsOutputControl | Maps to [multi-response](https://servicenow-prod.fluidtopics.net/ydfuX1EQnmMZgYylcxh~oA "Use the Multi-response bot response control in a Virtual Agent topic to sequentially display two or more outputs. Outputs can be text, image, link, or HTML. Users can move from one output to the next through a provided navigation button.") controls. Example: { uiType: "GroupedPartsOutputControl", group: "DefaultGroupedPartsOutputControl" groupPartType: "Link", header: "header message", values: [ { action: "www.foo", description: "description", label: "link_1 label", context: "ITSM" }, ... ] } |
| DefaultMultiPartOutput | Maps to [multi-response](https://servicenow-prod.fluidtopics.net/ydfuX1EQnmMZgYylcxh~oA "Use the Multi-response bot response control in a Virtual Agent topic to sequentially display two or more outputs. Outputs can be text, image, link, or HTML. Users can move from one output to the next through a provided navigation button.") controls. Example: { uiType: "MultiPartOutput", group: "DefaultMultiPartOutput" navigationBtnLabel: "Go next", content: { uiType: "OutputHtml", style: "inline", type: "html", height: 100, width: 100, value: "<div>html</div>" } } |
| DefaultCustomControl | Maps to [custom controls](https://servicenow-prod.fluidtopics.net/0gi~UK9McfAqhvf8VhGk6Q "Use the Custom Control utility in a Virtual Agent topic or topic block to reference a custom input control or a custom response control. Custom controls complement the controls provided in Virtual Agent Designer."). Example: { uiType: "CustomControl", group: "DefaultCustomControl", name: "The name of the Custom Control (sys_cs_custom_control.name)", required: true/false, uxComponentDefinitionSysId: "seismicComponentId" // or null if not isInput: true/false, // whether to wait for a response value or if just output serializedControlData: "User defined JSON from generateControlData function"; } |
[Table 1. Default input and output rich controls]

{#default-rich-controls-va-cccif__table_rqm_lvn_qmb}