Cards

Card

A card is a UI element that can contain UI widgets such as texts, images.

JSON representation
{
  "header": {
    object(CardHeader)
  },
  "sections": [
    {
      object(Section)
    }
  ],
  "cardActions": [
    {
      object(CardAction)
    }
  ],
  "name": string
}
Fields
header

object( CardHeader )

The header of the card. A header usually contains a title and an image.

sections[]

object( Section )

Sections are separated by a line divider.

cardActions[]

object( CardAction )

The actions of this card.

name

string

Name of the card.

CardHeader

JSON representation
{
  "title": string,
  "subtitle": string,
  "imageStyle": enum(ImageStyle),
  "imageUrl": string
}
Fields
title

string

The title must be specified. The header has a fixed height: if both a title and subtitle is specified, each will take up 1 line. If only the title is specified, it will take up both lines.

subtitle

string

The subtitle of the card header.

imageStyle

enum( ImageStyle )

The image's type (e.g. square border or circular border).

imageUrl

string

The URL of the image in the card header.

ImageStyle

Enums
IMAGE_STYLE_UNSPECIFIED
IMAGE Square border.
AVATAR Circular border.

Section

A section contains a collection of widgets that are rendered (vertically) in the order that they are specified. Across all platforms, cards have a narrow fixed width, so there is currently no need for layout properties (e.g. float).

JSON representation
{
  "header": string,
  "widgets": [
    {
      object(WidgetMarkup)
    }
  ]
}
Fields
header

string

The header of the section, text formatted supported.

widgets[]

object( WidgetMarkup )

A section must contain at least 1 widget.

WidgetMarkup

A widget is a UI element that presents texts, images, etc.

JSON representation
{
  "buttons": [
    {
      object(Button)
    }
  ],

  // Union field data can be only one of the following:
  "textParagraph": {
    object(TextParagraph)
  },
  "image": {
    object(Image)
  },
  "keyValue": {
    object(KeyValue)
  }
  // End of list of possible types for union field data.
}
Fields
buttons[]

object( Button )

A list of buttons. Buttons is also oneof data and only one of these fields should be set.

Union field data . A WidgetMarkup can only have one of the following items. You can use multiple WidgetMarkup fields to display more items. data can be only one of the following:
textParagraph

object( TextParagraph )

Display a text paragraph in this widget.

image

object( Image )

Display an image in this widget.

keyValue

object( KeyValue )

Display a key value item in this widget.

TextParagraph

A paragraph of text. Formatted text supported.

JSON representation
{
  "text": string
}
Fields
text

string

Image

An image that is specified by a URL and can have an onclick action.

JSON representation
{
  "imageUrl": string,
  "onClick": {
    object(OnClick)
  },
  "aspectRatio": number
}
Fields
imageUrl

string

The URL of the image.

onClick

object( OnClick )

The onclick action.

aspectRatio

number

The aspect ratio of this image (width/height).

OnClick

An onclick action (e.g. open a link).

JSON representation
{

  // Union field data can be only one of the following:
  "action": {
    object(FormAction)
  },
  "openLink": {
    object(OpenLink)
  }
  // End of list of possible types for union field data.
}
Fields

Union field data .

data can be only one of the following:

action

object( FormAction )

A form action will be trigger by this onclick if specified.

FormAction

A form action describes the behavior when the form is submitted. For example, an Apps Script can be invoked to handle the form.

JSON representation
{
  "actionMethodName": string,
  "parameters": [
    {
      object(ActionParameter)
    }
  ]
}
Fields
actionMethodName

string

Apps Script function to invoke when the containing element is clicked/activated.

parameters[]

object( ActionParameter )

List of action parameters.

ActionParameter

List of string parameters to supply when the action method is invoked. For example, consider three snooze buttons: snooze now, snooze 1 day, snooze next week. You might use action method = snooze(), passing the snooze type and snooze time in the list of string parameters.

JSON representation
{
  "key": string,
  "value": string
}
Fields
key

string

The name of the parameter for the action script.

value

string

The value of the parameter.

KeyValue

A UI element contains a key (label) and a value (content). And this element may also contain some actions such as onclick button.

JSON representation
{
  "topLabel": string,
  "content": string,
  "contentMultiline": boolean,
  "bottomLabel": string,
  "onClick": {
    object(OnClick)
  },

  // Union field icons can be only one of the following:
  "icon": enum(Icon),
  "iconUrl": string
  // End of list of possible types for union field icons.
  "button": {
    object(Button)
  }
}
Fields
topLabel

string

The text of the top label. Formatted text supported.

content

string

The text of the content. Formatted text supported and always required.

contentMultiline

boolean

If the content should be multiline.

bottomLabel

string

The text of the bottom label. Formatted text supported.

onClick

object( OnClick )

The onclick action. Only the top label, bottom label and content region are clickable.

Union field icons . At least one of icons, top_label and bottom_label must be defined. icons can be only one of the following:
icon

enum( Icon )

An enum value that will be replaced by the Chat API with the corresponding icon image.

iconUrl

string

The icon specified by a URL.

button

object( Button )

A button that can be clicked to trigger an action.

Icon

The set of supported icons.

Enums
ICON_UNSPECIFIED
AIRPLANE
BOOKMARK
BUS
CAR
CLOCK
CONFIRMATION_NUMBER_ICON
DOLLAR
DESCRIPTION
EMAIL
EVENT_PERFORMER
EVENT_SEAT
FLIGHT_ARRIVAL
FLIGHT_DEPARTURE
HOTEL
HOTEL_ROOM_TYPE
INVITE
MAP_PIN
MEMBERSHIP
MULTIPLE_PEOPLE
OFFER
PERSON
PHONE
RESTAURANT_ICON
SHOPPING_CART
STAR
STORE
TICKET
TRAIN
VIDEO_CAMERA
VIDEO_PLAY

Button

A button. Can be a text button or an image button.

JSON representation
{

  // Union field type can be only one of the following:
  "textButton": {
    object(TextButton)
  },
  "imageButton": {
    object(ImageButton)
  }
  // End of list of possible types for union field type.
}
Fields

Union field type .

type can be only one of the following:

textButton

object( TextButton )

A button with text and onclick action.

imageButton

object( ImageButton )

A button with image and onclick action.

TextButton

A button with text and onclick action.

JSON representation
{
  "text": string,
  "onClick": {
    object(OnClick)
  }
}
Fields
text

string

The text of the button.

onClick

object( OnClick )

The onclick action of the button.

ImageButton

An image button with an onclick action.

JSON representation
{
  "onClick": {
    object(OnClick)
  },
  "name": string,

  // Union field icons can be only one of the following:
  "icon": enum(Icon),
  "iconUrl": string
  // End of list of possible types for union field icons.
}
Fields
onClick

object( OnClick )

The onclick action.

name

string

The name of this imageButton which will be used for accessibility. Default value will be provided if developers don't specify.

Union field icons . The icon, can be specified by Icon enum or a URL. icons can be only one of the following:
icon

enum( Icon )

The icon specified by an enum that indices to an icon provided by Chat API.

iconUrl

string

The icon specified by a URL.

CardAction

A card action is the action associated with the card. For an invoice card, a typical action would be: delete invoice, email invoice or open the invoice in browser.

JSON representation
{
  "actionLabel": string,
  "onClick": {
    object(OnClick)
  }
}
Fields
actionLabel

string

The label used to be displayed in the action menu item.

onClick

object( OnClick )

The onclick action for this action item.

Send feedback about...

Hangouts Chat API
Hangouts Chat API
Need help? Visit our support page.