Chat apps feature a card-based interface for showing information to and collecting information from users. You can send card messages instead of text messages in conversation, or open cards as windows called dialogs. Cards support a defined layout, interactive UI elements like buttons, and rich media like images.
In Google Chat, you can use cards in the following ways:
- As stand-alone card messages.
- Attached to a text message, such as a link preview that gives more information and lets people take action right from Google Chat.
- As a dialog that Chat apps opens to interact with users, collect data, and complete multi-step processes like authentication or configuring app settings.
For example, a Chat app might use a card message to run a poll in a Chat space:
Or open a dialog to help a user create a new contact for their address book:
The benefits of card-based interfaces and messages in Google Chat are the following:
- Interactive: Cards facilitate user interactions with buttons, text input fields, and datetime widgets.
- Consistent: Cards and widgets ensure that your Chat app looks and feels consistent across different platforms, including web and mobile devices. Cards and widgets are automatically styled to work well with Google Chat.
- Dynamic: Connect data to cards and widgets to dynamically display information to users. For example, a card can present a customer case with the latest status.
Card components
Cards are made up of the following components:
- Header: the top portion of a card that includes high-level information such as the app's logo and a card title.
- Card sections: one or more sections of a card where you can include widgets of content.
- Footer: for dialogs, a persistent footer with buttons, to help people submit information or complete a multi-step process.
Widgets
You can add one or more widgets to a card section. Widgets let you do the following:
- Display information, like text and images, to users.
- Collect information from users with text-input fields, selectable menus, and datetime settings.
- Provide interaction controls, like buttons.
Currently supported widgets include:
ButtonList: displays a set of buttons.DateTimePicker: lets users specify a date, time, or both a date and time.DecoratedText: displays text with optional layout and functionality features, like icons and buttons.Columns: displays 2 columns in a card.Divider: displays a horizontal line spanning the width of a card between stacked widgets, acting as a visual divider.Grid: lays a set of items out in a simple grid.Icon: displays a built-in or custom icon.Image: displays a clickable or static.pngor.jpgimage hosted on an HTTPS URL.SelectionInput: provides a set of selectable items, like a list of checkboxes, radio buttons, switches, or a dropdown menu.TextInput: a field in which users can enter text.TextParagraph: displays a paragraph of text with optional simple HTML formatting.