Agrega imágenes y texto a las tarjetas

En esta página, se explica cómo agregar texto e imágenes a las tarjetas y darles formato.

Para obtener más información sobre cómo compilar tarjetas, consulta Compila tarjetas para apps de Google Chat.

Usa Card Builder para diseñar y obtener una vista previa de las interfaces de usuario y los mensajes de las apps de Chat:

Abrir Card Builder

Requisitos previos

Una app de Google Chat configurada para recibir eventos de interacción y responder a ellos Para crear una app de Chat interactiva, completa una de las siguientes guías de inicio rápido según la arquitectura de la app que quieras usar:

Agregar imágenes o íconos

En esta sección, se explica cómo agregar elementos visuales a las tarjetas, como imágenes, componentes de imágenes y también íconos.

Agregar una imagen

El widget Image muestra una imagen en formato PNG o JPG alojada en una URL HTTPS. El ancho de la imagen mostrada ocupa todo el ancho de la tarjeta mostrada, y su altura se ajusta para mantener la relación de aspecto de la imagen. El widget Image admite acciones de onclick que se producen 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.
  • Ejecuta 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 máximo recomendado de la imagen es de 2 MB.

A continuación, se muestra 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 un diseño limitado. Un widget de 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 ellas está recortada:

Puedes ajustar la forma de un componente de imagen aplicando 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 imagen:

Agregar un ícono

El widget Icon representa un ícono integrado o un ícono personalizado. Puedes agregar íconos a las tarjetas para realizar cualquiera de las siguientes acciones:

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

A continuación, se muestra 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:

AIRPLANE BOOKMARK
BUS CAR
RELOJ CONFIRMATION_NUMBER_ICON
DESCRIPCIÓN MONEDA
CORREO ELECTRÓNICO EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITAR MAP_PIN
MEMBRESÍA MULTIPLE_PEOPLE
PERSON TELÉFONO
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Cómo agregar texto a una tarjeta

En esta sección, se explica cómo agregar texto a una tarjeta y darle formato.

Agrega 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 las etiquetas HTML admitidas, consulta Cómo dar formato al texto que aparece en las tarjetas.

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

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

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

A continuación, se muestra una tarjeta que consta de dos widgets de TextParagraph que se usan para mostrar dos párrafos con formato HTML simple:

Cómo agregar un párrafo de texto que se puede contraer

Los párrafos de texto contraibles permiten a los usuarios mostrar más información on demand. Este widget es perfecto para presentar contenido extenso o detalles adicionales que se pueden explorar cuando se seleccionan, lo que crea una experiencia del usuario interactiva y dinámica.

Texto de pantalla con elementos decorativos

El widget DecoratedText muestra texto con diseño y capacidades 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 con switchControl.

Usa el widget de 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 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 las etiquetas HTML admitidas, consulta Formato de texto de tarjetas.

A continuación, se muestra una tarjeta que consta de un widget de 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:

Solucionar problemas

Cuando una app o una tarjeta de Google Chat muestra 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 la 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 para ayudarte a corregir errores cuando se activa el registro de errores para las apps de Chat. Para obtener ayuda para ver, depurar y corregir errores, consulta Cómo solucionar y corregir errores de Google Chat.