En esta página, se explica cómo agregar imágenes y texto a una tarjeta o un mensaje de diálogo. para modificar la forma en que aparecen el texto y las imágenes 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
Una app de Google Chat habilitada para funciones interactivas. Para crear un app de Chat interactiva, completa una de las siguientes guías de inicio rápido en la arquitectura de app que quieres usar:
- Servicio HTTP con Google Cloud Functions
- Google Apps Script
- Dialogflow CX de Google Cloud
- Google Cloud Pub/Sub
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.
se ajusta su altura para mantener la relación de aspecto de la imagen. El widget de Image
admite
onclick
acciones
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
- Ejecuta un acción que ejecuta 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 el
Imagen de la página de destino de la documentación para desarrolladores de Google Chat. Cuando los usuarios hacen clic
la documentación para desarrolladores de Google Chat se abrirá en una pestaña nueva.
Cómo agregar un componente de imagen
El widget Image
es una imagen con estilo limitado. Los
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 recortado:
Cómo recortar una imagen
Puedes ajustar la forma de una imagen aplicando un
cropStyle
Hay varias formas para 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 un aspecto personalizado proporción. Por ejemplo, puedes usarRECTANGLE_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.
a cada imagen:
Agregar un ícono
El
Widget Icon
representa un
integrado
ícono o
personalizado
ícono. Puedes usar Icon
en
mensajes de tarjetas
y
diálogos
de las siguientes maneras:
- Muestra un ícono independiente.
- Mostrar un ícono frente al texto relacionado, como parte de una
DecoratedText
. - Mostrar un ícono como un botón interactivo, como parte de un
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 | MARCADOR | ||
Autobús | AUTO | ||
RELOJ | CONFIRMATION_NUMBER_ICON | ||
DESCRIPCIÓN | MONEDA | ||
CORREO ELECTRÓNICO | EVENT_SEAT | ||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
HOTEL | HOTEL_ROOM_TYPE | ||
INVITE | MAP_PIN | ||
MEMBRESÍA | MULTIPLE_PEOPLE | ||
PERSONA | TELÉFONO | ||
RESTAURANT_ICON | SHOPPING_CART | ||
DESTACAR | TIENDA | ||
ENTRADA | ENTRENAMIENTO | ||
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. Al establecer
el contenido de texto de estos widgets, incluye solo las etiquetas HTML correspondientes.
Para obtener más información sobre las etiquetas HTML compatibles, consulta
Formato del texto de las tarjetas
Por ejemplo, el siguiente formato está disponible para el texto de un párrafo:
- Mostrar texto en negrita, subrayado o cursiva con HTML
<b>
,<u>
,<i>
rótulos nuevos rápidamente. - 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 se puede considerar.
de manera similar a una etiqueta HTML <p>
.
La siguiente es 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 que se pueden contraer permiten a los usuarios revelar más información a pedido. Este widget es perfecto para presentar contenido extenso o detalles adicionales que se pueden explorar cuando se seleccionan, lo que crea un usuario interactivo una experiencia fluida a los desarrolladores.
Muestra texto con elementos decorativos
El
Widget DecoratedText
muestra texto con capacidades y diseño opcionales. Por ejemplo:
- Muestra una
icon
delante del texto constartIcon
. - 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 intercambiable conswitchControl
.
Usa el widget DecoratedText
cuando necesites presentar información en un
de forma 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. Al establecer
el contenido de texto de estos widgets, incluye solo las etiquetas HTML correspondientes. Para
para obtener más información sobre las etiquetas HTML compatibles, consulte
Formato del texto de las tarjetas
La siguiente es una tarjeta que consta de un widget de DecoratedText
que se usa para mostrar
detalles de contacto, como dirección de correo electrónico, estado de conexión, número de teléfono y
sitio web:
Solucionar problemas
Cuando una app de Google Chat o card muestra un error, el En la interfaz de Chat, aparece un mensaje que dice “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 de Chat la tarjeta produce un resultado inesperado; Por ejemplo, es posible que un mensaje de tarjeta no para que aparezca la opción.
Aunque es posible que no aparezca 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 de las apps de Chat. Para obtener ayuda sobre la visualización, la depuración y la corrección de errores, consulta Soluciona problemas y corrige errores de Google Chat.
Temas relacionados
- Consulta ejemplos de la app de Chat que usan tarjetas y diálogos.
Image
imageCompent
cropStyle
Icon
TextParagraph
DecoratedText