Respuestas enriquecidas

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

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 image.

Esta propiedad tiene las siguientes restricciones:

  • Se permite un máximo de 15 líneas sin una imagen o 10 con image. Es de aproximadamente 750 (sin imagen) o 500 (con imagen). Ten en cuenta que los dispositivos móviles truncan el texto antes que las superficies con pantallas más grandes.
  • El texto no debe contener un vínculo.

Se admite un subconjunto limitado de Markdown:

  • Nueva línea con doble espacio seguido de \n
  • **bold**
  • *italics*
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

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 TableRow describe las celdas de una fila diferente en la misma tabla.

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:

  1. En la Consola de Actions, ve a Desarrollo > Personalización del tema.
  2. 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.
  3. Haz clic en Guardar.
Cómo personalizar el tema en la Consola de Actions