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.
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 |
Google\Apps\Card\V1\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<Google\Apps\Card\V1\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 sections. |
↳ card_actions |
array<Google\Apps\Card\V1\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 |
Google\Apps\Card\V1\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 |
Google\Apps\Card\V1\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 |
Google\Apps\Card\V1\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 |
Google\Apps\Card\V1\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<Google\Apps\Card\V1\Card\Section>
|
Returns | |
---|---|
Type | Description |
$this |
getSectionDividerStyle
The divider style between sections.
Returns | |
---|---|
Type | Description |
int |
setSectionDividerStyle
The divider style between sections.
Parameter | |
---|---|
Name | Description |
var |
int
|
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<Google\Apps\Card\V1\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 |
Google\Apps\Card\V1\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 |
Google\Apps\Card\V1\Card\CardFixedFooter
|
Returns | |
---|---|
Type | Description |
$this |
getDisplayStyle
In Google Workspace Add-ons, sets the display properties of the
peekCardHeader
.
Returns | |
---|---|
Type | Description |
int |
setDisplayStyle
In Google Workspace Add-ons, sets the display properties of the
peekCardHeader
.
Parameter | |
---|---|
Name | Description |
var |
int
|
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 |
Google\Apps\Card\V1\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 |
Google\Apps\Card\V1\Card\CardHeader
|
Returns | |
---|---|
Type | Description |
$this |