Design the components of a card or dialog

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 Builder

Cards 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 Workspace account with access to Google Chat.
  • A published Chat app. To build a Chat app, follow this quickstart.

    • 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:

    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.