Dialogflow CX Messenger

Diese Integration bietet ein anpassbares Chat-Dialogfeld für Ihren Agenten, das Sie in Ihre Website einbetten können.

Dialogflow CX Messenger-Oberfläche

Einrichtung

Mit dieser Integration können Sie entweder authentifizierten oder nicht authentifizierten Endnutzer-Agent-Abfragezugriff bereitstellen.

Nicht authentifizierte Einrichtung

So richten Sie den nicht authentifizierten Zugriff auf Ihren Dialogflow CX Messenger-Agenten ein:

  1. Rufen Sie die Dialogflow CX-Konsole auf.
  2. Wählen Sie Ihr Google Cloud-Projekt aus.
  3. Wählen Sie den Agent aus.
  4. Wählen Sie den Tab Verwalten.
  5. Klicken Sie im linken Seitenleistenmenü auf Integrations.
  6. Klicken Sie unter Dialogflow CX Messenger auf Verbinden.
  7. Ein Konfigurationsdialogfeld wird geöffnet.
  8. Wenn die Integration zuvor für diesen Agenten eingerichtet wurde, wird einbettbarer HTML-Code angezeigt. Unabhängig davon, ob Sie authentifizierte oder nicht authentifizierte Aufrufe zulassen möchten, klicken Sie unten im Dialogfeld auf den Button Deaktivieren…, damit Sie die Einstellungen im nächsten Schritt neu konfigurieren können.
  9. Wählen Sie eine Umgebung aus
  10. Wählen Sie Nicht authentifizierte API aus.
  11. Wählen Sie einen Stil aus.
  12. Optional können Sie den Domainzugriff einschränken.
  13. Klicken Sie auf Nicht authentifizierte API aktivieren.
  14. Im Dialogfeld wird der einbettbare HTML-Code angezeigt, den Sie auf Ihrer Website einbetten können. Kopieren Sie diesen Code.
  15. Klicken Sie auf Fertig.

Authentifizierte Einrichtung

So richten Sie den authentifizierten Zugriff auf Ihren Dialogflow CX Messenger-Agent ein:

  1. Rufen Sie die Dialogflow CX-Konsole auf.
  2. Wählen Sie Ihr Google Cloud-Projekt aus.
  3. Wählen Sie den Agent aus.
  4. Wählen Sie den Tab Verwalten.
  5. Klicken Sie im linken Seitenleistenmenü auf Integrations.
  6. Klicken Sie unter Dialogflow CX Messenger auf Verbinden.
  7. Ein Konfigurationsdialogfeld wird geöffnet.
  8. Wenn die Integration zuvor für diesen Agenten eingerichtet wurde, wird einbettbarer HTML-Code angezeigt. Unabhängig davon, ob Sie authentifizierte oder nicht authentifizierte Aufrufe zulassen möchten, klicken Sie unten im Dialogfeld auf den Button Deaktivieren…, damit Sie die Einstellungen im nächsten Schritt neu konfigurieren können.
  9. Wählen Sie eine Umgebung aus
  10. Wählen Sie Autorisierte API aus.
  11. Wählen Sie einen Stil aus.
  12. Optional können Sie den Domainzugriff einschränken.
  13. Klicken Sie auf Autorisierte API aktivieren.
  14. Im Dialogfeld wird der einbettbare HTML-Code angezeigt, den Sie auf Ihrer Website einbetten können. Kopieren Sie diesen Code.
  15. Klicken Sie auf Fertig.
  16. Richten Sie den OAuth-Client ein:
    1. Erstellen Sie einen OAuth-Zustimmungsbildschirm für Ihre Organisation. Fügen Sie https://www.googleapis.com/auth/cloud-platform als erforderlichen Bereich hinzu.
    2. OAuth 2.0-Client-ID erstellen Geben Sie unter Autorisierte JavaScript-Quellen die HTTP-Quellen an, die Ihren Agenten hosten und abfragen dürfen. Beispiel: https://your-company.com
    3. Endnutzern die Berechtigung zum Abfragen Ihres KI-Agenten erteilen Fügen Sie jeden Ihrer Endnutzer oder eine Gruppe als Hauptkonto mit den Rollen Dialogflow API Client und Service Usage Consumer hinzu.

Einbetten

Fügen Sie den oben kopierten Einbettungscode in eine Webseite auf Ihrer Website ein. Die HTML-Elemente <script> und <df-messenger> sollten sich im <body>-Element Ihrer Seite befinden.

Wenn Sie eine authentifizierte Integration verwenden, legen Sie das Attribut oauth-client-id für <df-messenger> auf Ihre OAuth-Client-ID fest. Wenn Sie die Identitäten von Endnutzern für die Tool-Authentifizierung verwenden möchten, legen Sie das Attribut access-token-name mit einem beliebigen Namen fest. Verwenden Sie dann das Inhabertoken mit dem Wert $session.params.ACCESS_TOKEN_NAME für die Toolauthentifizierung.

Aktualisieren Sie alle anderen Attribute, die aktualisiert werden müssen.

Fügen Sie dem <head>-Element außerdem Folgendes hinzu, um responsive Layouts zu ermöglichen:

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

Anpassung

Sie können viele HTML-Anpassungen und CSS-Anpassungen vornehmen, um das Erscheinungsbild und Verhalten des Chat-Dialogfelds zu beeinflussen.

JavaScript

Es gibt viele JavaScript-Ereignisse und JavaScript-Funktionen, mit denen Sie mit dem Chatdialog interagieren können.

Beispiel

Das folgende Beispiel zeigt die HTML-Anpassung, die CSS-Anpassung und die JavaScript-Ereignisbehandlung:

<!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>

Auftragsausführung

Sie können viele Antworttypen für die Auftragsausführung für Agent-Antworten verwenden.

Feedback zur Antwort

Wenn Feedback zu Antworten aktiviert ist, werden im Chatdialog standardmäßig die Buttons „Gute Antwort“  und „Schlechte Antwort“  zur Benutzeroberfläche hinzugefügt. Während der Unterhaltung können Sie auf diese Schaltflächen klicken, um Feedback zu den Antworten des KI-Agenten zu geben. Wenn Sie auf „Mag ich nicht“ klicken, können Sie optional einen Grund für das negative Feedback angeben.

Benutzerdefinierte Feedback-Komponente

Wenn Sie ein benutzerdefiniertes Feedback-Element angeben möchten, müssen Sie auf der Website ein neues benutzerdefiniertes Element definieren. Damit das Feedback gesendet werden kann, muss das Element ein df-custom-submit-feedback-clicked-Ereignis ausgeben. Das enthaltene Feld detail muss ein String sein.

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);
})();

Debugging

So testen Sie Ihren Agenten lokal mit Dialogflow CX Messenger:

  • Betten Sie das Dialogflow CX Messenger-Element wie oben beschrieben in eine Seite ein.
  • Starten Sie einen lokalen HTTP-Server für diese Seite mit einem bestimmten Port.
  • Öffnen Sie diese Seite unter http://localhost:port_number.