{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":5225,"path":"conversational-interfaces/virtual-agent/va-card-output.md","title":"Card bot response control","bundle":null,"doc_type":null,"release":"australia","body":"\n# Card bot response control\n\nUse the Card bot response control in a Virtual Agent topic to upload and display selected information from a record on your instance. You can include rich content, such as a video or image.\n\nA 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.\n\nThe Card bot response can show the following types of content:\n\n- 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 returning 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 other fields specified by the properties of the bot response.\n- 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.\n- 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.\n\n In the Australia release, only YouTube videos are supported.\n\n **Tip:** You can also use the [Video bot response control](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/conversational-interfaces/virtual-agent/va-video-bot-response.md) 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.\n\n\n**Note:** If you previously created conversations that use the [HTML bot response control](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/conversational-interfaces/virtual-agent/va-html-output.md) 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.\n\n## Card bot response control properties\n\n\n
\n\nProperty\n\n\n\nDescription\n\n
\n\nNode name\n\n\n\nName that identifies this Card bot response control node in the topic flow.\n\n
\n\nCard type\n\n\n\nType of card to be used. Choose one of the following options:- **Record**\n- **Large image with text**\n- **Small image with text**\n- **YouTube Video Card**\n\n**Note:** In the Australia release, only YouTube video cards are supported.\n\n\n
\n\nType: Record\n\n
\n\nRecord\n\n\n\nReference 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.\n2. Use the **fields** list to determine the fields displayed in the card.\n\n
\n\nTable\n\n\n\nTable that references a single Glide record that contains the data shown in the card.\n\n
\n\nFilter this table by using\n\n\n\nEnter the condition or script to filter data in the table and return the record.- **Condition**: Condition statement that returns the table record.\n- **Script**: Glide record query that returns the glide record.\n\n
\n\nfields\n\n\n\nFields from the ServiceNow record to be displayed in the card. Specify each field by clicking **Add Field**.\n\n **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.\n\n
\n\nType: Large image with text or Small image with text\n\n
\n\nTemplate\n\n\n\nA visual representation that shows the image card layout. Each area of the template is numbered.\n\n
\n\nMap data to fields on the card\n\n\n\nFields that correspond to the numbers shown on the template. These fields are the following:1. **Title**: Name or label for the card\n2. **Description**: Explanation of the image\n3. **Image URL link**: Specify the image displayed in the card in one of the following ways:\n\n - Specify the image URL, using the text field, data pill, or script.\n - Upload the image by clicking **Upload Image**.\nIf 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.\n\nAfter the image is uploaded, the URL link is included in the**Response Properties** sheet.\n\n\\[Omitted image \"va-upload-image-with-link-example.png\"\\] Alt text: The link to an uploaded image is shown in the property sheet.\n\nClick the link to view the image.\n\nThe URL is generated dynamically. The name of the instance is inserted at the front of the URL path.\n\nYou 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.\n\n4. **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.\n\n
\n\nType: YouTube Video card\n\n
\n\nTemplate\n\n\n\nA visual representation of the layout of the video included in the card.\n\n
\n\nMap data to fields on the card\n\n\n\nFields that correspond to the numbers shown on the template. These fields are the following:- **Title**: Title of the card.\n- **Title Link**: URL to any relevant content.\n- **Description**: Description the card, such as the topic the video addresses.\n- **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.\n\nFor example, in the path shown below, the video identifier is `FVgtjdEOa5M`.\n\n\\[Omitted image \"va-video-unique-id.png\"\\] Alt text: In the URL www.youtube.com/watch?v=FVgtjdEOa5M, the video identifier is FVgtjdEOa5M.\n\n\\[Omitted image \"va-video-unique-id-2.png\"\\] Alt text: In this URL, the video identifier is the video ID in curly brackets.\n\n\n
\n\nAdvanced\n\n
\n\nHide this node\n\n
\n\nConditionally show this node if\n\n\n\nNo-code condition statement or low-code script that specifies a condition for presenting this node in the conversation. The condition must evaluate to true.\n\n
## Channel support\n\n\n
\n\nChannel\n\n\n\nSupport\n\n\n\nConstraints\n\n
\n\nWeb UI\n\n\n\nSupported\n\n\n\nNone\n\n
\n\nMobile UI\n\n\n\nSupported\n\n\n\nNone\n\n
\n\nServiceNow Otto panel\n\n\n\nPartial support\n\n\n\nRecord cards and record cards with action only.\n\n
\n\nMicrosoft Teams\n\n\n\nSupported\n\n\n\nThe video control displays a thumbnail image of the video that users select to open the video in their preferred web browser.\n\n
\n\nSlack\n\n\n\nSupported\n\n\n\nConversational 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.\n\n
\n\nWorkplace\n\n\n\nPartial support\n\n\n\nImage 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.\n\n
\n\nFacebook Messenger\n\n\n\nSupported\n\n\n\nNone\n\n
\n\nSMS Twilio\n\n\n\nSupported\n\n\n\nRecords and image cards only.\n\n
\n\nLINE\n\n\n\nPartial support\n\n\n\nRecords and image cards only.\n\n
\n\nWhatsApp\n\n\n\nPartial support\n\n\n\nRecords and image cards only.\n\n
\n\nApple Messages for Business\n\n\n\nSupported\n\n\n\nNone\n\n
\n\nAlexa \\(Voice\\)\n\n\n\nPartial support\n\n\n\nSome 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](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/conversational-interfaces/virtual-agent/va-settings-for-alexa.md).\n\n
## Example Glide record query\n\n```\n(function execute(table) {\n /* Write a glide record query, and return the glide record.\n For example:\n \n var now_GR = new GlideRecord(table);\n gr.addEncodedQuery('active=true^number=INC0010099');\n gr.query();\n if(gr.next()) {\n return gr;\n }\n */\n})(table)\n\n```\n\nIn 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.\n\n## Example Card bot response output for records\n\n**Note:** Asset library controls may display and function differently in other channels.\n\n\n
\n\nResponse properties\n\n\n\nCard output\n\n
\n\n\\[Omitted image \"va-card-properties.png\"\\] Alt text: Basic properties include the node name, card type, how the card should be populated - record or table, and the fields to return.\n\n\n\n\\[Omitted image \"va-card-native.png\"\\] Alt text: An example card that shows the Incident and Incident number in the header. The fields shown are Category, Short description, and State.\n\n \\[Omitted image \"Card-MSteams-01.png\"\\] Alt text: 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.\n\n
## Example Card bot response for a large image\n\nThe Card response layout for images may vary across channels.\n\n\n
\n\nResponse properties\n\n\n\nCard output\n\n
\n\n\\[Omitted image \"va-card-image-props.png\"\\] Alt text: Basic properties include the node name, card type, card template, title, description, image link, and image alt text.\n\n\n\n\\[Omitted image \"va-bot-card-web-image.png\"\\] Alt text: 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.\n\n \\[Omitted image \"Card-MSteams-02.png\"\\] Alt text: Microsoft Teams image card, showing header title Scenery, and placeholder line Scenery Description.\n\n
## Example Card bot response for a small image\n\nThe Card response layout for images may vary across channels.\n\n\n
\n\nResponse properties\n\n\n\nCard output\n\n
\n\n\\[Omitted image \"va-card-image-props-small-image.png\"\\] Alt text: Basic properties include the node name, card type, template, title, description, image link, and image alt text.\n\n\n\n\\[Omitted image \"va-card-small-image-example-.png\"\\] Alt text: The user asks, \"When do we announce the earnings?\" A card is returned with a header that reads, \"Save the date - Q1 Earnings Call.\"\n\n
## Example Card bot response with video content\n\nThe 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.\n\n\n
\n\nResponse properties\n\n\n\nCard output\n\n
\n\n\\[Omitted image \"va-card-video-properties-3.png\"\\] Alt text: Basic properties include the node name, card type, template, title, title link, description, and YouTube video ID.\n\n\n\n\\[Omitted image \"youtube-video-card-output-all-opts.png\"\\] Alt text: Card that reads, \"Check out our new Christmas campaign.\" The YouTube video is embedded beneath and displays the linked title and description.\n\n \\[Omitted image \"Card-MSteams-03.png\"\\] Alt text: Microsoft Teams video card, showing header title Video Example, and placeholder line Video Example Description.\n\n
**Parent Topic:**[Assistant Designer bot responses](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/conversational-interfaces/virtual-agent/va-bot-responses.md)\n\n"}}