Las tarjetas enriquecidas combinan contenido multimedia, texto y sugerencias en un solo mensaje. Se enfocan en un solo tema y ofrecen acciones claras a los usuarios.
Una tarjeta enriquecida puede contener lo siguiente:
- Medios (imagen/GIF, video o archivo PDF)
- Texto del título
- Texto descriptivo
- Respuestas y acciones sugeridas.
Cada uno de estos campos es opcional, pero al menos uno de los campos del 1 al 3 debe incluirse en la tarjeta enriquecida.
Componentes de tarjetas enriquecidas
Medios
Las tarjetas enriquecidas pueden incluir varios tipos de medios, como imágenes, GIFs, videos y archivos PDF. Las tarjetas enriquecidas admiten una variedad de formatos de medios.
Tipos de imágenes admitidos:
- JPEG/JPG
- GIF
- PNG
Tipos de videos admitidos:
- H.263
- M4V
- MP4
- MPEG
- MPEG-4
- WebM
Tipos de archivos admitidos (solo disponibles en India en el cliente de Mensajes de Google):
Puedes elegir entre tres alturas de medios para una tarjeta enriquecida:
| Tipo de medio | Altura de medios |
|---|---|
| Contenido multimedia corto | 112 DP |
| Medios | 168 DP |
| Contenido multimedia alto | 264 DP |
DP significa píxeles independientes de la densidad, que son unidades diseñadas para proporcionar un tamaño físico coherente para los elementos de la IU en pantallas con diferentes densidades de píxeles.
Si las dimensiones del contenido multimedia no coinciden con la altura seleccionada, el sistema automáticamente hace un acercamiento y recorta el contenido de forma central. Este recorte puede generar una vista previa no deseada. Para mostrar la imagen exacta que deseas, especifica una miniatura. Si haces clic en la vista previa o la miniatura, se abrirá una vista en pantalla completa del archivo multimedia.
Los archivos PDF muestran una imagen de vista previa basada en la primera página del archivo, incluso si se proporciona una miniatura. Si haces clic en la imagen de vista previa, se abrirá el archivo en un visor de PDF. Cuando no hay una vista previa disponible (por ejemplo, cuando el archivo está protegido con contraseña), el archivo PDF muestra la imagen en miniatura o un ícono predeterminado si no se especifica una miniatura.
Sube contenido multimedia especificando una URL o subiendo un archivo directamente. Puedes encontrar más información en la página Enviar mensajes.
Miniatura
El tamaño máximo de un archivo de miniatura es de 100 KB. Para una experiencia del usuario óptima, recomendamos que sea de 50 kB o menos. Si no proporcionas una miniatura, se mostrará un ícono predeterminado. La miniatura permanece visible durante la descarga del archivo, incluso si falla, y también sirve como vista previa de los videos descargados. Si presionas la miniatura o el ícono predeterminado, se abrirá una vista en pantalla completa del archivo multimedia.
Texto del título
El título de tu tarjeta enriquecida es como un encabezado que capta la atención del usuario y le da una idea clara de qué trata tu mensaje. Asegúrate de que sea concisa e informativa. Puede tener hasta 200 caracteres.
Descripción
La descripción de la tarjeta enriquecida incluye información complementaria esencial. Aquí es donde explicas el título, destacas los beneficios clave y generas conversiones con un llamado a la acción claro. La descripción puede tener hasta 2,000 caracteres.
Respuestas y acciones sugeridas
Cada tarjeta enriquecida puede contener hasta cuatro respuestas sugeridas y acciones sugeridas. Además, puedes agregar hasta 11 sugerencias debajo de tu tarjeta en una lista de chips, de forma similar a como agregarías sugerencias a un mensaje de texto. Las respuestas y acciones sugeridas en una lista de chips son una forma de avanzar en la conversación. No deben repetir las opciones que se enumeran en la tarjeta enriquecida ni ser herramientas de selección para los elementos que se presentan en un carrusel.
Puedes encontrar información detallada sobre las sugerencias en este artículo.
Respuestas sugeridas
Las respuestas sugeridas ayudan a los usuarios a interactuar con tu agente de formas a las que este puede responder fácilmente. A menos que la interacción requiera una respuesta de formato libre, usa respuestas sugeridas. Son más fáciles de procesar que el texto de formato libre y permiten que tu agente dirija las conversaciones por un camino óptimo.
Las respuestas sugeridas pueden tener hasta 25 caracteres.
Acciones sugeridas
Las acciones sugeridas permiten que un agente se conecte a las acciones nativas del dispositivo y brindan una experiencia estrechamente integrada para el usuario. Cuando son pertinentes, las acciones sugeridas pueden facilitar la llamada al servicio de asistencia al cliente o la búsqueda de una ubicación en el mapa.
Sin embargo, no abrumes a los usuarios con demasiadas opciones. Solo proporciona acciones relacionadas con el mensaje más reciente y solo proporciona las acciones necesarias. Limita la cantidad de acciones y respuestas sugeridas a lo que le resulte útil al usuario en un contexto determinado.
Las acciones sugeridas pueden tener hasta 25 caracteres.
Diseño de tarjeta enriquecida
Las tarjetas enriquecidas pueden tener un diseño vertical o horizontal.
Tarjetas enriquecidas verticales
Las tarjetas enriquecidas verticales muestran contenido multimedia horizontal en la parte superior de la tarjeta. La altura mínima de una tarjeta enriquecida vertical es de 112 dp.
El contenido multimedia que se usa en una tarjeta enriquecida vertical puede tener la siguiente altura:
- Corta: 112 DP
- Mediana: 168 dp
- Grande: 264 DP
El contenido multimedia que se usa en una tarjeta enriquecida vertical puede tener una relación de aspecto de lo siguiente:
- 2:1
- 16:9
- 7:3
Tarjetas enriquecidas horizontales
Las tarjetas enriquecidas horizontales muestran contenido multimedia en el lado izquierdo o derecho de la tarjeta.
Una tarjeta enriquecida horizontal no tiene una proporción de medios fija, pero sí un ancho fijo de 128 DP. La altura se ajusta a la de los elementos de texto de la tarjeta.
Carruseles de tarjeta enriquecida
Puedes enviar una tarjeta enriquecida independiente o un carrusel de tarjetas enriquecidas.
Los carruseles de tarjetas enriquecidas son ideales para mostrar varios elementos, como planes de datos o dispositivos, y permiten que los usuarios exploren y comparen diferentes opciones en un solo mensaje. Un carrusel es ideal cuando quieres presentar una variedad de opciones o permitir la exploración de contenido relacionado.
El primer elemento de un carrusel debe ser la opción óptima, y el motivo debe ser claro para el usuario. Puedes tener hasta diez tarjetas en un carrusel de tarjetas enriquecidas. Los carruseles de tarjetas enriquecidas solo pueden contener tarjetas enriquecidas verticales.
Al igual que con un mensaje de tarjeta enriquecida independiente, puedes incluir chips de sugerencia debajo de un carrusel para avanzar en la conversación. Los chips de sugerencias no deben repetir las opciones que se enumeran en el carrusel, y no son herramientas de selección para los elementos que se presentan en el carrusel.
Especificaciones del carrusel
| Especificación | Detalles |
|---|---|
| Título | El máximo es 200 caracteres. |
| Descripción | Se admiten hasta 2,000 caracteres. |
| Altura | • Carruseles pequeños: altura máxima de 542 DP • Carruseles medianos: altura máxima de 592 DP Todas las tarjetas dentro de un carrusel se ajustarán para que coincidan con la altura de la tarjeta más alta. Para obtener detalles sobre cómo se ajusta el contenido para adaptarse a esta altura, consulta Tamaño y truncamiento del contenido. |
| Ancho | Elige una de las siguientes opciones: • Pequeño: 180 DP (ancho fijo) • Mediano: 296 DP (ancho fijo) |
Tamaño y truncamiento del contenido
Si el contenido de un carrusel de tarjetas enriquecidas no es lo suficientemente grande como para ocupar la altura mínima, se agregará espacio en blanco adicional en la parte inferior. Si el contenido supera la altura máxima, se truncará en el siguiente orden:
- Es la descripción reducida a una sola línea.
- Título, reducido a una sola línea.
- Se quitaron por completo las sugerencias.
- Se quitó la descripción por completo.
- Se quitó el título por completo.
Para resolver este problema de truncamiento y que los usuarios siempre puedan ver el contenido completo, RBM proporciona una vista de pantalla completa expandible para las tarjetas en un carrusel. Para obtener más detalles sobre esta función, consulta Vista de pantalla completa para carruseles.
Vista de pantalla completa para carruseles
Para evitar que el texto o las sugerencias se pierdan en el truncamiento, RBM proporciona una vista de pantalla completa para los carruseles de tarjetas enriquecidas. Esto permite que los diseñadores usen los límites de texto completos, ya que saben que los usuarios pueden expandir la tarjeta para ver el mensaje completo.
Detalles clave para desarrolladores
- No es necesario realizar ninguna acción: Esta función se habilita automáticamente para todos los carruseles de tarjetas enriquecidas.
- Alcance: Solo se aplica a los carruseles de tarjetas enriquecidas. Las tarjetas enriquecidas independientes no se ven afectadas.
- Límites: Todos los límites existentes de caracteres y sugerencias para los títulos (200), las descripciones (2,000) y las sugerencias (4) permanecen iguales.
Abrir y cerrar la vista de pantalla completa
Para abrir: Cuando el contenido de una tarjeta se trunca, aparece un botón Más al final del texto visible. El usuario puede presionar en cualquier lugar del área de texto de la tarjeta o en el botón Más para abrir la vista de pantalla completa.
Para cerrar: Los usuarios pueden salir de la vista de pantalla completa de las siguientes maneras:
- Presiona el botón X en la esquina superior izquierda.
- Usa el botón Atrás del sistema o la navegación por gestos hacia atrás.
- Presiona una sugerencia que continúe la conversación.
Navegación en la vista de pantalla completa
La vista de pantalla completa permite el desplazamiento vertical dentro de una tarjeta y el deslizamiento horizontal entre tarjetas.
- Desplazamiento vertical: Si el texto de una tarjeta sigue siendo más largo que la vista de pantalla completa, el área de texto y medios se puede desplazar verticalmente. Las sugerencias permanecen "flotando" y siempre visibles en la parte inferior de la pantalla.
- Deslizamiento horizontal: En la vista de pantalla completa, los usuarios pueden deslizar el dedo horizontalmente para pasar a la tarjeta siguiente o anterior del carrusel.
Desplazamiento vertical
Deslizar horizontalmente
Especificaciones para la vista de pantalla completa
Cuando se expande una tarjeta, se usa un diseño estandarizado de pantalla completa.
| Especificación | Detalles |
|---|---|
| Altura del medio | 264 DP La altura del contenido multimedia en la vista de pantalla completa siempre usa el parámetro de configuración de contenido multimedia alto. |
| Ancho del medio | screenwidth - 32 DP El contenido multimedia se expande para ocupar el ancho de la pantalla con márgenes de 16 DP en cada lado. Se aplican las mismas reglas de recorte central. |
Cómo funcionan las sugerencias en la vista de pantalla completa
Cuando un usuario presiona una sugerencia en la vista de pantalla completa, el comportamiento resultante depende del tipo de sugerencia:
| Tipo de sugerencia | Comportamiento |
|---|---|
| Acción de OpenURL | La URL se abre en el navegador predeterminado o en una superposición de WebView. Cuando el usuario vuelve a Mensajes de Google, se restablece la vista de pantalla completa. |
| Acciones de Llamar, Ver ubicación y Crear un evento de calendario | Se abrirá la app correspondiente. Cuando vuelvas a Mensajes de Google, se restablecerá la vista de pantalla completa. |
| Acción de Compartir ubicación | Se cierra la vista de pantalla completa y se abre Google Maps. Después de que el usuario envía su ubicación, vuelve automáticamente a la vista de chat estándar. |
| Respuesta sugerida | Se cierra la vista de pantalla completa y se envía la respuesta en la vista de chat estándar, lo que continúa la conversación. |
Límites
Los títulos de las tarjetas enriquecidas tienen un límite de 200 caracteres, mientras que las descripciones pueden tener hasta 2,000 caracteres. Ten en cuenta que los caracteres especiales, como los emojis o los conjuntos de caracteres multibyte, se cuentan como 2 a 4 caracteres o más.
El contenido multimedia en una tarjeta enriquecida o en un carrusel de tarjetas enriquecidas puede tener la siguiente altura:
- Corta: 112 DP
- Mediana: 168 dp
- Grande: 264 DP
Para que todos los elementos (multimedia, títulos, descripciones y botones) se muestren correctamente en tu tarjeta enriquecida o carrusel, deben cumplir con los límites de caracteres y tamaño especificados.
El tamaño máximo de la carga útil de una tarjeta enriquecida es de 250 KB.