Visão geral das mensagens do Google Chat

Nesta página, explicamos as diferenças entre mensagens de texto e de cards.

Quando os apps do Chat enviam mensagens de texto para transmitir informações básicas, as mensagens aparecem inline, assim como as pessoas no Google Chat escrevem mensagens. Para criar mensagens que contenham mais de texto ou para criar mensagens com que os usuários possam interagir, os apps de chat podem usar cartões. Os apps de chat também podem anexar uma mensagem de texto com um cartão. Para solicitar que os usuários concluam processos de várias etapas, como o preenchimento de 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. Dentro de uma mensagem, uma mensagem de texto é representada como um objeto text.

No exemplo abaixo, um app do Chat cria uma mensagem de texto em um espaço para uma equipe de desenvolvedores de software sobre o congelamento de um código:

{
  "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 que anuncia 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 matriz cardsV2 e consiste no seguinte:

  • Um ou mais objetos CardWithId.
  • Um cardId, usado para identificar o cartão 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 um título, um subtítulo e uma imagem com estilo de avatar.
    • Um ou mais objetos section que contêm pelo menos um widget.
    • Um ou mais objetos widget. Cada widget é um objeto composto que pode representar texto, imagens, botões e outros tipos de objetos.

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

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

O código a seguir representa o JSON da mensagem do 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"
                            }
                          ]
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}


Crie e visualize cards com o Criador de cards.

Abra o Criador de cards.