Diese Integration bietet einen anpassbaren Chatdialog für Ihren Kundenservicemitarbeiter, der in Ihre Website eingebettet werden kann.
Einrichtung
Diese Integration kann entweder authentifiziert oder nicht authentifiziert sein Zugriff auf Abfragen von Endnutzer-Agents.
Unbestätigte Einrichtung
So richten Sie den nicht authentifizierten Zugriff 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 unter Dialogflow CX Messenger auf Connect (Verbinden).
- Ein Konfigurationsdialogfeld wird geöffnet.
- Wenn die Integration für diesen Kundenservicemitarbeiter bereits eingerichtet wurde, wird ein einbetzbarer HTML-Code angezeigt. Unabhängig davon, ob Sie möchten, was authentifiziert oder nicht authentifiziert ist, Klicken Sie unten im Dialogfeld auf die Schaltfläche Deaktivieren.... sodass 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 einen Stil aus.
- Optionalen Domainzugriff einschränken.
- Klicken Sie auf Nicht authentifizierte API aktivieren.
- Im Dialogfeld wird der HTML-Code angezeigt, der in Ihre Website eingebettet werden kann. Kopieren Sie diesen Code.
- Klicken Sie auf Fertig.
Authentifizierte Einrichtung
So richten Sie den authentifizierten Zugriff auf Ihren Dialogflow CX Messenger-Agent ein:
- Rufen Sie die Dialogflow CX-Konsole 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 unter Dialogflow CX Messenger auf Connect (Verbinden).
- Ein Konfigurationsdialogfeld wird geöffnet.
- Wenn die Integration für diesen Kundenservicemitarbeiter bereits eingerichtet wurde, wird ein einbetzbarer HTML-Code angezeigt. Unabhängig davon, ob Sie möchten, was authentifiziert oder nicht authentifiziert ist, Klicken Sie unten im Dialogfeld auf die Schaltfläche Deaktivieren.... sodass Sie die Einstellungen im nächsten Schritt neu konfigurieren können.
- Wählen Sie eine Umgebung aus
- Wählen Sie Authorized API (Autorisierte API) aus.
- Wählen Sie einen Stil aus.
- Optionalen Domainzugriff einschränken.
- Klicken Sie auf Autorisierte API aktivieren.
- Im Dialogfeld wird der einbettbare HTML-Code angezeigt. die auf Ihrer Website eingebettet werden können. 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
./auth/cloud-platformals erforderlichen Bereich hinzu. - OAuth 2.0-Client-ID erstellen
Gehen Sie unter Autorisierte JavaScript-Quellen wie folgt vor:
Geben Sie die HTTP-Quellen an, die Ihren Agent hosten und abfragen dürfen.
Beispiel:
https://your-company.com - Geben Sie Endnutzern die Berechtigung, Ihren Bot zu fragen. Fügen Sie die einzelnen Endnutzer oder einen gruppe als Hauptkonto mit dem Dialogflow API-Client und Service Usage Consumer Rollen.
- 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 du eine authentifizierte Integration verwendest, setze das Attribut oauth-client-id für <df-messenger> auf deine OAuth-Client-ID.
Aktualisieren Sie alle anderen Attribute, die aktualisiert werden müssen.
Um responsive Layouts zu ermöglichen,
Fügen Sie Ihrem <head>-Element außerdem Folgendes hinzu:
<meta name="viewport" content="width=device-width, initial-scale=1">
Anpassung
Es gibt viele HTML-Anpassungen und CSS-Anpassungen, mit denen Sie das Erscheinungsbild und das Verhalten des Chatdialogs beeinflussen können.
JavaScript
Es gibt viele JavaScript-Ereignisse und JavaScript-Funktionen über die Sie mit dem Chat-Dialogfeld 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
Es gibt viele Arten von Antwortvorlagen für die Auftragsausführung, die Sie für die Antworten von Kundenservicemitarbeitern verwenden können.
Feedback beantworten
Wenn Feedback zu Antworten aktiviert ist, werden dem Chatdialog standardmäßig die Schaltflächen „Mag ich“ und „Mag ich nicht“ hinzugefügt. Während des Gesprächs können Endnutzer auf diese Schaltflächen klicken, um Feedback zu den Antworten des Kundenservicemitarbeiters zu geben. Wenn der Nutzer „Mag ich nicht“ auswählt, 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 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.