Visão geral das mensagens do Google Chat

Esta página explica as diferenças entre mensagens de texto e de card.

Quando os apps do Chat enviam mensagens de texto para transmitir informações básicas, elas aparecem inline, assim como as pessoas escrevem mensagens no Google Chat. Para criar mensagens que contenham mais do que texto ou para criar mensagens que os usuários possam interagir, os apps do Chat podem usar cards. Os apps do Chat também podem anexar uma mensagem de texto a um card. Para pedir que os usuários concluam processos de várias etapas, como preencher um formulário, os apps do Chat também podem criar cards que são abertos em uma nova janela como caixas de diálogo.

Anatomia de uma mensagem de texto

Na API Google Chat, as mensagens são representadas como objetos JSON. Em uma mensagem, uma mensagem de texto é representada como um text objeto.

No exemplo a seguir, um app do Chat cria uma mensagem de texto em um espaço para uma equipe de desenvolvedores de software informando que o congelamento de código está se aproximando:

{
  "text": "Attention <users/all>: Code freeze starts at `11:59 am` Pacific Standard Time! If you need a little more time, type `/moreTime` and I'll push the code freeze back one hour."
}

O JSON retorna a seguinte mensagem:

Exemplo de mensagem de texto no Google Chat anunciando o congelamento de código.

Anatomia de uma mensagem de card

Na API Google Chat, as mensagens são representadas como objetos JSON. Em uma mensagem um card é representado como uma cardsV2 matriz e consiste no seguinte:

  • Um ou mais CardWithId objetos.
  • Um cardId, usado para identificar o card e com escopo em uma determinada mensagem. (Cards em mensagens diferentes podem ter o mesmo ID.)

  • Um objeto card, que consiste no seguinte:

    • Um objeto header que especifica itens como título, subtítulo e imagem de estilo de avatar.
    • Um ou mais section objetos que contêm pelo menos um widget.
    • Um ou mais widget objetos. Cada widget é um objeto composto que pode representar texto, imagens, botões e outros tipos de objetos.

Como exemplo, a mensagem de card a seguir contém header, section e widget objetos:

Um app do Chat executando uma enquete em um espaço do Chat usando uma mensagem de card

O código a seguir representa o JSON da mensagem de card:

JSON

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
          "title": "Sasha",
          "subtitle": "Software Engineer",
          "imageUrl": "https://developers.google.com/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"
                            }
                          ]
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

Use o Card Builder para projetar e visualizar interfaces de mensagens e de usuário para apps do Chat:

Abrir o Card Builder