Una integración controla las interacciones del usuario final por ti. Solo tienes que compilar un agente y, de manera opcional, implementar un webhook y configurar la integración.
En esta guía, se muestra cómo usar la Dialogflow CX Messenger para brindar una interfaz de usuario de chat de texto sencilla 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:
- Lee los conceptos básicos de Dialogflow CX.
- Realiza los pasos de configuración.
- Realiza los pasos de la guía de inicio rápido Compila un agente. Los siguientes pasos continúan el trabajo en el mismo agente. Si ya no tienes ese agente, puedes descargar el agente y restablecerlo.
Configuración
Para configurar el acceso no autenticado a tu agente de Dialogflow Messenger, sigue estos pasos:
- Ir a la consola de Dialogflow CX
- Elige tu proyecto de Google Cloud.
- Selecciona el agente.
- Selecciona la pestaña Administrar.
- Haz clic en Integrations, en el menú de la barra lateral izquierda.
- Haz clic en Conectar en Dialogflow Messenger.
- Se abrirá un cuadro de diálogo de configuración.
- Si la integración se configuró anteriormente para este agente, verás un código HTML que se puede incorporar. Independientemente de si quieres que la autenticación sea o no, haz clic en el botón Disable… en la parte inferior del diálogo para volver a configurar la configuración en el siguiente paso.
- Selecciona un entorno.
- Selecciona API sin autenticar.
- Selecciona un estilo.
- De manera opcional, puedes restringir el acceso al dominio.
- Haz clic en Habilitar la API sin autenticar.
- El cuadro de diálogo mostrará el código HTML que se puede incorporar. que se pueden incorporar en tu sitio web. Copia este código.
- 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,
configura el atributo oauth-client-id para <df-messenger>
con tu ID de cliente de OAuth.
Actualiza cualquier otro atributo que deba actualizarse.
Para generar diseños responsivos, agrega lo siguiente a tu elemento <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Una vez incorporadas, puedes interactuar con tu agente a través de la página web haciendo clic en el ícono de chat de 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.