Reference documentation and code samples for the Google Apps Chat V1 Client class Card.
A card interface displayed in a Google Chat message or Google Workspace add-on.
Cards support a defined layout, interactive UI elements like buttons, and rich media like images. Use cards to present detailed information, gather information from users, and guide users to take a next step. Card builder To learn how to build cards, see the following documentation:
- For Google Chat apps, see Design the components of a card or dialog.
- For Google Workspace add-ons, see Card-based
interfaces.
Note: You can add up to 100 widgets per card. Any widgets beyond this
limit are ignored. This limit applies to both card messages and dialogs
in Google Chat apps, and to cards in Google Workspace add-ons.
Example: Card message for a Google Chat app
To create the sample card message in Google Chat, use the following JSON:
php { "cardsV2": [ { "cardId": "unique-card-id", "card": { "header": { "title": "Sasha", "subtitle": "Software Engineer", "imageUrl": "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png", "imageType": "CIRCLE", "imageAltText": "Avatar for Sasha" }, "sections": [ { "header": "Contact Info", "collapsible": true, "uncollapsibleWidgetsCount": 1, "widgets": [ { "decoratedText": { "startIcon": { "knownIcon": "EMAIL" }, "text": "sasha@example.com" } }, { "decoratedText": { "startIcon": { "knownIcon": "PERSON" }, "text": "<font color=\"#80e27e\">Online</font>" } }, { "decoratedText": { "startIcon": { "knownIcon": "PHONE" }, "text": "+1 (555) 555-1234" } }, { "buttonList": { "buttons": [ { "text": "Share", "onClick": { "openLink": { "url": "https://example.com/share" } } }, { "text": "Edit", "onClick": { "action": { "function": "goToView", "parameters": [ { "key": "viewType", "value": "EDIT" } ] } } } ] } } ] } ] } } ] }
Generated from protobuf message google.apps.card.v1.Card
Namespace
Google \ Apps \ Card \ V1Methods
__construct
Constructor.
| Parameters | |
|---|---|
| Name | Description |
data |
array
Optional. Data for populating the Message object. |
↳ header |
Card\CardHeader
The header of the card. A header usually contains a leading image and a title. Headers always appear at the top of a card. |
↳ sections |
array<Card\Section>
Contains a collection of widgets. Each section has its own, optional header. Sections are visually separated by a line divider. For an example in Google Chat apps, see Define a section of a card. |
↳ section_divider_style |
int
The divider style between the header, sections and footer. |
↳ card_actions |
array<Card\CardAction>
The card's actions. Actions are added to the card's toolbar menu. Google Workspace add-ons: For example, the following JSON constructs a card action menu with |
↳ name |
string
Name of the card. Used as a card identifier in card navigation. Google Workspace add-ons: |
↳ fixed_footer |
Card\CardFixedFooter
The fixed footer shown at the bottom of this card. Setting |
↳ display_style |
int
In Google Workspace add-ons, sets the display properties of the |
↳ peek_card_header |
Card\CardHeader
When displaying contextual content, the peek card header acts as a placeholder so that the user can navigate forward between the homepage cards and the contextual cards. Google Workspace add-ons: |
getHeader
The header of the card. A header usually contains a leading image and a title. Headers always appear at the top of a card.
| Returns | |
|---|---|
| Type | Description |
Card\CardHeader|null |
|
hasHeader
clearHeader
setHeader
The header of the card. A header usually contains a leading image and a title. Headers always appear at the top of a card.
| Parameter | |
|---|---|
| Name | Description |
var |
Card\CardHeader
|
| Returns | |
|---|---|
| Type | Description |
$this |
|
getSections
Contains a collection of widgets. Each section has its own, optional header. Sections are visually separated by a line divider. For an example in Google Chat apps, see Define a section of a card.
| Returns | |
|---|---|
| Type | Description |
Google\Protobuf\Internal\RepeatedField |
|
setSections
Contains a collection of widgets. Each section has its own, optional header. Sections are visually separated by a line divider. For an example in Google Chat apps, see Define a section of a card.
| Parameter | |
|---|---|
| Name | Description |
var |
array<Card\Section>
|
| Returns | |
|---|---|
| Type | Description |
$this |
|
getSectionDividerStyle
The divider style between the header, sections and footer.
| Returns | |
|---|---|
| Type | Description |
int |
Enum of type DividerStyle. |
setSectionDividerStyle
The divider style between the header, sections and footer.
| Parameter | |
|---|---|
| Name | Description |
var |
int
Enum of type DividerStyle. |
| Returns | |
|---|---|
| Type | Description |
$this |
|
getCardActions
The card's actions. Actions are added to the card's toolbar menu.
Google Workspace
add-ons:
For example, the following JSON constructs a card action menu with
Settings and Send Feedback options:
"card_actions": [
{
"actionLabel": "Settings",
"onClick": {
"action": {
"functionName": "goToView",
"parameters": [
{
"key": "viewType",
"value": "SETTING"
}
],
"loadIndicator": "LoadIndicator.SPINNER"
}
}
},
{
"actionLabel": "Send Feedback",
"onClick": {
"openLink": {
"url": "https://example.com/feedback"
}
}
}
]
| Returns | |
|---|---|
| Type | Description |
Google\Protobuf\Internal\RepeatedField |
|
setCardActions
The card's actions. Actions are added to the card's toolbar menu.
Google Workspace
add-ons:
For example, the following JSON constructs a card action menu with
Settings and Send Feedback options:
"card_actions": [
{
"actionLabel": "Settings",
"onClick": {
"action": {
"functionName": "goToView",
"parameters": [
{
"key": "viewType",
"value": "SETTING"
}
],
"loadIndicator": "LoadIndicator.SPINNER"
}
}
},
{
"actionLabel": "Send Feedback",
"onClick": {
"openLink": {
"url": "https://example.com/feedback"
}
}
}
]
| Parameter | |
|---|---|
| Name | Description |
var |
array<Card\CardAction>
|
| Returns | |
|---|---|
| Type | Description |
$this |
|
getName
Name of the card. Used as a card identifier in card navigation.
| Returns | |
|---|---|
| Type | Description |
string |
|
setName
Name of the card. Used as a card identifier in card navigation.
| Parameter | |
|---|---|
| Name | Description |
var |
string
|
| Returns | |
|---|---|
| Type | Description |
$this |
|
getFixedFooter
The fixed footer shown at the bottom of this card.
Setting fixedFooter without specifying a primaryButton or a
secondaryButton causes an error. For Chat apps, you can use fixed footers
in
dialogs, but not
card
messages.
Google Workspace add-ons and Chat
apps:
| Returns | |
|---|---|
| Type | Description |
Card\CardFixedFooter|null |
|
hasFixedFooter
clearFixedFooter
setFixedFooter
The fixed footer shown at the bottom of this card.
Setting fixedFooter without specifying a primaryButton or a
secondaryButton causes an error. For Chat apps, you can use fixed footers
in
dialogs, but not
card
messages.
Google Workspace add-ons and Chat
apps:
| Parameter | |
|---|---|
| Name | Description |
var |
Card\CardFixedFooter
|
| Returns | |
|---|---|
| Type | Description |
$this |
|
getDisplayStyle
In Google Workspace add-ons, sets the display properties of the
peekCardHeader.
| Returns | |
|---|---|
| Type | Description |
int |
Enum of type DisplayStyle. |
setDisplayStyle
In Google Workspace add-ons, sets the display properties of the
peekCardHeader.
| Parameter | |
|---|---|
| Name | Description |
var |
int
Enum of type DisplayStyle. |
| Returns | |
|---|---|
| Type | Description |
$this |
|
getPeekCardHeader
When displaying contextual content, the peek card header acts as a placeholder so that the user can navigate forward between the homepage cards and the contextual cards.
| Returns | |
|---|---|
| Type | Description |
Card\CardHeader|null |
|
hasPeekCardHeader
clearPeekCardHeader
setPeekCardHeader
When displaying contextual content, the peek card header acts as a placeholder so that the user can navigate forward between the homepage cards and the contextual cards.
| Parameter | |
|---|---|
| Name | Description |
var |
Card\CardHeader
|
| Returns | |
|---|---|
| Type | Description |
$this |
|