Interacciones con una integración

Una integración controla las interacciones del usuario final por ti. Solo necesitas compilar un agente, implementar un webhook de forma opcional y configurar la integración.

En esta guía, se muestra cómo usar la integración de Dialogflow CX Messenger para proporcionar una interfaz de usuario de chat de texto simple para tu agente.

Antes de comenzar

Si no planeas usar una integración, puedes omitir esta guía de inicio rápido.

Debes hacer lo siguiente antes de leer esta guía:

1. Lee los conceptos básicos de los flujos.
2. Realiza los pasos de configuración.
3. Realiza los pasos de la guía de inicio rápido Crea un agente con flujos. Los siguientes pasos continúan el trabajo en el mismo agente. Si ya no tienes ese agente, puedes descargarlo y restablecerlo.

Configuración

Nota: En los pasos que se indican a continuación, se crea una integración que permite el acceso a las consultas de agentes no autenticados. Consulta la documentación de Dialogflow CX Messenger para obtener instrucciones sobre cómo crear una integración autenticada.

Nota: Asegúrate de habilitar la facturación en el proyecto antes de probar la integración.

Para configurar el acceso no autenticado a tu agente de Dialogflow CX Messenger, sigue estos pasos:

1. Ve a la consola de Dialogflow CX.
2. Elige tu proyecto de Google Cloud.
3. Selecciona el agente.
4. Selecciona la pestaña Administrar.
5. Haz clic en Integrations, en el menú de la barra lateral izquierda.
6. Haz clic en Conectar en Dialogflow CX Messenger.
7. Se abrirá un cuadro de diálogo de configuración.
8. Si la integración se configuró previamente para este agente, verás el código HTML incorporable. Independientemente de si deseas que se autentique o no, haz clic en el botón Inhabilitar… en la parte inferior del diálogo para que puedas volver a establecer la configuración en el siguiente paso.
9. Selecciona un entorno.
10. Selecciona API no autenticada.
11. Selecciona un estilo.
12. Opcionalmente, restringe el acceso al dominio.
13. Haz clic en Habilitar la API no autenticada.
14. En el cuadro de diálogo, se mostrará el código HTML que puedes incorporar en tu sitio web. Copia este código.
15. Haz clic en Listo.

Incorporar

Pega el código de inserción que copiaste antes en una página web de tu sitio web. Los elementos HTML <script> y <df-messenger> deben estar en el elemento <body> de la página.

Si usas una integración autenticada, establece el atributo oauth-client-id de <df-messenger> en tu ID de cliente de OAuth. Y si quieres usar las identidades de los usuarios finales para la autenticación de herramientas, establece el atributo access-token-name con el nombre que quieras. Luego, usa el token del portador con el valor $session.params.ACCESS_TOKEN_NAME para la autenticación de la herramienta.

Actualiza cualquier otro atributo que lo requiera.

Para permitir diseños responsivos, agrega también lo siguiente a tu elemento <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Una vez incorporado, puedes interactuar con tu agente a través de la página web haciendo clic en el ícono de chat en la esquina inferior derecha.

Personalizar

Puedes personalizar la apariencia y el comportamiento de esta interfaz de usuario de muchas maneras. Consulta la documentación de Dialogflow CX Messenger para obtener más información.