Esta integración proporciona un diálogo de chat personalizable para tu agente. que se pueden incorporar en tu sitio web.
Configuración
Esta integración puede permitir el acceso de consulta del agente de usuario final autenticado o no.
Configuración sin autenticar
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 lo que quieres es autenticar Haz clic en el botón Inhabilitar... en la parte inferior del cuadro de diálogo. para que puedas volver a establecer la configuración en el siguiente paso.
- Selecciona un entorno.
- Selecciona API no autenticada.
- 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.
Configuración autenticada
Para configurar el acceso 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 lo que quieres es autenticar Haz clic en el botón Inhabilitar... en la parte inferior del cuadro de diálogo. para que puedas volver a establecer la configuración en el siguiente paso.
- Selecciona un entorno.
- Selecciona API autorizada.
- Selecciona un estilo.
- De manera opcional, puedes restringir el acceso al dominio.
- Haz clic en Habilitar la API autorizada.
- 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.
- Configura el cliente de OAuth:
- Cómo crear una pantalla de consentimiento de OAuth
para tu organización.
Agrega
./auth/cloud-platformcomo permiso obligatorio. - Crea un ID de cliente de OAuth 2.0.
En Orígenes autorizados de JavaScript, haz lo siguiente:
especificar los orígenes HTTP permitidos para alojar y consultar tu agente.
Por ejemplo,
https://your-company.com. - Otorga permiso a los usuarios finales para que consulten a tu agente. Agrega a cada uno de tus usuarios finales o un grupo como principal con los roles de Cliente de la API de Dialogflow y Consumidor de uso de servicios.
- Cómo crear una pantalla de consentimiento de OAuth
para tu organización.
Agrega
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 permitir diseños adaptables,
también agrega lo siguiente a tu elemento <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Personalización
Existen muchas personalizaciones de HTML y personalizaciones de CSS que puedes aplicar para afectar el aspecto y el comportamiento del diálogo de chat.
JavaScript
Existen muchos eventos de JavaScript y funciones de JavaScript que puedes usar para interactuar con el diálogo de chat.
Ejemplo
En el siguiente ejemplo, se muestra personalización de HTML, personalización de CSS, y el manejo de eventos de JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>My chat</title>
<style>
df-messenger {
/*
* Customize as required. df-messenger will fill the
* space that is provided.
*/
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 320px;
}
</style>
<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
</head>
<body>
<df-messenger
location="global" <!-- TODO: update agent location as needed -->
project-id="my-project-id" <!-- TODO: update project ID -->
agent-id="my-agent-id" <!-- TODO: update agent ID -->
language-code="en" <!-- TODO: update agent language as needed -->
>
<df-messenger-chat
chat-title="Agent Name" <!-- TODO: update dialog title as needed -->
></df-messenger-chat>
</df-messenger>
<script>
// An example of handling events: Navigate to the first suggested URL.
document.addEventListener('df-url-suggested', (event) => {
if (Array.isArray(event.detail.suggestedUrls) &&
event.detail.suggestedUrls.length) {
window.location.href = event.detail.suggestedUrls[0];
}
});
</script>
</body>
</html>
Fulfillment
Existen muchas tipos de respuesta de entrega que puedes usar para las respuestas del agente.
Responder comentarios
Si la opción para responder comentarios está habilitada, de forma predeterminada, el cuadro de diálogo de chat agregará Me gusta y no me gusta botones a la interfaz de usuario. Durante la conversación, un usuario final puede hacer clic en estos botones para proporcionar comentarios sobre las respuestas del agente. Si el usuario selecciona No me gusta, de forma opcional, puede proporcionar un motivo para el comentario negativo.
Componente de comentarios personalizado
Para especificar un elemento de comentario personalizado, debes definir un nuevo elemento personalizado en el sitio web.
Para enviar los comentarios, el elemento debe emitir un evento df-custom-submit-feedback-clicked. El campo detail contenido debe ser una cadena.
class CustomFeedbackElement extends HTMLElement {
constructor() {
super();
// It is not strictly required but recommended to contain the custom
// element in a shadow root.
this.renderRoot = this.attachShadow({mode: 'open'});
}
// Web component Lifecycle method.
connectedCallback() {
const wrapper = document.createElement('div');
// Build the component as required.
const button = document.createElement('button');
button.innerText = 'Submit';
button.addEventListener('click', () => {
this._onSubmitClick();
});
wrapper.appendChild(button);
this.renderRoot.appendChild(wrapper);
}
// Called when Submit button is clicked.
_onSubmitClick() {
const event = new CustomEvent("df-custom-submit-feedback-clicked", {
// `detail` may be any string,
// this will be sent to the backend to be stored.
detail: JSON.stringify({
"usefulness": 2,
"accuracy": 3,
}),
// Required to propagate up the DOM tree
// https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
bubbles: true,
// Required to propagate across ShadowDOM
// https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
composed: true,
});
this.dispatchEvent(event);
}
}
(function() {
// Registers the element. This name must be "df-external-custom-feedback".
customElements.define('df-external-custom-feedback', CustomFeedbackElement);
})();
Depuración
Para probar tu agente con Dialogflow CX Messenger de forma local, haz lo siguiente:
- Incorpora el elemento Dialogflow CX Messenger en una página como se describió anteriormente.
- Inicia un servidor HTTP local para esa página con un puerto específico.
- Accede a esa página en
http://localhost:port_number.