Descripción general de los mensajes de Google Chat

En esta página, se explican las diferencias entre los mensajes de texto y los de tarjetas.

Cuando las apps de Chat envían mensajes de texto para transmitir información básica, los mensajes aparecen intercalados, al igual que las personas de Google Chat para escribir mensajes. Las apps de Chat pueden usar tarjetas para crear mensajes que contengan más que texto o con los que los usuarios puedan interactuar. Las apps de chat también pueden agregar un mensaje de texto con una tarjeta. Para pedirles a los usuarios que finalicen procesos de varios pasos, como completar un formulario, las apps de Chat también pueden crear tarjetas que se abren en una ventana nueva como diálogos.

Anatomía de un mensaje de texto

En la API de Google Chat, los mensajes se representan como objetos JSON. Dentro de un mensaje, un mensaje de texto se representa como un objeto text.

En el siguiente ejemplo, una app de Chat crea un mensaje de texto en un espacio para un equipo de desarrolladores de software al que se acerca un congelamiento de 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."
}

El JSON muestra el siguiente mensaje:

Ejemplo de un mensaje de texto en Google Chat que anuncia que el código se congelará.

Anatomía de un mensaje de tarjeta

En la API de Google Chat, los mensajes se representan como objetos JSON. Dentro de un mensaje, una tarjeta se representa como un array cardsV2 y consta de lo siguiente:

  • Uno o más objetos CardWithId.
  • Es un cardId, que se usa para identificar la tarjeta y que se limita a un mensaje determinado. (Las tarjetas pueden tener el mismo ID en distintos mensajes).
  • Un objeto card, que consta de lo siguiente:

    • Es un objeto header que especifica elementos como un título, un subtítulo y una imagen de estilo avatar.
    • Uno o más objetos section que contienen al menos un widget cada uno.
    • Uno o más objetos widget. Cada widget es un objeto compuesto que puede representar texto, imágenes, botones y otros tipos de objetos.

A modo de ejemplo, el siguiente mensaje de tarjeta contiene objetos header, section y widget:

Una app de Chat ejecutando una encuesta en un espacio
de Chat usando un mensaje de
tarjeta

El siguiente código representa el JSON del mensaje de la tarjeta:

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"
                            }
                          ]
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}


Diseña tarjetas y obtén una vista previa de ellas con el Creador de tarjetas.

Abre el Creador de tarjetas