Overview

In Google Business Messages a card has the following structure:

  1. Image
  2. Title
  3. Description
  4. Buttons (up to 4)

Examples Of GBM Rich Cards:

GBM RichCard Examples

Card

The card is the container that holds the information that should be displayed by the connector.

Properties

Property Name Description Type Required
type Type of the Container.
For Rich Cards in GBM the type should always be vertical, as it best represents the layout on customer side.		 Enum Y
tag Tag of template view, must be generic for GBM Rich Cards. Enum Y
display Object that defines how the Image is being displayed. DisplayOptions N
elements Array of elements/templates that contains the actual content of the Rich Card. The Elements must be in the following order:

1) Image
2) Title
3) Description
4-7) Button

While all of these elements are optional, it is still required to have at least one Image, Title, or Description 		Array(Element) Y

JSON Representation Card

{
  "type": "vertical",
  "tag": "generic",
  "display": Display,
  "elements": [Image, Title, Description, Button, Button, Button, Button]
}

Display Options

The display options describe how the image is being rendered. While the width of the card is always set automatically (fitted to the screen width), the default height of images (168dp) can be modified by setting the size attribute in the display options to compact (=112dp) or tall (=264dp)

If the image size is not matching to the selected display option, it will be cropped as shown in the following picture:

Example of How the image will be cropped

Properties

Property Name Description Type Required
size Defines the height of the Image in a GBM Rich Card.
Can be one of:
  • compact (height = 112dp)
  • tall (height = 264dp)
    • If no value is given the height is 168dp.     		Enum N

    JSON Representation

    {
  "size": "tall"
}

    Image

    The image that will be displayed at the top of the rich card. If no image is given, Title or or Description are required.

    Properties

    Property Name Description Type Required
    type Must be "image". Identifies the element as an object of type image. Enum Y
    url The URL of the image that will be send to google.
    The domain where the image is being stored must be whitelisted before it can be used.     		String Y

    JSON Representation

    {
  "type": "image",
  "url": "https://d1hryyr5hiabsc.cloudfront.net/web2020/img/resources/rep-great-ai-divide@1x.jpg"
}

    Title

    The highlighted headline of the rich card.

    Properties

    Property Name Description Type Required
    type Must be "text". Identifies the element as an object of type text. Enum Y
    tag Must be "title". If missing, the text will be identified as the description. Enum Y
    text The actual text of the headline.
    The text can not be longer than 200 characters.     		String Y

    JSON Representation

    {
  "type": "text",
  "tag": "title",
  "text": "The great AI divide"
}

    Description

    The text of the rich card.

    Properties

    Property Name Description Type Required
    type Must be "text". Identifies the element as an object of type text. Enum Y
    text The description text.
    The text can not be longer than 2000 characters.     		String Y

    JSON Representation

    {
  "type": "text",
  "text": "Consumer attitudes on the gender gap in technology and perceptions of AI's future.\nView the whole article online, or request the content to be sent via text messages."
}

    Button

    A button at the bottom of a rich card.

    Properties

    Property Name Description Type Required
    type Must be "button". Identifies the element as an object of type button. Enum Y
    title The text of the button.
    The text can not be longer than 25 characters.     		String Y
    click The click operations that should be executed when the customer clicks the button.
    These click operations must contain at least one action which can be any action of the following types:
  • publishText
  • navigate
  • link

    • If an action of type navigate or link is added, a publishText action can additionaly be included in the click operation.     		ClickOperations Y

    JSON Representation

    {
  "type": "button",
  "title": "View Online",
  "click": ClickOperations
}

    Full Template

    {
  "type": "vertical",
  "tag": "generic",
  "display": {
    "size": "tall"
  },
  "elements": [
    {
      "type": "image",
      "url": "https://d1hryyr5hiabsc.cloudfront.net/web2020/img/resources/rep-great-ai-divide@1x.jpg"
    },
    {
      "type": "text",
      "tag": "title",
      "text": "The great AI divide"
    },
    {
      "type": "text",
      "text": "Consumer attitudes on the gender gap in technology and perceptions of AI's future.\nView the whole article online, or request the content to be sent via text messages."
    },
    {
      "type": "button",
      "title": "View Here",
      "click": {
        "actions": [
          {
            "type": "publishText",
            "text": "view-here"
          }
        ]
      }
    },
    {
      "type": "button",
      "title": "View Online",
      "click": {
        "actions": [
          {
            "type": "publishText",
            "text": "viewed-online"
          },
          {
            "type": "link",
            "uri": "https://www.liveperson.com/resources/reports/great-ai-divide/"
          }
        ]
      }
    },
    {
      "type": "button",
      "title": "Not interested",
      "click": {
        "actions": [
          {
            "type": "publishText",
            "text": "stop-showing"
          }
        ]
      }
    },
    {
      "type": "button",
      "title": "View More Reports",
      "click": {
        "actions": [
          {
            "type": "link",
            "uri": "https://www.liveperson.com/resources/#all"
          }
        ]
      }
    }
  ]
}