Esta integración proporciona un diálogo de chat personalizable para tu agente que se puede insertar en un sitio web.
Configuración
Esta integración puede permitir el acceso a la consulta del agente del usuario final autenticado o no autenticado.
Configuración no autenticada
Para configurar el acceso no autenticado a tu agente de Dialogflow CX Messenger, haz lo siguiente:
- Ve 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 Connect 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 incorporable. Independientemente de si deseas que esté autenticado o no autenticado, haz clic en el botón Disable... en la parte inferior del diálogo para que puedas volver a configurar los parámetros en el siguiente paso.
- Selecciona un entorno.
- Selecciona Unauthenticated API.
- Selecciona un estilo.
- De manera opcional, restringe el acceso al dominio.
- Haz clic en Enable the unauthenticated API.
- En el diálogo, se mostrará el código HTML incorporable que se puede insertar 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 CX Messenger, haz lo siguiente:
- Ve 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 Connect 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 incorporable. Independientemente de si deseas que esté autenticado o no autenticado, haz clic en el botón Disable... en la parte inferior del diálogo para que puedas volver a configurar los parámetros en el siguiente paso.
- Selecciona un entorno.
- Selecciona Authorized API.
- Selecciona un estilo.
- De manera opcional, restringe el acceso al dominio.
- Haz clic en Enable the authorized API.
- En el diálogo, se mostrará el código HTML incorporable que se puede insertar en tu sitio web. Copia este código.
- Haz clic en Listo.
- Configura el cliente de OAuth:
- Crea una pantalla de consentimiento de OAuth
para tu organización.
Agrega
https://www.googleapis.com/auth/cloud-platformcomo un alcance obligatorio. - Crea un ID de cliente de OAuth 2.0.
En Orígenes autorizados de JavaScript,
especifica los orígenes HTTP que pueden alojar y consultar tu agente.
Por ejemplo,
https://your-company.com. - Otorga a los usuarios finales permiso para consultar tu agente. Agrega cada uno de tus usuarios finales o un grupo como entidad con las funciones Cliente de la API de Dialogflow y Consumidor de Service Usage.
- Crea 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,
establece el oauth-client-id atributo para <df-messenger>
en tu ID de cliente de Oauth. Además, si deseas usar las identidades de los usuarios finales para la autenticación
de herramientas,
establece el atributo access-token-name con el nombre que desees.
Luego, usa el token de 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 con capacidad de respuesta,
agrega lo siguiente a tu <head> elemento:
<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 la apariencia 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 la personalización de HTML, la personalización de CSS y el control 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>
Entrega
Existen muchos tipos de respuestas de entrega que puedes usar para las respuestas del agente.
Comentarios sobre las respuestas
Si los comentarios sobre las respuestas están habilitados, de forma predeterminada, el diálogo de chat agregará botones de Me gusta y No me gusta 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, puede proporcionar un motivo para los comentarios negativos.
Componente de comentarios personalizados
Para especificar un elemento de comentarios personalizados, se debe 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:
- Inserta el elemento de Dialogflow CX Messenger en una página como se describió antes.
- Inicia un servidor HTTP local para esa página con un puerto específico.
- Accede a esa página en
http://localhost:port_number.