Das Web-Widget ist ein webbasierter Client, den Sie in Ihren Web- und mobilen Anwendungen verwenden können, damit Ihre Nutzer per Chat oder Sprache mit Ihrer Agent-Anwendung interagieren können. In diesem Leitfaden finden Sie eine Übersicht und eine Einrichtungsanleitung.
Wenn das Widget geöffnet wird, kann es rechts unten als unverankertes Dialogfenster, als Bereich neben dem Hauptinhalt oder im erweiterten Dialogmodus für eine fokussierte Unterhaltung angezeigt werden.
Beschränkungen
Derzeit werden Antworten mit Rich Content nur auf Englisch unterstützt.
Web-Widget einrichten
So betten Sie das Widget auf Ihrer Website ein:
- Klicken Sie oben im Agent Builder auf Bereitstellen.
- Klicke auf Kanal erstellen oder Neuer Kanal.
- Wählen Sie den Kanaltyp Web-Widget aus.
- Geben Sie einen Namen für Ihren Channel ein.
- Wählen Sie eine Agent-Anwendungsversion aus oder erstellen Sie eine.
- Konfigurieren Sie weitere Einstellungen, z. B. das Farbdesign und den Typ der Interaktion (Chat, Anruf oder gemischt).
- Klicken Sie auf Kanal erstellen, um den Bereitstellungscode zu generieren.
- Fügen Sie den Bereitstellungscode in den HTML-Code Ihrer Website ein.
- Richten Sie die Authentifizierung für Ihre Endnutzer ein. Im Widget wird eine Warnung angezeigt, wenn Sie den unveränderten Einbettungscode verwenden, ohne die Authentifizierung zu konfigurieren. Weitere Informationen zu Optionen und zur Einrichtung finden Sie im Abschnitt Authentifizierung konfigurieren.
Widget auf Ihrer Website einbetten
Wenn Sie das Widget auf Ihrer Website einfügen möchten, müssen Sie die folgenden HTML-Snippets hinzufügen.
Das Snippet unten enthält ein Skript, das für reCAPTCHA erforderlich ist. Wenn reCAPTCHA im Widget verwendet wird, wird unten im Widget ein Hinweis angezeigt, dass die Website durch Google geschützt ist und die Datenschutzerklärung und die Nutzungsbedingungen von Google gelten. Sie können auch das RECAPTCHA-Logo ausblenden.
Um responsive Layouts zu unterstützen, können Sie optional auch chat-messenger-layout.css laden.
Die Datei „chat-messenger-layout.css“ wird für das responsive Styling verwendet und um den Messenger bei Verwendung von render-mode="slide-in" oder render-mode="slide-over" ein- und auszublenden.
Da es body formatiert, kann es sich auf Ihre Website auswirken.
Daher können Sie chat-messenger-layout.css nicht laden oder den Inhalt kopieren und in Ihr eigenes CSS einfügen.
Für eine optimale Leistung und responsive Layouts sollten Sie die folgenden Placements verwenden:
Im Abschnitt <header>:
<header>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="https://www.gstatic.com/ces-console/fast/chat-messenger/prod/v1/chat-messenger.js"></script>
<!-- Chat Messenger CSS -->
<link rel="stylesheet" href="https://www.gstatic.com/ces-console/fast/chat-messenger/prod/v1/themes/chat-messenger-default.css">
<!-- Optional responsive styling -->
<!-- <link rel="stylesheet" href="https://www.gstatic.com/ces-console/fast/chat-messenger/prod/v1/themes/chat-messenger-layout.css"> -->
<!-- CSS customization -->
<style>
chat-messenger {
z-index: 999;
position: fixed;
<!-- Your CSS customization goes here if needed -->
}
</style>
</header>
Im Abschnitt <body>:
<body>
<!-- Your website's main content goes here -->
<script>
window.addEventListener("chat-messenger-loaded", () => {
chatSdk.registerContext(
chatSdk.prebuilts.ces.createContext({
deploymentName: "projects/YOUR_PROJECT_ID/locations/YOUR_REGION/apps/YOUR_APP_ID/deployments/YOUR_DEPLOYMENT_ID",
tokenBroker: {
enableTokenBroker: true,
// If you enabled reCAPTCHA for the token broker, set enableRecaptcha to true.
// enableRecaptcha: true,
},
}),
);
});
</script>
<!-- Messenger component -->
<chat-messenger
language-code="en"
max-query-length="-1">
<chat-messenger-chat-bubble
chat-title="${your-chat-title}">
</chat-messenger-chat-bubble>
</chat-messenger>
<!-- Page content continues -->
</body>
Sicherheitsaspekte
Wenn Sie das Widget als benutzerdefiniertes Element (<chat-messenger>) direkt in Ihre Website einbetten, wird es in einem Shadow-DOM auf Ihrer Hostseite ausgeführt.
Standardmäßig wird keine strikte Sandbox (z. B. ein iFrame) erzwungen.
Da das Widget denselben Fensterursprung wie Ihre Anwendung hat:
- Zugriff auf freigegebenen Speicher:Alle Skripts, die in der benutzerdefinierten Komponente des Widgets ausgeführt werden, haben Zugriff auf
window.sessionStorageundwindow.localStorageder Hostseite. Dazu gehören Authentifizierungstokens oder vertrauliche Sitzungsdaten, die vom Widget selbst gespeichert werden. - Cross-Site-Scripting (XSS): Wenn Ihr benutzerdefinierter Komponentencode oder Ihre Rich-Content-Payloads nicht bereinigte Eingaben enthalten, können sie ausgenutzt werden, um beliebigen JavaScript-Code im Kontext Ihrer Hauptanwendung auszuführen.
Um die Sicherheit Ihrer Anwendung und der Daten Ihrer Nutzer zu gewährleisten, müssen Sie Folgendes tun:
- Benutzerdefinierten Code bereinigen:Achten Sie darauf, dass alle benutzerdefinierten JavaScript- und HTML-Elemente, die in benutzerdefinierten Komponenten oder Nutzlasten verwendet werden, gründlich bereinigt werden.
- Eingaben validieren:Behandeln Sie alle Daten, die aus externen Quellen (einschließlich Agent-Antworten) an das Widget übergeben werden, als nicht vertrauenswürdig.
- Isolation von Handles:Wenn Ihre Sicherheitsanforderungen eine strikte Isolation zwischen dem Chat-Widget und den Daten Ihrer Anwendung erfordern, müssen Sie eine eigene Sandbox implementieren, z. B. indem Sie die Widget-Komponente in einen Container einfügen, den Sie steuern und isolieren.
Übergabe an Kundenservicemitarbeiter konfigurieren
Bevor Sie das Widget konfigurieren, müssen Sie dafür sorgen, dass die erforderlichen Ressourcen erstellt und das WebChat Proxy-Deployment abgeschlossen ist.
- Eskalierungsnummer einrichten.
- Erstellen Sie eine PhoneNumber-Ressource für Ihr Projekt.
- Verwenden Sie ein gültiges Unterhaltungsprofil, das für die Agent-Anwendung konfiguriert ist.
- Ordnen Sie das Unterhaltungsprofil der Telefonnummer zu, damit das System die menschliche Eskalierung verarbeiten kann.
- Folgen Sie der Anleitung zum Einrichten des WebChat-Proxys.
- Erstellen Sie eine PhoneNumber-Ressource für Ihr Projekt.
Webchat-Clientkonfiguration:
Legen Sie das Attribut über den WebChat-Proxy fest, um die Funktion für die Übergabe an einen Kundenservicemitarbeiter zu aktivieren. Beispiel für ein Code-Snippet:
<chat-messenger service='{"name":"ces","deployment-id":"projects/YOUR_PROJECT_ID/locations/YOUR_REGION/apps/YOUR_APP_ID/deployments/YOUR_DEPLOYMENT_ID"}' liveHandoff="true" escalationNumber="projects/YOUR_PROJECT_ID/locations/global/phoneNumbers/YOUR_PHONE_NUMBER_ID" url-allowlist="*" > </chat-messenger>
HTML-Anpassung
Sie können verschiedene Aspekte für die Darstellung und das Verhalten des Chat-Dialogfelds anpassen.
Das HTML-Element chat-messenger und chat-messenger-container hat die folgenden Attribute:
| Attribut | Komponentenzuordnung | Wert (optional) | Effekt |
|---|---|---|---|
| Dienst | chat-messenger | Der erforderliche Dienstname für den verbundenen Backend-Dienst. | |
| url-allowlist | chat-messenger | * | (durch Kommas getrennte Liste von Bilddomains |
| logging-level | chat-messenger | FEHLERBEHEBUNG | <OMIT> |
| enable-audio-input-only | chat-messenger-container | Nur Sprachbefehl | |
| start-with-recording | chat-messenger-container | Erfordert den Modus „Nur Sprache“. Der Nur-Sprachmodus wird gestartet, sobald der Chat-Messenger-Container gerendert wird. | |
| enable-audio-input | chat-messenger-container | Fügt eine Schaltfläche für multimodalen Chat hinzu | |
| enable-file-upload | chat-messenger-container | Aktiviert das Hochladen von Bildern | |
| bot-writing-image | chat-messenger-container | String | URL des Bildes, das während der „Denkphase“ des Bots gerendert wird |
| chat-title-icon | chat-messenger-container | String | URL des Bildes, das oben im Chat gerendert wird (Markenbild) |
| chat-title | chat-messenger-container | String | Text für den Chat-Titel |
| render-mode | chat-messenger | String („slide-in“ oder „slide-over“) | Der Modus zum Rendern des Chat-Dialogfelds relativ zum Rest der Seite. Mögliche Optionen sind „slide-over“ oder „slide-in“. Wenn nicht angegeben, kann die Positionierung vom Client festgelegt werden. Stile sind erforderlich, um den Rendermodus zu unterstützen. chat-messenger-layout.css kann als Baseline verwendet werden. |
CSS-Anpassung
Das Anpassen des Widget-Erscheinungsbilds erfolgt über ein System von CSS-Tokens. Durch das Ändern dieser Tokens können Sie dafür sorgen, dass sich die Chatoberfläche konsistent mit Ihrer Marke anfühlt und gleichzeitig das Layout und die Barrierefreiheit beibehalten werden.
Farb-Tokens
Mit diesen Tokens wird die Farbpalette für die Widget-Oberflächen, interaktiven Elemente, Texte und Status definiert.
| Attribut | Beschreibung | Helles Standarddesign | Dunkles Standarddesign |
|---|---|---|---|
| Container / Oberflächen | |||
| --chat-messenger-color--surface | Die primäre Hintergrundfarbe für den Chatbereich und die Fußzeile. | #F8FAFD | #1B1B1B |
| --chat-messenger-color--surface-container | Die Hintergrundfarbe für Widget-Container (z. B. Produktkarten und Karussells), die im Chat eingebettet sind. | #FFFFFF | #131314 |
| --chat-messenger-color--surface-container-high | Ein Hintergrund mit hoher Betonung für Elemente in Widgets (z. B. Eingabefelder) | #F0F4F9 | #1E1F20 |
| Marke / Akzent | |||
| --chat-messenger-color--primary | Primäre Markenfarbe, die für Füllungen mit hoher Betonung und primäre Schaltflächen verwendet wird. | #303030 | #E3E3E3 |
| --chat-messenger-color--primary-container | Hintergrundfarbe für wichtige Komponenten wie Blasen für Nutzermitteilungen. | #E9EEF6 | #282A2C |
| --chat-messenger-color--secondary | Farbe für sekundäre interaktive Elemente wie die Schaltfläche „Senden“ oder tonale Schaltflächen. | #DDE3EA | #333537 |
| Text und Symbole | |||
| --chat-messenger-color--on-surface | Primärfarbe für Text und Symbole, die vor Standardhintergründen der Oberfläche angezeigt werden. | #1F1F1F | #E3E3E3 |
| --chat-messenger-color--on-surface-variant | Farbe mit geringerer Gewichtung für sekundären Text und dekorative Symbole. | #444746 | #C4C7C5 |
| --chat-messenger-color--on-primary | Farbe für Text und Symbole, die auf primären Marken-Hintergründen platziert werden. | #F2F2F2 | #303030 |
| --chat-messenger-color--on-primary-container | Farbe für Text und Symbole, die auf primären Containerhintergründen platziert werden. | #1F1F1F | #E3E3E3 |
| --chat-messenger-color--on-secondary | Farbe für Text und Symbole, die auf sekundären Marken-Hintergründen platziert werden. | #444746 | #C4C7C5 |
| Bundesstaaten | |||
| --chat-messenger-color--state-layer-on-surface | Die durchscheinende Überlagerung, die verwendet wird, um Hover- oder Auswahlzustände auf Standardoberflächen anzuzeigen. Die Füllung für deaktivierte Komponenten. | #1F1F1F 8% | #E3E3E3 8% |
| --chat-messenger-color--state-layer-on-primary | Das durchscheinende Overlay, das für Interaktionsstatus über primärfarbenen Elementen verwendet wird. | #FFFFFF 8% | #062E6F 8% |
| --chat-messenger-color--state-layer-on-secondary | Das durchscheinende Overlay, das für Interaktionsstatus über Elementen mit sekundärer Farbe verwendet wird. | #1F1F1F 8% | #E3E3E3 8% |
| --chat-messenger-color--state-on-surface-mute | Farbe für deaktivierten Text und deaktivierte Symbole. | #444746 (38%) | #C4C7C5 (38%) |
| Funktionalität | |||
| --chat-messenger-color--outline | Farbe für allgemeine Rahmen, Trennlinien und dekorative Umrisslinien. | #C4C7C5 | #444746 |
| --chat-messenger-color--outline-variant | Farbe für dezente Rahmen, z. B. den äußeren Rahmen von Widgets | #747775 bei 16% | #8E918F bei 16% |
| --chat-messenger-color--outline-active | Rahmenfarbe für Eingabefelder und Drop-down-Menüs, wenn der Fokus darauf liegt oder sie aktiv sind. | #747775 | #8E918F |
| --chat-messenger-color--error | Auffällige Farbe für Füllungen, Symbole und Text, die Dringlichkeit signalisiert. | #B3261E | #F2B8B5 |
| --chat-messenger-color--error-container | Hintergrundfarbe für Fehlerbanner oder interaktive Benachrichtigungscontainer. | #F9DEDC | #8C1D18 |
| --chat-messenger-color--on-error-container | Text und Symbole werden vor dem Hintergrund des Fehlercontainers platziert. | #8C1D18 | #F9DEDC |
| --chat-messenger-color--link | Farbe, die für anklickbare Hyperlinks in Nachrichten oder Beschreibungen verwendet wird. | #0B57D0 | #A8C7FA |
Form- und Höhen-Tokens
Mit diesen Tokens werden der Eckenradius und die visuelle Tiefe (Schatten) der Chatkomponenten gesteuert.
| Attribut | Beschreibung | Standard |
|---|---|---|
| --chat-messenger-shape--corner-value-small | Eckradius für kleine verschachtelte Elemente in Widgets, z. B. Produktbild-Miniaturansichten | 8 Pixel |
| --chat-messenger-shape--corner-value-medium | Eckradius für verschachtelte Elemente in Widgets (z. B. Eingabefelder, Bilder) | 16 Pixel |
| --chat-messenger-shape--corner-value-large | Eckradius für verschachtelte Container in Widgets (z. B. Karussellkarten, Schnellaktionskarten) | 20 Pixel |
| --chat-messenger-shape--corner-value-extra-large | Eckradius für das Hauptchatfenster und die Widget-Container. | 28 Pixel |
| --chat-messenger-shape--corner-fully-rounded | Wird für Schaltflächen und pillenförmige interaktive Elemente verwendet, um ein vollständig kreisförmiges Ende zu gewährleisten. | 100 px |
| --chat-messenger-elevation | Der auf schwebende Elemente und die Hauptchatkomponente angewendete Box-Schatten. | 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15) |
Typografie-Tokens
Diese Tokens definieren die Schriftart und die spezifische Skalierung (Größe, Stärke, Abstand), die in der gesamten Benutzeroberfläche verwendet wird.
| Attribut | Verwendungszweck | Standard |
|---|---|---|
| --chat-messenger-font-family | Hauptschriftfamilie | Google Sans |
| Title large | Wichtige Header | |
| --chat-messenger-typescale--title-large-font-size | 18 Pixel | |
| --chat-messenger-typescale--title-large-font-weight | 400 | |
| --chat-messenger-typescale--title-large-line-height | 24 Pixel | |
| --chat-messenger-typescale--title-large-letter-spacing | 0 | |
| Titelmedium | Abschnittsüberschriften in Widgets. | |
| --chat-messenger-typescale--title-medium-font-size | 16 Pixel | |
| --chat-messenger-typescale--title-medium-font-weight | 500 | |
| --chat-messenger-typescale--title-medium-line-height | 24 Pixel | |
| --chat-messenger-typescale--title-medium-letter-spacing | 0 | |
| Titel klein | ||
| --chat-messenger-typescale--title-small-font-size | Unterüberschriften oder Titel in kleineren Karten. | 14 Pixel |
| --chat-messenger-typescale--title-small-font-weight | 500 | |
| --chat-messenger-typescale--title-small-line-height | 20 Pixel | |
| --chat-messenger-typescale--title-small-letter-spacing | 0 | |
| Body large | Lange Beschreibungen. | |
| --chat-messenger-typescale--body-large-font-size | 16 Pixel | |
| --chat-messenger-typescale--body-large-font-weight | 400 | |
| --chat-messenger-typescale--body-large-line-height | 24 Pixel | |
| --chat-messenger-typescale--body-large-letter-spacing | 0 | |
| Body medium | Standard-UI-Text | |
| --chat-messenger-typescale--body-medium-font-size | 14 Pixel | |
| --chat-messenger-typescale--body-medium-font-weight | 400 | |
| --chat-messenger-typescale--body-medium-line-height | 20 Pixel | |
| --chat-messenger-typescale--body-medium-letter-spacing | 0 | |
| Body small | Sekundäre Metadaten und Beschreibungen | |
| --chat-messenger-typescale--body-small-font-size | 12 Pixel | |
| --chat-messenger-typescale--body-small-font-weight | 400 | |
| --chat-messenger-typescale--body-small-line-height | 16 Pixel | |
| --chat-messenger-typescale--body-small-letter-spacing | 0,1 | |
| Label „Groß“ | Text in Schaltflächen und primären Aktions-Chips. | |
| --chat-messenger-typescale--label-large-font-size | 14 Pixel | |
| --chat-messenger-typescale--label-large-font-weight | 500 | |
| --chat-messenger-typescale--label-large-line-height | 20 Pixel | |
| --chat-messenger-typescale--label-large-letter-spacing | 0 | |
| Label-Medium | Sekundärer Schaltflächentext und Feldlabels | |
| --chat-messenger-typescale--label-medium-font-size | 12 Pixel | |
| --chat-messenger-typescale--label-medium-font-weight | 500 | |
| --chat-messenger-typescale--label-medium-line-height | 16 Pixel | |
| --chat-messenger-typescale--label-medium-letter-spacing | 0,1 | |
| Label „Klein“ | Mikro-Labels und Badgetext | |
| --chat-messenger-typescale--label-small-font-size | 11 Pixel | |
| --chat-messenger-typescale--label-small-font-weight | 500 | |
| --chat-messenger-typescale--label-small-line-height | 16 Pixel | |
| --chat-messenger-typescale--label-small-letter-spacing | 0,1 |
Abstandstokens
Diese Tokens sorgen für eine einheitliche Layoutdichte, indem sie Ränder, Innenabstände und Lücken zwischen Elementen definieren.
| Attribut | Standard |
|---|---|
| --chat-messenger-spacing--half | 4 Pixel |
| --chat-messenger-spacing--one | 8 Pixel |
| --chat-messenger-spacing--one-and-half | 12 Pixel |
| --chat-messenger-spacing--two | 16 Pixel |
| --chat-messenger-spacing--two-and-half | 20 Pixel |
| --chat-messenger-spacing--three | 24 Pixel |
| --chat-messenger-spacing--three-and-half | 28 Pixel |
| --chat-messenger-spacing--four | 32 Pixel |
JavaScript-Ereignisse
Messenger löst eine Vielzahl von Ereignissen aus, für die Sie Ereignis-Listener erstellen können.
Das Ereignisziel für diese Ereignisse ist das Element chat-messenger.
Fügen Sie zum Hinzufügen eines Ereignis-Listeners für das Element chat-messenger den folgenden JavaScript-Code hinzu, wobei event-type einer der in diesem Abschnitt beschriebenen Ereignisnamen ist:
const chatMessenger = document.querySelector('chat-messenger');
chatMessenger.addEventListener('event-type', function (event) {
// Handle event
...
});
Die folgenden Ereignistypen werden unterstützt:
chat-messenger-loaded: Dieses Ereignis wird ausgelöst, wenn das Elementchat-messengervollständig geladen und initialisiert wurde.chat-messenger-closechat-messenger-error: Dieses Ereignis tritt auf, wenn der CES-Agent einen Fehlerstatuscode sendet. Die Ereignisstruktur sieht so aus:eventId= `chat-messenger-error-v2` event.details { message: string; code: number | undefined; status: number | string; }df-update-cart-count: Dieses Ereignis tritt ein, wenn in den Rich-Content-Elementenproduct_carousel,product_detailundproduct_comparisondie Aktionen „In den Warenkorb“, „Artikelmenge anpassen“ oder „Artikel löschen“ ausgeführt werden. Die Ereignisstruktur sieht so aus:{ "detail": { "count": <cart_item_count>, } }
JavaScript-Funktionen
Das Element chat-messenger bietet Funktionen, die Sie aufrufen können, um dessen Verhalten zu beeinflussen.
renderCustomEvent
Diese Funktion rendert eine Textnachricht, so als ob sie eine Textantwort von der Agent-Anwendung wäre.
Beispiel:
const chatMessenger = document.querySelector('chat-messenger');
chatMessenger.renderCustomText('Custom text');
renderCustomCard
Diese Funktion rendert eine benutzerdefinierte Karte, so als ob sie eine Rich-Response-Nachricht aus der Agent-Anwendung wäre. Das Format der benutzerdefinierten Nutzlastantworten wird im Abschnitt Rich Media-Antworten definiert.
Beispiel:
const chatMessenger = document.querySelector('chat-messenger');
const payload = [
{
"type": "info",
"title": "Info item title",
"subtitle": "Info item subtitle",
"image": {
"src": {
"rawUrl": "https://example.com/images/logo.png"
}
},
"actionLink": "https://example.com"
}];
chatMessenger.renderCustomCard(payload);
Authentifizierung konfigurieren
Alle API-Anfragen, die vom Web-Widget an die Backend-Dienste von Google gesendet werden, müssen authentifiziert werden. Dies erfolgt über ein kurzlebiges OAuth 2.0-Zugriffstoken.
Die mit diesem Token verknüpfte Identität, sei es ein Endnutzer oder ein Dienstkonto, muss die erforderlichen IAM-Berechtigungen haben, um mit dem Agent zu interagieren.
In den verbleibenden Unterabschnitten wird beschrieben, wie Sie die Authentifizierung einrichten können.
Token-Broker einrichten
Ein Token-Broker ist ein Webdienst, der in Ihrem Google Cloud -Projekt ausgeführt wird und ein Zugriffstoken im Namen eines Dienstkontos generiert, das Ihnen gehört. Das Web-Widget kann zu Beginn einer Unterhaltung automatisch die URL für Ihren Token-Broker aufrufen, um ein neues Token für die Kommunikation mit der CX Agent Studio API abzurufen.
Sie haben zwei Möglichkeiten, einen Token-Broker einzurichten: Google-gehostet oder selbst gehostet.
Von Google gehostet
Verwenden Sie den von Google bereitgestellten Token-Broker, um öffentlichen Zugriff auf Ihr Chat-Widget zu ermöglichen:
- Aktivieren Sie beim Erstellen der Bereitstellungs- und Widget-Konfiguration den öffentlichen Zugriff und optional die Ursprungs- und reCAPTCHA-Prüfungen (empfohlen, um Spoofing und Missbrauch zu verhindern).
- Das Chat-Widget fordert ein Token mit Sitzungsumfang vom von Google bereitgestellten Token-Broker an und verwendet es für Chatsitzungen.
Selbst gehostet
So richten Sie einen selbst gehosteten Tokenbroker ein:
- Erstellen Sie ein Dienstkonto in Ihrem Projekt und weisen Sie ihm die Rolle „Customer Engagement Suite-Client“ zu.
- Stellen Sie eine Cloud Run Functions-Funktion mit dem von uns bereitgestellten Token Broker-Beispielcode bereit.
Eine detaillierte Schritt-für-Schritt-Anleitung finden Sie im Open-Source-Repository.
OAuth 2 einrichten
Mit einem OAuth2-Client kann das Web-Widget einen Authentifizierungsvorgang für den Endnutzer starten. Das bedeutet in der Regel, dass ein Dialogfeld geöffnet wird, in dem sich der Nutzer in seinem Google-Konto (oder bei anderen Anbietern) anmeldet und das Web-Widget ein Token erhält, um im Namen des Nutzers zu agieren.
Wählen Sie diese Option aus, wenn Endnutzer sich anmelden müssen, bevor sie den Agent verwenden können. Die Anmeldedaten des Nutzers werden für den Zugriff auf die Agent-Anwendung verwendet.
Hier sind die wichtigsten Schritte, die Sie ausführen müssen:
- Rufen Sie in der Google Cloud Console die Google Auth Platform auf und wählen Sie „Clients“ aus.
- Klicken Sie auf Client erstellen.
- Wählen Sie als Clienttyp Webanwendung aus.
- Geben Sie einen Namen für den neuen Client ein.
- Fügen Sie Ihre Website-URL sowohl den autorisierten JavaScript-Quellen als auch den autorisierten Weiterleitungs-URIs hinzu.
- Klicken Sie auf Erstellen und warten Sie fünf Minuten, bevor Sie fortfahren.
Nachdem Sie die Schritte ausgeführt haben, erhalten Sie eine Client-ID im folgenden Format:
123456789012-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com
Geben Sie diesen Wert im Attribut oauth-client-id der Webkomponente chat-messenger an.
Eigene Authentifizierungs-API erstellen
Erstellen Sie eine eigene API, die die Authentifizierung und Autorisierung des Endnutzers übernimmt und ein Google-Zugriffstoken oder ein signiertes JWT zurückgibt, das die Berechtigung hat, runSession in Ihrer App aufzurufen.
Informationen zur Verwendung der CX Agent Studio API finden Sie unter API-Zugriff.