Cómo agregar imágenes y texto a una tarjeta o un diálogo

En esta página, se explica cómo agregar imágenes y texto a una tarjeta o un mensaje de diálogo, y cómo modificar la forma en que estos elementos aparecen en el mensaje.


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

Abre el Creador de tarjetas

Requisitos previos

  • Una cuenta de Google Workspace con acceso a Google Chat
  • Una app de Chat publicada. Para compilar una app de Chat, sigue esta quickstart.
  • Agrega una imagen

    El widget Image muestra una imagen PNG o JPG alojada en una URL HTTPS. El ancho de la imagen que se muestra ocupa todo el ancho de la tarjeta que se muestra y su altura se ajusta para mantener la relación de aspecto de la imagen. El widget Image admite acciones onclick que ocurren cuando los usuarios hacen clic en la imagen. Estos son algunos ejemplos de acciones de onclick:

    • Abre un hipervínculo con OpenLink, como un hipervínculo a la documentación para desarrolladores de Google Chat, https://developers.google.com/chat.
    • Ejecutar una acción que ejecute una función personalizada, como llamar a una API

    El widget Image tiene las siguientes limitaciones:

    • Solo se admiten imágenes PNG y JPG.
    • La URL del host debe ser HTTPS.
    • Para garantizar que las tarjetas tengan un buen rendimiento, el tamaño de imagen máximo recomendado es de 2 MB.

    La siguiente es una tarjeta que consta de un widget Image. Muestra la imagen de la página de destino de la documentación para desarrolladores de Google Chat. Cuando los usuarios hacen clic en la imagen, se abre la documentación para desarrolladores de Google Chat en una pestaña nueva.

    Cómo agregar un componente de imagen

    El widget Image es una imagen con estilo limitado. Un widget imageCompent te permite aplicar cropStyle y borderStyle a una imagen.

    En el siguiente ejemplo, se muestran dos imágenes en una cuadrícula, en la que una de las imágenes se recorta:

    Cómo recortar una imagen

    Para ajustar la forma de una imagen, aplica un cropStyle. Hay varias formas que puedes aplicar a una imagen:

    • Usa SQUARE para aplicar un recorte cuadrado.
    • Usa CIRCLE para aplicar un recorte circular.
    • Usa RECTANGLE_CUSTOM para aplicar un recorte rectangular con una relación de aspecto personalizada. Por ejemplo, puedes usar RECTANGLE_4_3 para aplicar un recorte rectangular con una relación de aspecto de 4:3.

    En el siguiente ejemplo, se muestran cinco imágenes en una cuadrícula con un cropStyle diferente aplicado a cada una:

    Agregar un ícono

    El widget Icon representa un ícono integrado o un ícono personalizado. Puedes usar Icon en mensajes de tarjeta y diálogos de las siguientes maneras:

    • Muestra un ícono independiente.
    • Muestra un ícono frente a texto relacionado, como parte de un widget DecoratedText.
    • Muestra un ícono como un botón interactivo, como parte de un widget ButtonList.

    La siguiente es una tarjeta que consta de un componente Icon con un ícono integrado:

    En la siguiente tabla, se enumeran los íconos integrados que están disponibles para los mensajes de tarjetas:

    AVIÓN BOOKMARK
    BUS AUTO
    RELOJ CONFIRMATION_NUMBER_ICON
    DESCRIPTION MONEDA
    CORREO ELECTRÓNICO EVENT_SEAT
    FLIGHT_ARRIVAL FLIGHT_DEPARTURE
    HOTEL HOTEL_ROOM_TYPE
    INVITAR MAP_PIN
    MEMBRESÍA MULTIPLE_PEOPLE
    PERSONA TELÉFONO
    RESTAURANT_ICON SHOPPING_CART
    DESTACAR TIENDA
    BOLETO TRAIN
    VIDEO_CAMERA VIDEO_PLAY

    Agregar un párrafo de texto con formato

    El widget TextParagraph muestra un párrafo de texto con formato HTML opcional. Cuando configures el contenido de texto de estos widgets, solo incluye las etiquetas HTML correspondientes. Para obtener más información sobre qué etiquetas HTML son compatibles, consulta Formato de texto de tarjetas.

    Por ejemplo, el siguiente formato está disponible para el texto de párrafo:

    • Muestra texto en negrita, subrayado o en cursiva con etiquetas HTML <b>, <u> y <i>.
    • Vínculo a sitios web con código HTML <a href="https://www.google.com">hyperlinks</a>.
    • Agrega un poco de color con HTML <font color="#ea9999">font tags</font>.

    Cada widget TextParagraph se renderiza como un párrafo nuevo y se puede considerar similar a una etiqueta HTML <p>.

    La siguiente es una tarjeta que consta de dos widgets TextParagraph que se usan para mostrar dos párrafos con formato HTML simple:

    Muestra texto con elementos decorativos

    El widget DecoratedText muestra texto con capacidades y diseño opcionales. Por ejemplo:

    • Muestra un icon delante del texto con startIcon.
    • Muestra un título antes del texto con topLabel.
    • Agrega un botón en el que se pueda hacer clic con button o un botón de activación que se pueda cambiar con switchControl.

    Usa el widget DecoratedText cuando necesites presentar información de una manera interactiva y fácil de consumir. El widget es perfecto para casos de uso como tarjetas de contacto, actualizaciones de estado de pedidos y notificaciones de tickets de trabajo.

    El widget de DecoratedText admite el formato HTML de texto simple. Cuando configures el contenido de texto de estos widgets, solo incluye las etiquetas HTML correspondientes. Para obtener más información sobre qué etiquetas HTML son compatibles, consulta Formato de texto de tarjetas.

    La siguiente es una tarjeta que consta de un widget DecoratedText que se usa para mostrar detalles de contacto, como la dirección de correo electrónico, el estado en línea, el número de teléfono y el sitio web:

    Solución de problemas

    Cuando una app de Google Chat o una tarjeta devuelve un error, la interfaz de Chat muestra un mensaje que dice “Se produjo un error” o “No se pudo procesar tu solicitud”. A veces, la IU de Chat no muestra ningún mensaje de error, pero la app o la tarjeta de Chat producen un resultado inesperado; por ejemplo, es posible que no aparezca un mensaje de tarjeta.

    Si bien es posible que no se muestre un mensaje de error en la IU de Chat, hay mensajes de error descriptivos y datos de registro disponibles que te ayudarán a corregir errores cuando se activa el registro de errores para las apps de Chat. Si necesitas ayuda para ver, depurar y corregir errores, consulta Cómo solucionar problemas de Google Chat.