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 el texto y las imágenes aparecen en el mensaje.
Usa Card Builder para diseñar mensajes de tarjetas JSON y obtener una vista previa de ellos para apps de Chat:
Abre el Creador de tarjetasRequisitos previos
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 de 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 máximo de imagen recomendado es de 2 MB.
La siguiente es una tarjeta que consta de un widget de 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 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 las imágenes se recorta:
Cómo recortar una imagen
Para ajustar la forma de una imagen, aplica cropStyle.
Hay varias formas para aplicar a una imagen:
- Usa
SQUAREpara aplicar un recorte cuadrado. - Usa
CIRCLEpara aplicar un recorte circular. - Usa
RECTANGLE_CUSTOMpara aplicar un recorte rectangular con una relación de aspecto personalizada. Por ejemplo, puedes usarRECTANGLE_4_3para 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 los mensajes de tarjetas y los diálogos de las siguientes maneras:
- Muestra un ícono independiente.
- Muestra un ícono frente al 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 indican los íconos integrados 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 | ||
| ENTRADA | TRAIN | ||
| VIDEO_CAMERA | VIDEO_PLAY |
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 compatibles, consulta Formato de texto de tarjetas.
Por ejemplo, el siguiente formato está disponible para el texto de un párrafo:
- Muestra texto en negrita, subrayado o cursiva con las etiquetas HTML
<b>,<u>y<i>. - Vínculo a sitios web con HTML
<a href="https://www.google.com">hyperlinks</a> - Agrega un poco de color con HTML
<font color="#ea9999">font tags</font>.
Cada widget de TextParagraph se renderiza como un párrafo nuevo y puede considerarse 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 diseño y capacidades opcionales. Por ejemplo:
- Muestra una
icondelante del texto constartIcon. - Muestra un título antes del texto con
topLabel. - Agrega un botón en el que se pueda hacer clic con
buttono un botón de activación intercambiable conswitchControl.
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 del estado de pedidos y notificaciones de tickets de trabajo.
El widget DecoratedText admite 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 compatibles, consulta Formato de texto de tarjetas.
La siguiente es 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 muestran un error, la interfaz de Chat muestra el mensaje “Se produjo un error”. o "No se pudo procesar la 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, puede que no aparezca un mensaje de tarjeta.
Aunque es posible que un mensaje de error no aparezca en la IU de Chat, hay mensajes de error descriptivos y datos de registro disponibles para ayudarte a corregir errores cuando está activado el registro de errores para las apps de Chat. Si necesitas ayuda para ver, depurar y corregir errores, consulta Cómo solucionar problemas y corregir errores de Google Chat.