Se usó la API de Cloud Translation para traducir esta página.

Dialogflow Messenger

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

Captura de pantalla de Dialogflow Messenger

Configuración

Esta integración permite la autenticación y el acceso a las consultas del usuario final.

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 sin autenticar.
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:
1. Cómo crear una pantalla de consentimiento de OAuth para tu organización. Agrega ./auth/cloud-platform como permiso obligatorio.
2. 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.
3. Otorga permiso a los usuarios finales para que consulten a tu agente. Agrega a todos tus usuarios finales grupo como principal con el cliente de la API de Dialogflow y consumidor de Service Usage roles de seguridad.

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 modificar la apariencia y el comportamiento del diálogo de chat.

JavaScript

Existen muchas 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 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.