Esta integración ofrece un cuadro de diálogo de chat personalizable para tu agente que puedes insertar en tu sitio web.
Configuración
Esta integración puede permitir el acceso a consultas de agentes de usuarios finales autenticados o no autenticados.
Configuración no autenticada
Para configurar el acceso no autenticado a tu agente de Messenger de Dialogflow CX, sigue estos pasos:
- Ve a la consola de Dialogflow CX.
- Elige tu proyecto de Google Cloud.
- Selecciona tu agente.
- Selecciona la pestaña Gestionar.
- En el menú de la barra lateral de la izquierda, haz clic en Integraciones.
- Haz clic en Conectar en Dialogflow CX Messenger.
- Se abrirá un cuadro de diálogo de configuración.
- Si la integración ya se ha configurado para este agente, verá el código HTML insertable. Independientemente de si quieres que se autentiquen o no, haz clic en el botón Inhabilitar... situado en la parte inferior del cuadro de diálogo para poder volver a configurar los ajustes en el siguiente paso.
- Seleccione un entorno.
- Selecciona API no autenticada.
- Selecciona un estilo.
- Restringe el acceso al dominio (opcional).
- Haz clic en Habilitar la API no autenticada.
- En el cuadro de diálogo se mostrará el código HTML insertable 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, sigue estos pasos:
- Ve a la consola de Dialogflow CX.
- Elige tu proyecto de Google Cloud.
- Selecciona tu agente.
- Selecciona la pestaña Gestionar.
- En el menú de la barra lateral de la izquierda, haz clic en Integraciones.
- Haz clic en Conectar en Dialogflow CX Messenger.
- Se abrirá un cuadro de diálogo de configuración.
- Si la integración ya se ha configurado para este agente, verá el código HTML insertable. Independientemente de si quieres que se autentiquen o no, haz clic en el botón Inhabilitar... situado en la parte inferior del cuadro de diálogo para poder volver a configurar los ajustes en el siguiente paso.
- Seleccione un entorno.
- Selecciona API autorizada.
- Selecciona un estilo.
- Restringe el acceso al dominio (opcional).
- Haz clic en Habilitar la API autorizada.
- En el cuadro de diálogo se mostrará el código HTML insertable 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.
Añade
https://www.googleapis.com/auth/cloud-platformcomo ámbito obligatorio. - Crea un ID de cliente de OAuth 2.0.
En Orígenes de JavaScript autorizados, especifica los orígenes HTTP que pueden alojar y consultar tu agente.
Por ejemplo,
https://your-company.com. - Proporciona a los usuarios finales permiso para consultar tu agente. Añade a cada uno de tus usuarios finales o a un grupo como principal con los roles Cliente de la API Dialogflow y Consumidor de uso del servicio.
- Crea una pantalla de consentimiento de OAuth para tu organización.
Añade
Integrar
Pegue el código de inserción que ha copiado arriba en una página web de su sitio web.
Los elementos HTML <script> y <df-messenger> deben estar en el elemento <body> de tu página.
Si utiliza una integración autenticada, defina el atributo oauth-client-id de <df-messenger> con su ID de cliente de OAuth. Si quiere usar las identidades de los usuarios finales para la autenticación de herramientas,
defina el atributo access-token-name con el nombre que quiera.
A continuación, usa el token de portador con el valor $session.params.ACCESS_TOKEN_NAME
para la autenticación de la herramienta.
Actualice los demás atributos que lo requieran.
Para permitir diseños adaptables, añade lo siguiente al elemento <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Personalización
Hay muchas personalizaciones de HTML y personalizaciones de CSS que puedes aplicar para modificar el aspecto y el comportamiento del cuadro de diálogo de chat.
JavaScript
Hay muchos eventos de JavaScript y funciones de JavaScript que puedes usar para interactuar con el cuadro de diálogo del chat.
Ejemplo
En el siguiente ejemplo se muestra la personalización de HTML y CSS, así como la gestión 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
Hay muchos tipos de respuestas de cumplimiento que puedes usar para las respuestas del agente.
Comentarios sobre Respuestas
Si la opción de comentarios sobre las respuestas está habilitada, el cuadro de diálogo del chat añadirá de forma predeterminada los botones Me gusta y No me gusta a la interfaz de usuario. Durante la conversación, el usuario final puede hacer clic en estos botones para enviar comentarios sobre las respuestas del agente. Si el usuario selecciona No me gusta, puede indicar el motivo de su opinión negativa.
Componente de comentarios personalizado
Para especificar un elemento de comentarios personalizado, 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 incluido 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, sigue estos pasos:
- Inserta el elemento Messenger de Dialogflow CX en una página tal como se ha descrito 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.