This page describes how to design and create the main UI components of card messages in Google Chat.
Cards support a defined layout, interactive UI elements, such as buttons, and rich media like images. You can use cards to present information, gather input, or provide next steps to users through card messages and dialogs.
Use the Card Builder to design and preview JSON card messages for Chat apps:
Open the Card BuilderCards and dialogs generally have the following components:
- A
CardHeader
which contains the title of your card. - One or more
CardSection
widgets which form the main body of the card. - A
CardFixedFooter
widget specific for dialogs only.
Prerequisites
A Google Chat app that's enabled for interactive features. To create an interactive Chat app, complete one of the following quickstarts based on the app architecture that you want to use:
- HTTP service with Google Cloud Functions
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Add a header
The CardHeader
widget
represents the header of a card. Headers can include a
title, subtitle, and an avatar image for your card.
You can include CardHeader
for
card messages and
dialogs.
The following is an example of a CardHeader
:
Define a section of a card
The CardSection
widget is a
high-level container within a card. You use card
sections to group widgets within a card. For each card section, you can include
a header and one or more widgets.
You can include CardSection
for
card messages and
dialogs.
The following is an example of a CardSection
that contains two textParagraph
widgets:
Add a persistent footer
The CardFixedFooter
widget represents the footer of a dialog message sent by
a Chat app.
Footers can include a primary button and a secondary button.
The CardFixedFooter
widget is only available for
dialogs.
The following is an example of a CardFixedFooter
widget with two buttons:
Troubleshoot
When a Google Chat app or card returns an error, the Chat interface surfaces a message saying "Something went wrong." or "Unable to process your request." Sometimes the Chat UI doesn't display any error message, but the Chat app or card produces an unexpected result; for example, a card message might not appear.
Although an error message might not display in the Chat UI, descriptive error messages and log data are available to help you fix errors when error logging for Chat apps is turned on. For help viewing, debugging, and fixing errors, see Troubleshoot and fix Google Chat errors.