Dialogflow Messenger

Esta integración proporciona un diálogo de chat personalizable para tu agente que se puede incorporar en tu sitio web.

Captura de pantalla de Dialogflow Messenger

Configuración

Esta integración puede permitir el acceso a consultas de usuario final autenticada o no autenticada.

Configuración sin autenticar

Para configurar el acceso no autenticado a tu agente de Dialogflow Messenger, haz lo siguiente:

  1. Ir a la consola de Dialogflow CX
  2. Elige tu proyecto de Google Cloud.
  3. Selecciona el agente.
  4. Selecciona la pestaña Administrar.
  5. Haz clic en Integrations, en el menú de la barra lateral izquierda.
  6. Haz clic en Conectar en Dialogflow Messenger.
  7. Se abrirá un cuadro de diálogo de configuración.
  8. Si la integración se configuró anteriormente para este agente, verás código HTML integrable. Independientemente de si deseas autenticar o no autenticar, haz clic en el botón Inhabilitar... en la parte inferior del diálogo para que puedas volver a establecer la configuración en el siguiente paso.
  9. Selecciona un entorno.
  10. Selecciona API sin autenticar.
  11. Selecciona un estilo.
  12. De manera opcional, puedes restringir el acceso al dominio.
  13. Haz clic en Habilitar la API sin autenticar.
  14. El cuadro de diálogo mostrará el código HTML incorporable que se puede incorporar a tu sitio web. Copia este código.
  15. Haz clic en Listo.

Configuración autenticada

Para configurar el acceso autenticado a tu agente de Dialogflow Messenger, haz lo siguiente:

  1. Ir a la consola de Dialogflow CX
  2. Elige tu proyecto de Google Cloud.
  3. Selecciona el agente.
  4. Selecciona la pestaña Administrar.
  5. Haz clic en Integrations, en el menú de la barra lateral izquierda.
  6. Haz clic en Conectar en Dialogflow Messenger.
  7. Se abrirá un cuadro de diálogo de configuración.
  8. Si la integración se configuró anteriormente para este agente, verás código HTML integrable. Independientemente de si deseas autenticar o no autenticar, haz clic en el botón Inhabilitar... en la parte inferior del diálogo para que puedas volver a establecer la configuración en el siguiente paso.
  9. Selecciona un entorno.
  10. Selecciona Authorized API.
  11. Selecciona un estilo.
  12. De manera opcional, puedes restringir el acceso al dominio.
  13. Haz clic en Habilitar la API autorizada.
  14. El cuadro de diálogo mostrará el código HTML incorporable que se puede incorporar a tu sitio web. Copia este código.
  15. Haz clic en Listo.
  16. Configura el cliente de OAuth:
    1. Crea una pantalla de consentimiento de OAuth para tu organización. Agrega ./auth/cloud-platform como alcance obligatorio.
    2. 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.
    3. Otorga permiso a los usuarios finales para que hagan consultas al agente. Agrega a cada uno de tus usuarios finales o un grupo como principal con el rol Cliente de la API de Dialogflow.

Embed

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 de <df-messenger> en tu ID de cliente de OAuth.

Actualiza los demás atributos que deban actualizarse.

Para permitir diseños responsivos, agrega también lo siguiente a tu elemento <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Personalización

Hay muchas personalizaciones de HTML y CSS que puedes aplicar para modificar la apariencia y el comportamiento del diálogo de chat.

JavaScript

Hay 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

Hay muchos tipos de respuesta de entrega que puedes usar para las respuestas del agente.

Responder comentarios

Si los comentarios de respuesta están habilitados, el diálogo de chat agregará los botones Me gusta y No me gusta a la interfaz de usuario de forma predeterminada. 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, tiene la opción de proporcionar un motivo para los comentarios negativos.

Componente de comentarios personalizados

Para especificar un elemento de comentarios personalizados, 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 string.

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 Messenger de forma local, haz lo siguiente:

  • Inserta el elemento de Dialogflow 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.