Dialogflow Messenger

Durch diese Integration wird ein anpassbares Chat-Dialogfeld für den Agent bereitgestellt, der in Ihre Website eingebettet werden kann.

Screenshot von Dialogflow Messenger

Einrichtung

Diese Integration kann entweder authentifizierten oder nicht authentifizierten Abfragezugriff des Endnutzer-Agents zulassen.

Nicht authentifizierte Einrichtung

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

  1. Zur Dialogflow CX Console
  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 in Dialogflow Messenger auf Connect (Verbinden).
  7. Ein Konfigurationsdialogfeld wird geöffnet.
  8. Wenn die Integration bereits für diesen Agent eingerichtet wurde, wird ein einbettbarer HTML-Code angezeigt. Klicken Sie am unteren Rand des Dialogfelds auf Deaktivieren..., um die Einstellungen im nächsten Schritt neu zu konfigurieren, unabhängig davon, ob Sie authentifiziert oder nicht authentifiziert werden sollen.
  9. Wählen Sie eine Umgebung aus
  10. Wählen Sie Nicht authentifizierte API aus.
  11. Wählen Sie einen Stil aus.
  12. Optional: Beschränken Sie den Domainzugriff.
  13. Klicken Sie auf Nicht authentifizierte API aktivieren.
  14. Im Dialogfeld wird der HTML-Code angezeigt, der eingebettet werden kann. Kopieren Sie diesen Code.
  15. Klicken Sie auf Fertig.

Authentifizierte Einrichtung

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

  1. Zur Dialogflow CX Console
  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 in Dialogflow Messenger auf Connect (Verbinden).
  7. Ein Konfigurationsdialogfeld wird geöffnet.
  8. Wenn die Integration bereits für diesen Agent eingerichtet wurde, wird ein einbettbarer HTML-Code angezeigt. Klicken Sie am unteren Rand des Dialogfelds auf Deaktivieren..., um die Einstellungen im nächsten Schritt neu zu konfigurieren, unabhängig davon, ob Sie authentifiziert oder nicht authentifiziert werden sollen.
  9. Wählen Sie eine Umgebung aus
  10. Wählen Sie Autorisierte API aus.
  11. Wählen Sie einen Stil aus.
  12. Optional: Beschränken Sie den Domainzugriff.
  13. Klicken Sie auf Autorisierte API aktivieren.
  14. Im Dialogfeld wird der HTML-Code angezeigt, der eingebettet werden kann. 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 ./auth/cloud-platform als erforderlichen Bereich hinzu.
    2. Erstellen Sie eine OAuth 2.0-Client-ID. Geben Sie unter Autorisierte JavaScript-Quellen die HTTP-Quellen an, die den Agent hosten und abfragen dürfen. Beispiel: https://your-company.com
    3. Erteilen Sie Endnutzern die Berechtigung zum Abfragen des Agents. Fügen Sie jeden Endnutzer oder eine Gruppe als Hauptkonto mit der Rolle Dialogflow API Client hinzu.

Embed

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.

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

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

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

Anpassung

Es gibt viele HTML-Anpassungen und CSS-Anpassungen, mit denen Sie die Darstellung und das Verhalten des Chatdialogfelds beeinflussen können.

JavaScript

Es gibt viele JavaScript-Ereignisse und JavaScript-Funktionen, die Sie zur Interaktion mit dem Chatdialogfeld verwenden können.

Beispiel

Das folgende Beispiel zeigt die HTML-Anpassung, CSS-Anpassung und die Verarbeitung von JavaScript-Ereignissen:

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

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

Feedback beantworten

Wenn Feedback geben aktiviert ist, fügt das Chatdialogfeld der Benutzeroberfläche standardmäßig die Schaltflächen „Mag ich“ und „Mag ich nicht“ hinzu. Während der Unterhaltung kann ein Endnutzer auf diese Schaltflächen klicken, um Feedback zu den Agent-Antworten zu geben. Wählt der Nutzer diese Option aus, kann er optional einen Grund für das negative Feedback angeben.

Benutzerdefinierte Feedbackkomponente

Wenn Sie ein benutzerdefiniertes Feedbackelement angeben möchten, muss auf der Website ein neues benutzerdefiniertes Element definiert werden. Zum Senden des Feedbacks 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 den Agent lokal mit Dialogflow Messenger:

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