Carousel user input control

  • Release version: Washingtondc
  • Updated April 1, 2024
  • 7 minutes to read

    • Use the Carousel user input control in a Virtual Agent topic to present a prompt and a horizontal series of labeled images. The user can select a single item from the carousel.

    Tip:
    If you want to change the default number of listed items per page, you can modify the com.glide.cs.picker_page_limit system property. The default value is 10.

    Carousel input control properties for LLM topic discovery

    Property Description
    Node name Name that identifies this Carousel user input control node in the topic flow.
    Variable name Name of the variable that stores the selection made by the user. The variable name is automatically created from the Node name property.
    Detail description Description of the information that you need from users.
    Define carousel items Use a script to create items for selection in your carousel. The script should return an array containing one or more items. See the Example carousel item expression section in this topic.
    Advanced (optional)
    Enforce user prompt
    Enforce user prompt Toggle to open the User prompt field. The value in the User prompt field is shown to users rather than the LLM-generated message. You can create custom messages using plain language, scripts, or define conditions with the data pill picker.
    Additional instructions for LLM

    Further instructions to the LLM, such as adding data formats, restrictions, or default values for user responses. You can create additional instructions in plain language, input a script, or define conditions with the data pill picker.
    Hide or skip this node
    Conditionally show this node if

    No-code condition statement or low-code script that specifies a condition for presenting this node in the conversation. The condition must evaluate to true. This field is not applicable when the Carousel node is used within the Input Collector node.
    Allow user to skip this node if

    No-code condition statement or low-code script that specifies a condition for letting users skip this node in the conversation. The condition must evaluate to true. You can set this field using either the condition builder or a script. When this field is active, the node presents the user with a Skip option in the Virtual Agent conversation. Alternatively, in an LLM topic, you can reply with an utterance such as I want to skip this question. Virtual Agent chat window with Skip button following a query from the Virtual Agent.

    Example Carousel input control for LLM topic discovery

    Carousel properties Carousel prompt

    Basic properties include node name, detail description, and the define carousel items fields. Advanced options include Enforce user prompt, Additional instructions for LLM, and Hide or skip this node.
    Figure 1. Web UI carousel prompt
    An example chat in which the prompt asks, "Please select the image that matches your modem lights." The current selection shows a modem with all lights green.

    Carousel input control properties for NLU topic discovery

    Property Description
    Node name Name that identifies this Carousel user input control node in the topic flow.
    Variable name Name of the variable that stores the selection made by the user. The variable name is automatically created from the Node name property.
    Prompt

    Prompt or question for the user. The prompt can be either a text string or a script that returns text. This value is used only when the default value is not specified. For example: What's your name?

    NLU entity

    Option to associate an NLU entity with the node. If an NLU entity is associated with the input variable for this node, Virtual Agent can slot-fill the specified value based on the user's utterance. Select an entity from the list of entities associated with the topic intent.

    When you specify an entity for the node, the Do not ask users to confirm recognized entity toggle switch displays. When enabled, users are not prompted to confirm the extracted entity.

    This field is available only when NLU discovery is enabled on the instance.
    Define carousel items Use a script to create items for selection in your carousel. The script should return an array containing one or more items. See the Example carousel item expression section in this topic.
    No records response message Message to the user indicating that no records were found. The message can be either a text string or a script that returns text.
    Advanced
    Default value
    Default value

    Predefined value for the user response to the question or prompt. The response defined in the Default value confirmation field asks the user to confirm the default value. If the user responds with no, the value becomes null. The default value can be either a text string or a script that returns text. For example, if you're using dot-walking, the default value might be: Script Variables > Last username. Or if you're using a script, the default value might be: {{vaScripts.lastUsername}}.
    Confirmation messages
    Input completion confirmation Bot response shown to the user when the node interaction is complete. The message can be either a text string or a script that returns text. For example, if you're using dot-walking: Thanks, (Input Variables > Username)! Or if you're using a script, the acknowledgment might be: Thanks, {{vaInputs.username}}!.
    Default value confirmation

    Message that asks the user to verify that the value in the Default value field is correct. This message is used instead of a value in the Prompt field. It can contain either a text string or a script that returns text. For example, if you're using dot-walking: Are you (Input Variables > Username)? Or if you're using a script, the confirmation message might be: Are you {{vaScripts.lastUsername}}?.
    Conversation switching
    This section is available only when NLU discovery is enabled on the instance.
    Turn on to let users change the subject

    Option to enable NLU prediction for this node. If enabled, users can enter text to answer questions, regardless of the type of input control being used. Virtual Agent uses this utterance to match another existing intent, letting the user switch topics.
    Hide or skip this node
    Conditionally show this node if

    No-code condition statement or low-code script that specifies a condition for presenting this node in the conversation. The condition must evaluate to true.
    Allow user to skip this node if

    No-code condition statement or low-code script that specifies a condition for letting users skip this node in the conversation. The condition must evaluate to true. You can set this field using either the condition builder or a script. When this field is active, the node presents the user with a Skip option in the Virtual Agent conversation. Alternatively, in an LLM topic, you can reply with an utterance such as I want to skip this question. Virtual Agent chat window with Skip button following a query from the Virtual Agent.
    Skip reprompting if No-code condition statement or low-code script that specifies a condition for letting users skip reprompting in the conversation. When a preceding node is revisited through a topic loopback or Dialog Act, the Virtual Agent bypasses this node and automatically retain its original value.

    Example Carousel input control for NLU topic discovery

    Note:
    Virtual Agent Designer controls may display and function differently in other channels.
    Carousel properties Carousel prompt

    Basic properties include the node name, prompt, NLU entity, script definition for carousel items, and a "no records" response message.
    Figure 2. Web UI carousel prompt
    An example chat in which the prompt asks, "Please select the image that matches your modem lights." The current selection shows a modem with all lights green.
    Figure 3. ServiceNow mobile carousel prompt
    An example chat in which the prompt asks, "Please select one of the catalogue items." The current selection shows an iMac computer.

    Example carousel item expression

    (function execute() {
    var options = [];
       options.push(
            {
                'Name': 'Item 1',
                'Value': 'item_1',
                'Description': 'Acme keyboard model 200',
                'Body': 'https://images.pexels.com/photos/688666/pexels-photo-688666.jpeg'
            }
       );
       options.push(
            {
                'Name': 'Item 2',
                'Value': 'item_2',
                'Description': 'Acme keyboard model 300',
                'Body': 'https://images.pexels.com/photos/916472/pexels-photo-916472.jpeg'
            }
       );
       return options;

})()

    The script in the Carousel Item Expression property defines and returns an array containing the items that appear in your carousel. The elements of this array must contain name, value, and body keys. In the example, the script creates an array called options and adds two elements, each with the required keys. The images here are hard-coded as an example.

    Table 1. Example code key
    Key Description
    Name Name of the carousel item. This name is shown below the image on the carousel.
    Value Value for the item. When a user selects a carousel item, this value is stored in the variable named in the Variable name property.
    Description Text string that describes the carousel item. The description is shown below the image name. A carousel with more than three items displays left and right arrows for scrolling through the images and a Select button under each item. If a description is over 140 characters, users can expand the content.
    Body Image used in the carousel item. The value is a URL for an image file.

    Channel support

    Table 2. Channel support for the Carousel user input control
    Channel Support Constraints
    Web UI Supported None
    Mobile UI Supported None
    Now Assist panel

    Supported

    None
    Microsoft Teams Supported None. If the carousel contains more than 10 items, users must select Next to review the remaining items.
    Slack Supported None
    Workplace Supported None
    Facebook Messenger Supported The title for an image has a maximum limit of 40 characters. The text for the image has a maximum character limit of 60 characters. A user can view only 10 images at a time. If there are more than 10 images, the pagination format is used to view more options. The default value of the maximum number of images in a carousel for a page is set in the sn_va_fb_messenger.max_carousel_cards system property. This property is found in the System Properties [sys_properties] table.
    SMS Twilio Not supported Not applicable
    LINE Supported The title for an image has a maximum limit of 40 characters. The text for the image has a maximum character limit of 60 characters. A user can view only 10 images at a time. If there are more than 10 images, the pagination format is used to view more options. The default value of the maximum number of images in the carousel for a page is set in the sn_va_line.max.carousel.cards system property. The property is located in the System Properties [sys_properties] table.
    WhatsApp Supported None
    Apple Messages for Business Supported None
    Alexa (Voice) Supported For screen devices, use touch scroll. For nonscreen devices, use voice pagination.