Algunos productos y funciones están en proceso de cambiar de nombre. Las funciones de flujo y de la guía generativa también se migrarán a una sola consola consolidada. Consulta los detalles.
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
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.
Realiza los pasos de la guía de inicio rápido para compilar un agente con flujos.
Los siguientes pasos continúan el trabajo en el mismo agente.
Si ya no tienes ese agente, puedes descargarlo y restaurarlo.
Configuración
Para configurar el acceso no autenticado a tu agente de Dialogflow CX Messenger, sigue estos pasos:
Haz clic en Integrations, en el menú de la barra lateral izquierda.
Haz clic en Conectar en Dialogflow CX Messenger.
Se abrirá un cuadro de diálogo de configuración.
Si la integración se configuró anteriormente para este agente, verás el código HTML incorporado.
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 no autenticada.
Selecciona un estilo.
Opcionalmente, restringe el acceso al dominio.
Haz clic en Habilitar la API no autenticada.
En el cuadro de diálogo, se mostrará el código HTML que se puede 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> en tu ID de cliente de OAuth. Y si deseas usar las identidades de los usuarios finales para la autenticación de herramientas, configura 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 herramientas.
Actualiza cualquier otro atributo que requiera actualización.
Para generar diseños responsivos, agrega lo siguiente a tu elemento <head>:
Una vez incorporado, puedes interactuar con tu agente a través de la página web haciendo clic en el ícono de chat que se encuentra 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.
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Difícil de entender","hardToUnderstand","thumb-down"],["Información o código de muestra incorrectos","incorrectInformationOrSampleCode","thumb-down"],["Faltan la información o los ejemplos que necesito","missingTheInformationSamplesINeed","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-08-18 (UTC)"],[[["\u003cp\u003eThis guide details how to use the Dialogflow CX Messenger integration to create a text-based chat interface for your agent.\u003c/p\u003e\n"],["\u003cp\u003eSetting up the integration requires you to have already completed agent setup, flow basics, and general setup steps, and it also requires billing to be enabled.\u003c/p\u003e\n"],["\u003cp\u003eThe process involves navigating the Dialogflow CX console, selecting your agent, and configuring the Dialogflow CX Messenger integration for unauthenticated access.\u003c/p\u003e\n"],["\u003cp\u003eYou can embed the chat interface by pasting the provided HTML code into the \u003ccode\u003e<body>\u003c/code\u003e of your website, and modify some settings according to your preferences.\u003c/p\u003e\n"],["\u003cp\u003eOnce embedded, users can interact with the agent via a chat icon that will appear in the lower right corner of the page.\u003c/p\u003e\n"]]],[],null,["# Interactions with an integration\n\nWith an\n[integration](/dialogflow/cx/docs/concept/integration),\nend-user interactions are handled for you.\nYou just need to build an agent, optionally implement a webhook,\nand configure the integration.\n\nThis guide shows you how to use the\n[Dialogflow CX Messenger](/dialogflow/cx/docs/concept/integration/dialogflow-messenger)\nintegration to provide a simple text chat user interface\nfor your agent.\n\nBefore you begin\n----------------\n\nIf you don't plan on using an integration, you can skip this quickstart.\n\nYou should do the following before reading this guide:\n\n1. Read [flow basics](/dialogflow/cx/docs/basics).\n2. Perform [setup steps](/dialogflow/cx/docs/quick/setup).\n3. Perform steps in the [Build an agent using flows](/dialogflow/cx/docs/quick/build-agent) quickstart guide. Steps below continue working on the same agent. If you no longer have that agent, you can [download the agent](/static/dialogflow/cx/docs/data/agent-shirts-1-flow.zip) and [restore it](/dialogflow/cx/docs/concept/agent#export).\n\nSetup\n-----\n\n| **Note:** The steps below create an integration that allows unauthenticated agent query access. See the [Dialogflow CX Messenger documentation](/dialogflow/cx/docs/concept/integration/dialogflow-messenger) for instructions to create an authenticated integration.\n\n\n| **Note:** Make sure [billing is enabled](/dialogflow/cx/docs/quick/setup#billing) on your project before testing the integration.\n\nTo set up unauthenticated access to your Dialogflow CX Messenger agent:\n\n1. Go to the [Dialogflow CX console](https://dialogflow.cloud.google.com/cx/projects).\n2. Choose your Google Cloud project.\n3. Select your agent.\n4. Select the **Manage** tab.\n5. Click **Integrations** in the left sidebar menu.\n6. Click **Connect** on **Dialogflow CX Messenger**.\n7. A configuration dialog opens.\n8. If the integration was previously setup for this agent, you will see embeddable HTML code. Regardless of whether you want what authenticated or unauthenticated, click the **Disable...** button at the bottom of the dialog, so you can reconfigure the settings in the next step.\n9. Select an **Environment**.\n10. Select **Unauthenticated API**.\n11. Select a style.\n12. Optionally restrict domain access.\n13. Click **Enable the unauthenticated API**.\n14. The dialog will show the embeddable HTML code that can be embedded on your website. Copy this code.\n15. Click **Done**.\n\n\u003cbr /\u003e\n\nEmbed\n-----\n\n\nPaste the embed code you copied above in a webpage on your website.\nThe `\u003cscript\u003e` and `\u003cdf-messenger\u003e` HTML elements\nshould be in the `\u003cbody\u003e` element of your page.\n\nIf you are using an authenticated integration,\nset the `oauth-client-id` attribute for `\u003cdf-messenger\u003e`\nto your Oauth client id. And if you want to use end-users' identities for [tool\nauthentication](/dialogflow/cx/docs/concept/playbook/tool#openapi_tool_api_authentication),\nset the `access-token-name` attribute with any name you like.\nThen use Bearer Token with value `$session.params.`\u003cvar class=\"edit\" label=\"the access token name you set\" translate=\"no\"\u003eACCESS_TOKEN_NAME\u003c/var\u003e\nfor tool authentication.\n\nUpdate any other attributes that require updating.\n\nTo allow for responsive layouts,\nalso add the following to your `\u003chead\u003e` element: \n\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n\n\u003cbr /\u003e\n\nOnce embedded,\nyou can interact with your agent through the webpage\nby clicking the chat icon in the lower right corner.\n\nCustomize\n---------\n\nYou can customize the appearance and behavior of this user interface\nin many ways.\nSee the\n[Dialogflow CX Messenger documentation](/dialogflow/cx/docs/concept/integration/dialogflow-messenger)\nfor more information."]]
