En esta página, se describe cómo diseñar y crear los componentes principales de la IU de la tarjeta. mensajes en Google Chat.
Las tarjetas admiten un diseño definido, elementos interactivos de la interfaz de usuario, como botones, y como imágenes, rich media. Puedes usar tarjetas para presentar información, recopilar datos o explicar los próximos pasos a los usuarios los mensajes de las tarjetas diálogos.
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 tarjetasPor lo general, las tarjetas y los diálogos tienen los siguientes componentes:
- Es un elemento
CardHeader
que contiene el título de la tarjeta. - Uno o más widgets
CardSection
que forman el cuerpo principal de la tarjeta. - Un widget
CardFixedFooter
específico solo para diálogos
Requisitos 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
Agregar un encabezado
El widget CardHeader
representa el encabezado de una tarjeta. Los encabezados pueden incluir una
título, subtítulo y una imagen de avatar para tu tarjeta.
Puedes incluir CardHeader
para
mensajes de tarjetas y
diálogos.
A continuación, se muestra un ejemplo de un CardHeader
:
Cómo definir una sección de una tarjeta
El widget CardSection
es una
un contenedor de alto nivel dentro de una tarjeta. Usas tarjeta
para agrupar widgets en una tarjeta. Para cada sección de la tarjeta, puedes incluir
un encabezado y uno o más widgets.
Puedes incluir CardSection
para
mensajes de tarjetas y
diálogos.
El siguiente es un ejemplo de un CardSection
que contiene dos textParagraph
widgets:
Botón de control personalizable de la sección contraíble
Personaliza el botón de control que contrae y expande secciones dentro de tu Tarjetas de chat Elige entre una variedad de iconos o imágenes para representar visualmente el contenido de esta sección, lo que facilita a los usuarios la comprensión e interacción la información.
Agrega un pie de página persistente
La CardFixedFooter
widget representa el pie de página de un mensaje de diálogo enviado por
una app de Chat.
Los pies de página pueden incluir un botón principal y uno secundario.
El widget CardFixedFooter
solo está disponible para
diálogos.
El siguiente es un ejemplo de un widget CardFixedFooter
con dos botones:
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.