Descripción general de los mensajes de Google Chat

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

Cuando las apps de Chat envían mensajes de texto para transmitir información básica, los mensajes aparecen intercalados, al igual que cuando las personas escriben mensajes en Google Chat. Para crear mensajes que contengan más que texto o para crear mensajes con los que los usuarios puedan interactuar, las apps de Chat pueden usar tarjetas. Las apps de Chat también pueden agregar una tarjeta a un mensaje de texto. Para solicitar a los usuarios que finalicen procesos de varios pasos, como completar un formulario, las apps de Chat también pueden crear tarjetas que se abran 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 text objeto.

En el siguiente ejemplo, una app de Chat crea un mensaje de texto en un espacio para un equipo de desarrolladores de software que se acerca a la congelación 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 la congelación del código.

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 cardsV2 array y consta de lo siguiente:

  • Uno o más CardWithId objetos.
  • Un cardId, que se usa para identificar la tarjeta y cuyo alcance se limita a un mensaje determinado (las tarjetas de diferentes mensajes pueden tener el mismo ID)

  • Un objeto card, que consta de lo siguiente:

    • Un objeto header que especifica elementos como un título, un subtítulo y una imagen de estilo de avatar
    • Uno o más section objetos que contienen al menos un widget.
    • Uno o más widget objetos. (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 header, section y widget objetos:

Una app de Chat que ejecuta una encuesta en un espacio de Chat con un mensaje de tarjeta

El siguiente código representa el JSON del mensaje de 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"
                            }
                          ]
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

Usa Card Builder para diseñar y obtener una vista previa de las interfaces de usuario y de mensajería para las apps de Chat:

Abrir Card Builder