Diese Integration bietet ein anpassbares Chat-Dialogfeld für Ihren Agent das in Ihre Website eingebettet werden kann.
Einrichtung
Diese Integration kann entweder authentifizierten oder nicht authentifizierten Endnutzern Zugriff auf Agent-Abfragen ermöglichen.
Einrichtung ohne Authentifizierung
So richten Sie den Zugriff ohne Authentifizierung auf Ihren Dialogflow CX Messenger-Agent ein:
- Rufen Sie die Dialogflow CX Console auf.
- Wählen Sie Ihr Google Cloud-Projekt aus.
- Wählen Sie den Agent aus.
- Wählen Sie den Tab Verwalten.
- Klicken Sie im linken Seitenleistenmenü auf Integrations.
- Klicken Sie bei Dialogflow CX Messenger auf Verbinden.
- Ein Konfigurationsdialogfeld wird geöffnet.
- Wenn die Integration bereits für diesen Agent eingerichtet wurde, wird ein einbettbarer HTML-Code angezeigt. Unabhängig davon, ob Sie eine authentifizierte oder nicht authentifizierte Integration verwenden möchten, klicken Sie unten im Dialogfeld auf die Schaltfläche Deaktivieren... , damit Sie die Einstellungen im nächsten Schritt neu konfigurieren können.
- Wählen Sie eine Umgebung aus.
- Wählen Sie Nicht authentifizierte API aus.
- Wählen Sie ein Design aus.
- Optional können Sie den Zugriff auf Domains einschränken.
- Klicken Sie auf Nicht authentifizierte API aktivieren.
- Im Dialogfeld wird der einbettbare HTML-Code angezeigt, der in Ihre Website eingebettet werden kann. Kopieren Sie diesen Code.
- Klicken Sie auf Fertig.
Einrichtung mit Authentifizierung
So richten Sie den Zugriff mit Authentifizierung auf Ihren Dialogflow CX Messenger-Agent ein:
- Rufen Sie die Dialogflow CX Console auf.
- Wählen Sie Ihr Google Cloud-Projekt aus.
- Wählen Sie den Agent aus.
- Wählen Sie den Tab Verwalten.
- Klicken Sie im linken Seitenleistenmenü auf Integrations.
- Klicken Sie bei Dialogflow CX Messenger auf Verbinden.
- Ein Konfigurationsdialogfeld wird geöffnet.
- Wenn die Integration bereits für diesen Agent eingerichtet wurde, wird ein einbettbarer HTML-Code angezeigt. Unabhängig davon, ob Sie eine authentifizierte oder nicht authentifizierte Integration verwenden möchten, klicken Sie unten im Dialogfeld auf die Schaltfläche Deaktivieren... , damit Sie die Einstellungen im nächsten Schritt neu konfigurieren können.
- Wählen Sie eine Umgebung aus.
- Wählen Sie Autorisierte API aus.
- Wählen Sie ein Design aus.
- Optional können Sie den Zugriff auf Domains einschränken.
- Klicken Sie auf Autorisierte API aktivieren.
- Im Dialogfeld wird der einbettbare HTML-Code angezeigt, der in Ihre Website eingebettet werden kann. Kopieren Sie diesen Code.
- Klicken Sie auf Fertig.
- Richten Sie den OAuth-Client ein:
- Erstellen Sie einen OAuth-Zustimmungsbildschirm
für Ihre Organisation.
Fügen Sie
https://www.googleapis.com/auth/cloud-platformals erforderlichen Bereich hinzu. - Erstellen Sie eine OAuth 2.0-Client-ID.
Geben Sie unter Autorisierte JavaScript-Quellen,
die HTTP-Quellen an, die Ihren Agent hosten und abfragen dürfen.
Beispiel:
https://your-company.com. - Geben Sie Endnutzern die Berechtigung, Ihren Agent abzufragen. Fügen Sie jeden Ihrer Endnutzer oder eine Gruppe als Prinzipal mit den Dialogflow API Client und Service Usage Consumer Rollen hinzu.
- Erstellen Sie einen OAuth-Zustimmungsbildschirm
für Ihre Organisation.
Fügen Sie
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 oauth-client-id Attribut 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 access-token-name Attribut mit einem beliebigen Namen fest.
Verwenden Sie dann das Bearer-Token mit dem Wert $session.params.ACCESS_TOKEN_NAME
für die Tool-Authentifizierung.
Aktualisieren Sie alle anderen Attribute, die aktualisiert werden müssen.
Um responsive Layouts zuzulassen,
fügen Sie Ihrem <head> Element auch Folgendes hinzu:
<meta name="viewport" content="width=device-width, initial-scale=1">
Anpassung
Es gibt viele HTML-Anpassungen und CSS-Anpassungen , die Sie anwenden können, um das Erscheinungsbild und das Verhalten des Chat-Dialogfelds zu beeinflussen.
JavaScript
Es gibt viele JavaScript-Ereignisse und JavaScript-Funktionen , mit denen Sie mit dem Chat-Dialogfeld interagieren können.
Beispiel
Das folgende Beispiel zeigt HTML-Anpassung, CSS-Anpassung und JavaScript-Ereignisverarbeitung:
<!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
Es gibt viele Antworttypen für die Auftragsausführung , die Sie für Agent-Antworten verwenden können.
Feedback zu Antworten
Wenn das Feedback zu Antworten aktiviert ist, werden dem Chat-Dialogfeld standardmäßig die Schaltflächen „Daumen hoch“ und „Daumen runter“ zur Benutzeroberfläche hinzugefügt. Während der Unterhaltung kann ein Endnutzer auf diese Schaltflächen klicken, um Feedback zu den Agent-Antworten zu geben. Wenn der Nutzer „Daumen runter“ auswählt, kann er optional einen Grund für das negative Feedback angeben.
Benutzerdefinierte Feedback-Komponente
Wenn Sie ein benutzerdefiniertes Feedback-Element angeben möchten, muss auf der Website ein neues benutzerdefiniertes Element definiert werden.
Um das Feedback zu senden, 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 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.
- Greifen Sie unter
http://localhost:port_numberauf diese Seite zu.