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.

A card can contain record information, an image, or a YouTube video content in a compact format. The compact format is designed for readability within the chat window.

The Card bot response can show the following types of content:

  • Record: Displays content from a single record on your instance. This record can be referenced from variables in the flow or queried using a script that returns a single Glide record from a selected table. The record content includes the display field for the table at the top of the card, followed by any other fields specified by the properties of the bot response.
  • Image: Displays a large or small image that you provide, along with a title and description. The property sheet provides a pre-configured template for the card layout. Specify the title, description, and the image source.
  • YouTube video: Displays in an inline video player if supported on the channel. The image is displayed along with a title, description, and hyperlink to relevant content.

    In the Vancouver release, only YouTube videos are supported.

    Tip: You can also use the Video bot response control to include YouTube videos in conversations. The Video bot response control includes a navigation button that pauses the conversation. If you want the user to watch the video before continuing with the conversation, use this navigation button. When users have finished watching the video, they can click this navigation button to continue with the conversation.
Note: If you previously created conversations that use the HTML bot response control to generate card layouts, consider updating your conversations to use the Card bot response control. The Card displays information from a record in your instance and contains a link to that related record. Or, it can display images and can include rich content such as a video.

Card bot response control properties

Property Description
Node name Name that identifies this Card bot response control node in the topic flow.
Card type Type of card to be used. Choose one of the following options:
  • Record
  • Large image with text
  • Small image with text
  • YouTube Video Card
    Note: In the Vancouver release, only YouTube video cards are supported.
Type: Record
Record Reference to a specific record. Data for the card comes from a record referenced in a variable from another node in the flow. For example, the reference could be a Choice List or Glide Action.
  1. Select a variable from the current flow that contains a record object.
  2. Use the fields list to determine the fields displayed in the card.
Table Table that references a single Glide record that contains the data shown in the card.
Filter this table by using Enter the condition or script to filter data in the table and return the record.
  • Condition: Condition statement that returns the table record.
  • Script: Glide record query that returns the glide record.
fields

Fields from the ServiceNow record to be displayed in the card. Specify each field by clicking Add Field.

Note: If you're using Workplace, a maximum of four fields is rendered on the card. If you have more than four fields, the remaining fields are displayed on a subsequent card, with up to four fields per card.
Type: Large image with text or Small image with text
Template A visual representation that shows the image card layout. Each area of the template is numbered.
Map data to fields on the card Fields that correspond to the numbers shown on the template. These fields are the following:
  1. Title: Name or label for the card
  2. Description: Explanation of the image
  3. Image URL link: Specify the image displayed in the card in one of the following ways:
    • Specify the image URL, using the text field, data pill, or script.
    • Upload the image by clicking Upload Image.

    If you upload an image, the selected image is uploaded to the server and is stored in the Images [sys_db_image] table and in the update sets. When the image is stored in the Images table and the update sets, you can use the image in a production or non-production instance, as needed.

    After the image is uploaded, the URL link is included in theResponse Properties sheet.

    The link to an uploaded image is shown in the property sheet.

    Click the link to view the image.

    The URL is generated dynamically. The name of the instance is inserted at the front of the URL path.

    You can change or delete the link to the image. If you delete the link on this property sheet, only the reference to the URL is deleted. The image remains on the server for future use.

  4. Image alt text: Alternative, screen-readable text that describes the image for accessibility programs. This text is used along with the image. Enter the text using the text field, data pill, or script.
Type: YouTube Video card
Template A visual representation of the layout of the video included in the card.
Map data to fields on the card Fields that correspond to the numbers shown on the template. These fields are the following:
  • Title: Title of the card.
  • Title Link: URL to any relevant content.
  • Description: Description the card, such as the topic the video addresses.
  • YouTube Video ID: Unique identifier for the video used in the card. This identifier is the string following the equal sign (=) at the end of the video's URL path.

    For example, in the path shown below, the video identifier is FVgtjdEOa5M.

    In the URL www.youtube.com/watch?v=FVgtjdEOa5M, the video identifier is FVgtjdEOa5M.

    In this URL, the video identifier is the video ID in curly brackets.
Advanced
Hide 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.

Channel support

Table 1. Channel support for the Card bot response control
ChannelSupportConstraints
Web UI Supported None
Mobile UI Supported None
Now Assist panel Partial support Record cards and record cards with action only.
Microsoft Teams Supported The video control displays a thumbnail image of the video that users select to open the video in their preferred web browser.
Slack Supported Conversational Integration with Slack Version 2.0.0 and later.

The video control displays a thumbnail image of the video that users select to open the video in their preferred web browser.
Workplace Partial support Image card output not available.

Facebook apps no longer support vertical list templates. The card layout uses a horizontal, scrollable carousel template effective August 15, 2019. Cards also feature a button template.
Facebook Messenger Supported None
SMS Twilio Supported Records and image cards only.
LINE Partial support Records and image cards only.
WhatsApp Partial support Records and image cards only.
Apple Messages for Business Supported None
Alexa (Voice) Partial support Some types of output are only available on devices with screens. For nonscreen devices, the card title is read. For details, see Fine-tune Virtual Agent settings and topics for the best Alexa voice chat experience.

Example Glide record query

(function execute(table) {
    /* Write a glide record query, and return the glide record.
       For example:
       
       var now_GR = new GlideRecord(table);
       gr.addEncodedQuery('active=true^number=INC0010099');
       gr.query();
       if(gr.next()) {
          return gr;
    }
    */
})(table)

In this example, the script creates a GlideRecord object, populates this object using a query that should return a single result, then returns the object. The Table property defines the table used in this query.

Example Card bot response output for records

Note: Virtual Agent Designer controls may display and function differently in other channels.
Response properties Card output
Figure 1. Card bot response control basic properties
Basic properties include the node name, card type, how the card should be populated - record or table, and the fields to return.
Figure 2. Web UI Card output
An example card that shows the Incident and Incident number in the header. The fields shown are Category, Short description, and State.
Figure 3. Microsoft Teams Card output
Example card from a Microsoft Teams conversation, showing Conversation and creation time in header. The displayed fields include Consumer, SysID, Device type, and creation date and time.

Example Card bot response for a large image

The Card response layout for images may vary across channels.
Response properties Card output

Basic properties include the node name, card type, card template, title, description, image link, and image alt text.
Figure 4. Web UI image card output
Card that reads, "Don't forget we are going back to the office soon!" in the header. It includes the user's schedule return day and an image link to more information.
Figure 5. Microsoft Teams UI image card
Example of Microsoft Teams image card, showing header title Scenery, and placeholder line Scenery Description above image.

Example Card bot response for a small image

The Card response layout for images may vary across channels.

Response properties Card output
Basic properties include the node name, card type, template, title, description, image link, and image alt text.
Figure 6. Web UI image card output
The user asks, "When do we announce the earnings?" A card is returned with a header that reads, "Save the date - Q1 Earnings Call."

Example Card bot response with video content

The way the Card bot response displays videos may vary across channels. For example, the display you see in Slack messages may be different from what you see on Microsoft Teams or Workplace from Facebook. Also, if an embedded player is supported on that channel, the player is included in the display. For more information about channels, see the documentation for the channel that you're using.

Response properties Card output
Basic properties include the node name, card type, template, title, title link, description, and YouTube video ID.
Figure 7. Card bot response output with video on the Web client
Card that reads, "Check out our new Christmas campaign." The YouTube video is embedded beneath and displays the linked title and description.
Figure 8. Card bot response output with video on Microsoft Teams
Example of Microsoft Teams video card, showing header title Video Example, and placeholder line Video Example Description above preview image.