Las respuestas enriquecidas agregan elementos visuales para mejorar las interacciones de los usuarios con tu Acción. Puedes usar los siguientes tipos de respuesta enriquecida como parte de una instrucción:
- Tarjeta básica
- Tarjeta de imagen
- Tarjeta de tabla
Cuando definas una respuesta enriquecida, usa un candidato con la capacidad de plataforma RICH_RESPONSE
para que Asistente de Google solo muestre la respuesta enriquecida en los dispositivos compatibles. Solo puedes usar una respuesta enriquecida por objeto content
en un mensaje.
Tarjeta básica
Las tarjetas básicas están diseñadas para ser concisas, presentar información clave (o resumen) a los usuarios y permitir que los usuarios obtengan más información si así lo desean (mediante un vínculo web).
Usa tarjetas básicas para fines de visualización, ya que no tienen funciones de interacción sin un botón. Para vincular un botón a la Web, una plataforma también debe tener la capacidad WEB_LINK
.
![Ejemplo de una tarjeta básica en una pantalla inteligente](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/basic-card.png?authuser=7&hl=es)
Propiedades
El tipo de respuesta con tarjeta básica tiene las siguientes propiedades:
Propiedad | Tipo | Requisito | Descripción |
---|---|---|---|
title |
cadena | Opcional | Título de la tarjeta con texto sin formato. Los títulos tienen una fuente y un tamaño fijos, y los caracteres después de la primera línea se truncan. La altura de la tarjeta se contrae si no se especifica un título. |
subtitle |
cadena | Opcional | Subtítulo de texto sin formato de la tarjeta. Los títulos tienen una fuente y un tamaño fijos, y los caracteres después de la primera línea se truncan. La altura de la tarjeta se contrae si no se especifica ningún subtítulo. |
text |
cadena | Condicionales |
Contenido de texto sin formato de la tarjeta. El texto demasiado largo se trunca en la última pausa de palabra con puntos suspensivos. Esta propiedad es obligatoria, a menos que esté presente Esta propiedad tiene las siguientes restricciones:
Se admite un subconjunto limitado de Markdown:
|
image |
Image |
Opcional | Imagen que se muestra en la tarjeta. Las imágenes pueden ser JPG, PNG y GIF (animadas y no animadas). |
image_fill |
ImageFill |
Opcional | Borde entre la tarjeta y el contenedor de imagen que se usará cuando la relación de aspecto de la imagen no coincida con la del contenedor. |
button |
Link |
Opcional | Botón que vincula al usuario con una URL cuando se presiona. El botón debe tener una propiedad name que contenga el texto del botón y una propiedad url que contenga la URL del vínculo. El texto del botón no puede ser engañoso y se verifica durante el proceso de revisión. |
Código de muestra
YAML
candidates: - first_simple: variants: - speech: This is a card. text: This is a card. content: card: title: Card Title subtitle: Card Subtitle text: Card Content image: url: 'https://developers.google.com/assistant/assistant_96.png' alt: Google Assistant logo
JSON
{ "candidates": [ { "first_simple": { "variants": [ { "speech": "This is a card.", "text": "This is a card." } ] }, "content": { "card": { "title": "Card Title", "subtitle": "Card Subtitle", "text": "Card Content", "image": { "url": "https://developers.google.com/assistant/assistant_96.png", "alt": "Google Assistant logo" } } } } ] }
Node.js
app.handle('Card', conv => { conv.add('This is a card.'); conv.add(new Card({ "title": "Card Title", "subtitle": "Card Subtitle", "text": "Card Content", "image": new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' }) })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {} }, "prompt": { "override": false, "content": { "card": { "title": "Card Title", "subtitle": "Card Subtitle", "text": "Card Content", "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } } }, "firstSimple": { "speech": "This is a card.", "text": "This is a card." } } } }
Tarjetas de imagen
Las tarjetas de imagen están diseñadas para ser una alternativa más simple a una tarjeta básica que también contiene una imagen. Usa una tarjeta de imagen cuando desees presentar una imagen y no necesites texto complementario ni componentes interactivos.
Propiedades
El tipo de respuesta de tarjeta de imagen tiene las siguientes propiedades:
Propiedad | Tipo | Requisito | Descripción |
---|---|---|---|
url |
cadena | Obligatorias | Es la URL de origen de la imagen. Las imágenes pueden ser JPG, PNG o GIF (animadas y no animadas). |
alt |
cadena | Obligatorias | Es la descripción del texto de la imagen que se usará para la accesibilidad. |
height |
int32 | Opcional | Es la altura de la imagen en píxeles. |
width |
int32 | Opcional | Es el ancho de la imagen en píxeles. |
Código de muestra
YAML
candidates: - first_simple: variants: - speech: This is an image prompt. text: This is an image prompt. content: image: alt: Google Assistant logo url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{ "candidates": [ { "first_simple": { "variants": [ { "speech": "This is an image prompt.", "text": "This is an image prompt." } ] }, "content": { "image": { "alt": "Google Assistant logo", "url": "https://developers.google.com/assistant/assistant_96.png" } } } ] }
Node.js
app.handle('Image', conv => { conv.add("This is an image prompt!"); conv.add(new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {} }, "prompt": { "override": false, "content": { "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 } }, "firstSimple": { "speech": "This is an image prompt.", "text": "This is an image prompt." } } } }
Tarjetas de tablas
Las tarjetas de tabla te permiten mostrar datos tabulares en tu respuesta (por ejemplo, posiciones deportivas, resultados electorales y vuelos). Puedes definir columnas y filas (hasta 3 cada una) que Asistente mostrará en tu tarjeta de tabla. También puedes definir columnas y filas adicionales, junto con su priorización.
![Ejemplo de una tarjeta de mesa en una pantalla inteligente](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/table.png?authuser=7&hl=es)
Las tablas muestran datos estáticos y no son interactivos. Para las respuestas de selección interactiva, usa una respuesta de selección visual.
Propiedades
El tipo de respuesta de la tarjeta de tabla tiene las siguientes propiedades:
Propiedad | Tipo | Requisito | Descripción |
---|---|---|---|
title |
cadena | Condicionales | Título con texto sin formato de la tabla. Esta propiedad es obligatoria si se configura subtitle . |
subtitle |
cadena | Opcional | Subtítulo de texto sin formato de la tabla. La personalización del tema no afecta a los subtítulos de las tarjetas de tabla. |
columns |
array de TableColumn |
Obligatorias | Encabezados y alineación de columnas. Cada objeto TableColumn describe el encabezado y la alineación de una columna diferente en la misma tabla. |
rows |
array de TableRow |
Obligatorias |
Son los datos de la fila de la tabla. Se garantiza que se mostrarán las primeras 3 filas, pero es posible que otras no aparezcan en ciertas plataformas. Puedes realizar pruebas con el simulador para ver qué filas se muestran en una superficie determinada. Cada objeto |
image |
Image |
Opcional | Imagen asociada con la tabla. |
button |
Link |
Opcional | Botón que vincula al usuario con una URL cuando se presiona. El botón debe tener una propiedad name que contenga el texto del botón y una propiedad url que contenga la URL del vínculo. El texto del botón no puede ser engañoso y se verifica durante el proceso de revisión.
|
Código de muestra
En los siguientes fragmentos, se muestra cómo implementar una tarjeta de tabla:
YAML
candidates: - first_simple: variants: - speech: This is a table. text: This is a table. content: table: title: Table Title subtitle: Table Subtitle columns: - header: Column A - header: Column B - header: Column C rows: - cells: - text: A1 - text: B1 - text: C1 - cells: - text: A2 - text: B2 - text: C2 - cells: - text: A3 - text: B3 - text: C3 image: alt: Google Assistant logo url: 'https://developers.google.com/assistant/assistant_96.png'
JSON
{ "candidates": [ { "first_simple": { "variants": [ { "speech": "This is a table.", "text": "This is a table." } ] }, "content": { "table": { "title": "Table Title", "subtitle": "Table Subtitle", "columns": [ { "header": "Column A" }, { "header": "Column B" }, { "header": "Column C" } ], "rows": [ { "cells": [ { "text": "A1" }, { "text": "B1" }, { "text": "C1" } ] }, { "cells": [ { "text": "A2" }, { "text": "B2" }, { "text": "C2" } ] }, { "cells": [ { "text": "A3" }, { "text": "B3" }, { "text": "C3" } ] } ], "image": { "alt": "Google Assistant logo", "url": "https://developers.google.com/assistant/assistant_96.png" } } } } ] }
Node.js
app.handle('Table', conv => { conv.add('This is a table.'); conv.add(new Table({ "title": "Table Title", "subtitle": "Table Subtitle", "image": new Image({ url: 'https://developers.google.com/assistant/assistant_96.png', alt: 'Google Assistant logo' }), "columns": [{ "header": "Column A" }, { "header": "Column B" }, { "header": "Column C" }], "rows": [{ "cells": [{ "text": "A1" }, { "text": "B1" }, { "text": "C1" }] }, { "cells": [{ "text": "A2" }, { "text": "B2" }, { "text": "C2" }] }, { "cells": [{ "text": "A3" }, { "text": "B3" }, { "text": "C3" }] }] })); });
JSON
{ "responseJson": { "session": { "id": "session_id", "params": {} }, "prompt": { "override": false, "content": { "table": { "button": {}, "columns": [ { "header": "Column A" }, { "header": "Column B" }, { "header": "Column C" } ], "image": { "alt": "Google Assistant logo", "height": 0, "url": "https://developers.google.com/assistant/assistant_96.png", "width": 0 }, "rows": [ { "cells": [ { "text": "A1" }, { "text": "B1" }, { "text": "C1" } ] }, { "cells": [ { "text": "A2" }, { "text": "B2" }, { "text": "C2" } ] }, { "cells": [ { "text": "A3" }, { "text": "B3" }, { "text": "C3" } ] } ], "subtitle": "Table Subtitle", "title": "Table Title" } }, "firstSimple": { "speech": "This is a table.", "text": "This is a table." } } } }
Cómo personalizar tus respuestas
Puedes cambiar el aspecto de tus respuestas enriquecidas creando un tema personalizado para tu proyecto de Acciones. Esta personalización puede ser útil para definir un aspecto único para la conversación cuando los usuarios invocan tus acciones en una superficie con una pantalla.
Para establecer un tema de respuesta personalizado, haz lo siguiente:
- En la Consola de Actions, ve a Desarrollo > Personalización del tema.
- Configura alguna de las siguientes opciones o todos ellos:
- Color de fondo: Se usa como fondo de tus tarjetas. En general, usa un color claro para el fondo a fin de que el contenido de la tarjeta sea más fácil de leer.
- Color principal: Es el color principal de los textos de encabezado y los elementos de la interfaz de tus tarjetas. En general, usa un color primario más oscuro para mejorar el contraste con el color de fondo.
- Familia de fuentes: Describe el tipo de fuente que se usa para los títulos y otros elementos de texto destacados.
- Estilo de la esquina de la imagen: Modifica el aspecto de las esquinas de las tarjetas.
- Imagen de fondo: Es una imagen personalizada para usar en lugar del color de fondo. Proporciona dos imágenes diferentes para cuando el dispositivo de superficie esté en modo horizontal o vertical. Si utilizas una imagen de fondo, el color principal se establece en blanco.
- Haz clic en Guardar.
![Cómo personalizar el tema en la Consola de Actions](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/theme-customization.png?authuser=7&hl=es)