Descripción general (Dialogflow)

Interactive Canvas es un framework compilado en Asistente de Google que permite a los desarrolladores agregar experiencias visuales y envolventes a las acciones de conversación. Esta experiencia visual es una app web interactiva que Asistente envía como respuesta al usuario durante una conversación. A diferencia de las respuestas enriquecidas tradicionales que existen en línea en una conversación de Asistente, la aplicación web de Interactive Canvas se renderiza como una vista web de pantalla completa.

Debes usar Interactive Canvas si deseas realizar alguna de las siguientes acciones en tu Acción:

  • Crea imágenes visuales en pantalla completa
  • Cómo crear animaciones y transiciones personalizadas
  • Realizar visualizaciones de datos
  • Crea diseños y GUIs personalizados
Figura 1. Un juego interactivo creado con Interactive Canvas

Dispositivos compatibles

Actualmente, Interactive Canvas está disponible en los siguientes dispositivos:

  • Pantallas inteligentes
  • Google Nest Hubs

  • Dispositivos móviles Android

Cómo funciona

Las acciones que usan Interactive Canvas funcionan de manera similar a las acciones de conversación normales. El usuario sigue teniendo una conversación con el Asistente para cumplir su objetivo. Sin embargo, en lugar de devolver respuestas intercaladas en la conversación, una acción de Interactive Canvas envía una respuesta al usuario que abre una aplicación web de pantalla completa. El usuario sigue interactuando con la aplicación web a través de la voz o el tacto hasta que finaliza la conversación.

Una acción que usa Interactive Canvas tiene varios componentes:

  • Acción de conversación: Es una acción que utiliza una interfaz conversacional para completar solicitudes del usuario. Las acciones de Interactive Canvas usan vistas web para renderizar respuestas en lugar de tarjetas enriquecidas o respuestas simples de texto y voz. Las Acciones conversacionales usan los siguientes componentes:
    • Agente de Dialogflow: Es un proyecto en Dialogflow que personalizas para conversar con los usuarios de tu Acción.
    • Entrega: Es el código que se implementa como un webhook que implementa la lógica conversacional de tu agente de Dialogflow y se comunica con tu app web.
  • App web: Es una app web de frontend con elementos visuales personalizados que tu Acción envía como respuesta a los usuarios durante una conversación. Compilas la app web con estándares web como HTML, JavaScript y CSS.

La acción de conversación y la aplicación web se comunican entre sí de la siguiente manera:

  • API de Interactive Canvas: Es una API de JavaScript que se incluye en la app web para habilitar la comunicación entre la app web y tu acción de conversación.
  • HtmlResponse: Es una respuesta que contiene una URL de la app web y datos para pasarla. Puedes usar las bibliotecas cliente de Node.js o Java para devolver un HtmlResponse.

Para ilustrar cómo funciona Interactive Canvas, imagina una Acción hipotética llamada Colores geniales que cambia el color de la pantalla del dispositivo a un color que especifica el usuario. Después de que el usuario invoca la acción, el flujo se ve de la siguiente manera:

  1. El usuario dice Turn the screen blue al dispositivo del Asistente.
  2. La plataforma de Actions on Google enruta la solicitud del usuario a Dialogflow para que coincida con un intent.
  3. Se ejecuta la entrega del intent coincidente y se envía un HtmlResponse al dispositivo. El dispositivo usa la URL para cargar la app web si aún no se cargó.
  4. Cuando se carga la app web, registra devoluciones de llamada con la API de interactiveCanvas. Luego, el valor del objeto data se pasa a la devolución de llamada onUpdate registrada de la app web. En nuestro ejemplo, el cumplimiento envía un HtmlResponse con un data que incluye una variable con el valor de blue.
  5. La lógica personalizada de tu app web lee el valor data de HtmlResponse y realiza los cambios definidos. En nuestro ejemplo, esto hace que la pantalla se vuelva azul.
  6. interactiveCanvas envía la actualización de la devolución de llamada al dispositivo.

Próximos pasos

Para obtener información sobre cómo crear una acción de Interactive Canvas, consulta la página Descripción general de la compilación.

Para ver el código de una Acción de Interactive Canvas completa, consulta el ejemplo.