Chat apps feature a card-based interface for showing information to and collecting information from users.
Chat apps 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, cards appear in several places:
- 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 open 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.
Each card consists of a header and one or more card sections. Each section contains one or more widgets. 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.
TextParagraph–Displays a paragraph of text with optional simple HTML formatting.
Image–Displays a clickable or static
.jpgimage hosted on an HTTPS URL.
DecoratedText–Displays text with optional layout and functionality features, like icons and buttons.
ButtonList–Displays a set of buttons.
TextInput–Field in which users can enter text.
SelectionInput–Provides a set of selectable items, like a list of checkboxes, radio buttons, switches, or a dropdown menu.
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.
Support for the following widget is coming soon:
DateTimePicker–Lets users specify a date, time, or both.