Default input and output rich controls for a custom chat integration

  • Release version: Yokohama
  • Updated January 30, 2025
  • 3 minutes to read
    • Summarize
    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.

    Table 1. Default input and output rich controls
    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

    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, Topic Picker, and Boolean 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, Output Text, 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 controls.
    {
    uiType: "Date/DateTime/Time",
    group: "DefaultDate", 
    required: true/false,
    nluTextEnabled: true/false,   
    label: "The Question?"
     
}
    DefaultOutputLink Maps to link response controls.
    Example:
    {
    uiType: "OutputLink",
    group: "DefaultOutputLink",
    label: "link label",
    header: "link header",
    type: "link",
    value: {
        action: "www.foo",
    }	
}
     
}
    DefaultOutputImage Maps to image response controls.
    Example:
    {
    uiType: "OutputImage",
    group: "DefaultOutputImage",
    value: "www.foo"
}
    DefaultOutputCard Maps to card response controls.
    Example:
    {
    uiType: "OutputCard",
    group: "DefaultOutputCard",
    templateName: "Card",
    data: "some json data string"
}
    DefaultOutputHtml Maps to HTML response controls.
    Example:
    {
    uiType: "OutputHtml",
    group: "DefaultOutputHtml",
    style: "inline",
    height: 100,
    width: 100,
    value: "<div>html</div>"
}
    DefaultOutputTable Maps to table response 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 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 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.
    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";    
}