Rich cards combine media, text, and suggestions in one message. They focus on a single topic and offer clear actions to users.
A rich card can contain the following:
- Media (image, GIF, or video)
- Title text
- Description text
- Suggested replies and actions.
Each of these fields is optional, but at least one of the fields 1–3 must be included in the rich card.
Rich cards components
Media
Rich cards can include various media, such as images, GIFs, and videos. Rich cards support a variety of media formats.
Supported image types:
- JPEG/JPG
- GIF
- PNG
Supported video types:
- H.263
- M4V
- MP4
- MPEG
- MPEG-4
- WebM
You can choose between three media heights for a rich card:
| Media type | Media height |
|---|---|
| Short media | 112 DP |
| Medium media | 168 DP |
| Tall media | 264 DP |
DP stands for density-independent pixels, which are units that ensure UI elements appear a consistent physical size across screens with different pixel densities.
If the media doesn't fit the dimensions within the card given the selected height, the media preview is chosen by zooming and centrally cropping the media.
Each media can have an associated thumbnail. Clicking on the thumbnail will open a full screen view of the media.
You can upload media by either specifying a URL or directly uploading a file. You can find more information on the Send messages page.
Title text
The title of your rich card is like a headline that captures the user's attention and gives them a clear idea of what your message is about. Make sure it's concise and informative. It can be up to 200 characters long.
Description
The rich card description includes essential supporting information. This is where you elaborate on the title, highlight key benefits, and drive conversions with a clear call to action. The description can be up to 2000 characters long.
Suggested replies and actions
Each rich card can contain up to four suggested replies and suggested actions. In addition, you can add up to 11 suggestions below your card in a chip list, much like you would add suggestions to a text message. Suggested replies and actions within a chip list are a way of advancing the conversation. They shouldn't repeat the options listed within the rich card, and they are not selection tools for the items presented in a carousel.
You can find detailed information about suggestions in this article.
Suggested replies
Suggested replies help users interact with your agent in ways that it can easily respond to. Unless the interaction requires a freeform response, use suggested replies. They're easier to process than freeform text and they allow your agent to steer conversations down an optimal path.
Suggested replies can be up to 25 characters long.
Suggested actions
Suggested actions allow an agent to hook into native device actions and they provide a tightly integrated experience for the user. When relevant, suggested actions can make it easy to call customer support or find a location on the map.
But don't overwhelm users with options. Only provide actions that are related to the most recent message, and only provide as many actions as necessary. Limit the number of suggested actions and suggested replies to what is useful to the user in a given context.
Suggested actions can be up to 25 characters long.
Rich card layout
Rich cards can have either a vertical or horizontal layout.
Vertical rich cards
Vertical rich cards display horizontal media at the top of the card. The minimum height of a vertical rich card is 112 DP.
Media used in a vertical rich card can have the following height:
- Short: 112 DP
- Medium: 168 DP
- Tall: 264 DP
Media used in a vertical rich card can have an aspect ratio of:
- 2:1
- 16:9
- 7:3
Horizontal rich cards
Horizontal rich cards display media on the left or right side of the card.
A horizontal rich card doesn't have a fixed media ratio, but a fixed width of 128 DP. The height scales to the height of the text elements in the card.
Rich card carousels
You can send a standalone rich card or a carousel of rich cards.
Rich card carousels are ideal for showcasing multiple items, such as data plans or devices, allowing users to easily browse and compare different options within a single message. A carousel is ideal when you want to present a variety of choices or enable exploration of related content.
The first item in a carousel should be the optimal choice, and the reason why should be clear to the user. You can have up to ten cards in a rich card carousel. Rich card carousels can contain only vertical rich cards.
Carousel specifications
| Specification | Details |
|---|---|
| Title | Maximum 200 characters |
| Description | Maximum 2000 characters |
| Height | Maximum 592 DP All cards within a carousel will be scaled to match the height of the tallest card. |
| Width | Choose one of the following options: • Small: 120 DP • Medium: 232 DP |
If an image is used in the carousel, text content may be trimmed to accommodate the image.
If the fields on the card in a rich card carousel aren't large enough to fill the minimum height, extra whitespace will be added at the bottom. If the fields exceed the maximum height, they will be truncated in the following order:
- Description, reduced to a single line.
- Title, reduced to a single line.
- Suggestions, removed entirely.
- Description, removed entirely.
- Title, removed entirely.
To avoid truncation, keep titles and descriptions as short as possible.
Similar to a standalone rich card message, you can include suggestion chips below a carousel to move the conversation forward. Suggestion chips shouldn't repeat the options listed within the carousel, and they are not selection tools for the items presented in the carousel.
Limits
Rich card titles are limited to 200 characters, whereas descriptions can be up to 2000 characters. Keep in mind that special characters, such as emoji or a multi-byte character set, count as 2–4 characters or more.
Media in a rich card or a rich card carousel can have the following height:
- Short: 112 DP
- Medium: 168 DP
- Tall: 264 DP
To ensure all elements (media, titles, descriptions, and buttons) display correctly in your rich card or carousel, they must adhere to the specified character and size limits. If any element exceeds these limits, it might not be fully visible within a single card.
The maximum size of a rich card payload is 250 KB. See best practices for media file size recommendations and limits.