Fügen Sie Ihrer von Amazon Connect gehosteten Website eine Chat-Benutzeroberfläche hinzu - Amazon Connect
Unterstützte BrowserSchritt 1: Anpassen Ihres Kommunikations-WidgetsSchritt 2: Angeben der Website-Domains an, auf denen das Kommunikations-Widget angezeigt werden sollSchritt 3: Bestätigen und Kopieren des Kommunikations-Widget-Codes und der SicherheitsschlüsselWerden Fehlermeldungen angezeigt?

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Fügen Sie Ihrer von Amazon Connect gehosteten Website eine Chat-Benutzeroberfläche hinzu

Um Kunden per Chat zu unterstützen, können Sie einer Website ein von Amazon Connect gehostetes Kommunikations-Widget hinzufügen. Sie können das Kommunikations-Widget auf der Amazon Connect Admin-Website konfigurieren. Sie können die Schriftart und die Farben anpassen und das Widget so sichern, dass es nur von Ihrer Website aus gestartet werden kann. Wenn Sie fertig sind, haben Sie ein kurzes Code-Snippet, das Sie zu Ihrer Website hinzufügen.

Da Amazon Connect das Widget hostet, wird sichergestellt, dass die neueste Version immer auf Ihrer Website verfügbar ist.

Tipp

Die Verwendung des Kommunikations-Widgets unterliegt standardmäßigen Servicekontingenten, wie z. B. der Anzahl der erforderlichen Zeichen für jede Nachricht. Bevor Sie Ihr Kommunikations-Widget in Betrieb nehmen, stellen Sie sicher, dass Ihre Servicekontingente den Anforderungen Ihres Unternehmens entsprechen. Weitere Informationen finden Sie unter Amazon Connect Servicekontingenten.

Inhalt

Unterstützte Browser

Das vorgefertigte Kommunikations-Widget unterstützt die folgenden (und höhere) Browserversionen:

  • Google Chrome 85.0

  • Safari 13.1

  • Microsoft Edge Version 85

  • Mozilla Firefox 81.0

Das Kommunikations-Widget unterstützt Browserbenachrichtigungen für Desktop-Geräte. Weitere Informationen finden Sie unter Senden Sie Browserbenachrichtigungen an Kunden, wenn Chat-Nachrichten eintreffen.

Schritt 1: Anpassen Ihres Kommunikations-Widgets

In diesem Schritt passen Sie die Umgebung des Kommunikations-Widgets für Ihre Kunden an.

  1. Melden Sie sich auf der Amazon Connect Admin-Website unter https://instance name.my.connect.aws/ an. Wählen Sie Kommunikations-Widget anpassen.

    Die Seite mit dem Konfigurationsleitfaden, der Link zum Anpassen des Kommunikations-Widgets.

  2. Wählen Sie auf der Seite Kommunikations-Widgets die Option Kommunikations-Widget hinzufügen aus, um mit der Anpassung eines neuen Kommunikations-Widgets zu beginnen. Um ein vorhandenes Kommunikations-Widget zu bearbeiten, zu löschen oder zu duplizieren, wählen Sie aus den Optionen in der Spalte Aktionen, wie in der folgenden Abbildung gezeigt.

    Klicken Sie auf der Seite „Kommunikations-Widgets“ auf die Schaltfläche „Kommunikations-Widget hinzufügen“.

  3. Geben Sie einen Namen und eine Beschreibung für das Kommunikations-Widget ein.

    Anmerkung

    Der Name muss für jedes Kommunikations-Widget, das in einer Amazon-Connect-Instance erstellt wurde, eindeutig sein.

  4. Legen Sie im Abschnitt Kommunikationsoptionen fest, wie Ihre Kunden mit Ihrem Widget interagieren können und wählen Sie dann Speichern und weiter. In der folgenden Abbildung sind Optionen zu sehen, mit denen der Chat- und Nachrichtenempfang für Kunden ermöglicht werden kann.

    Die Seite „Kommunikations-Widget“, für Chat- und Webanrufe konfiguriert

  5. Wählen Sie auf der Seite Kommunikations-Widget erstellen die Stile für die Widget-Schaltflächen sowie die Anzeigenamen und -stile aus.

    Bei der Auswahl dieser Optionen wird die Widget-Vorschau automatisch aktualisiert. Sie können also sehen, wie die Umgebung für die Kunden aussehen wird.

    Die Vorschau des Kommunikations-Widgets.
Schaltflächenstile

  1. Wählen Sie die Farben für den Schaltflächenhintergrund aus. Geben Sie dazu Hexadezimalwerte (HTML-Farbcodes) ein.

  2. Wählen Sie Weiß oder Schwarz als Symbolfarbe aus. Die Farbe des Symbols kann nicht angepasst werden.

Widget-Header

  1. Geben Sie Werte für Header-Nachricht und Farbe sowie für die Hintergrundfarbe des Widgets an.

  2. Logo-URL: Fügen Sie eine URL zu Ihrem Logo-Banner aus einem Amazon-S3-Bucket oder einer anderen Online-Quelle ein.

    Anmerkung

    In der Vorschau des Kommunikations-Widgets auf der Anpassungsseite wird das Logo nicht angezeigt, wenn es aus einer anderen Online-Quelle als einem Amazon-S3-Bucket stammt. Das Logo wird jedoch angezeigt, wenn das benutzerdefinierte Kommunikations-Widget auf Ihrer Seite implementiert wird.

    Das Banner muss im .svg-, .jpg- oder .png-Format vorliegen. Das Bild kann 280 Pixel (Breite) mal 60 Pixel (Höhe) groß sein. Jedes Bild, das größer als diese Abmessungen ist, wird so skaliert, dass es in den Komponentenbereich des Logos von 280×60 passt.

    1. Anweisungen zum Hochladen einer Datei wie eines Logobanners auf S3 finden Sie unter Hochladen von Objekten im Benutzerhandbuch zu Amazon Simple Storage Service.

    2. Vergewissern Sie sich, dass die Bildberechtigungen richtig eingestellt sind, sodass das Kommunikations-Widget über Berechtigungen für den Zugriff auf das Bild verfügt. Informationen dazu, wie Sie ein S3-Objekt öffentlich zugänglich machen, finden Sie unter Schritt 2: Hinzufügen einer Bucket-Richtlinie im Thema Berechtigungen für den Zugriff auf Websites einrichten.

Chat-Ansicht

  1. Schriftart: Verwenden das Dropdown-Menü, um die Schriftart für den Text im Kommunikations-Widget auszuwählen.

    • Anzeigename für Systemnachrichten: Geben Sie einen neuen Anzeigenamen ein, um den Standardwert zu überschreiben. Die Standardeinstellung ist SYSTEM_MESSAGE.

    • Anzeigename der Bot-Nachricht: Geben Sie einen neuen Anzeigenamen ein, um den Standardwert zu überschreiben. Der Standardwert ist BOT.

    • Platzhalter für Texteingabe: Geben Sie einen neuen Platzhaltertext ein und überschreiben Sie so den Standardwert. Der Standardwert ist Type a message.

    • Text der Schaltfläche „Chat beenden“: Geben Sie neuen Text ein, um den Standardtext zu ersetzen. Der Standardwert ist Chat beenden.

  3. Farbe der Chat-Blase für Kundendienstmitarbeiter: Wählen Sie die Farben für die Nachrichtenblasen des Kundendienstmitarbeiters aus, indem Sie Hexadezimalwerte (HTML-Farbcodes) eingeben.

  4. Farbe der Chat-Blase für Kunden: Wählen Sie die Farben für die Nachrichtenblasen des Kunden, indem Sie Hexadezimalwerte (HTML-Farbcodes) eingeben.

  5. Wählen Sie Save and continue aus.

Schritt 2: Angeben der Website-Domains an, auf denen das Kommunikations-Widget angezeigt werden soll

  1. Geben Sie die Website-Domains ein, in denen Sie das Kommunikations-Widget platzieren möchten. Der Chat wird nur auf Websites geladen, die Sie in diesem Schritt auswählen.

    Wählen Sie Domain hinzufügen aus, um bis zu 50 Domains hinzuzufügen.

    Die Option „Domain hinzufügen“.
    Wichtig

    • Vergewissern Sie sich, dass Ihre Website URLs gültig ist und keine Fehler enthält. Geben Sie die vollständige URL beginnend mit https:// an.

    • Wir empfehlen die Verwendung von https:// für Ihre Produktionswebsites und -anwendungen.

  2. Wir empfehlen, unter „Sicherheit für Ihr Kommunikations-Widget hinzufügen“ Ja auszuwählen und gemeinsam mit Ihrem Website-Administrator Ihre Webserver so einzurichten, dass sie JSON-Web-Tokens (JWTs) für neue Chat-Anfragen ausgeben. Dies bietet Ihnen mehr Kontrolle beim Initiieren neuer Chats, einschließlich einer Überprüfungsmöglichkeit, ob an Amazon Connect gesendete Chat-Anfragen von authentifizierten Benutzern stammen.

    Die Aktivierung der Sicherheit für neue Kommunikations-Widget-Anfragen.

    Wenn Sie Ja auswählen, passiert Folgendes:

    • Amazon Connect stellt auf der nächsten Seite einen 44-stelligen Sicherheitsschlüssel bereit, mit dem Sie JSON-Web-Tokens (JWTs) erstellen können.

    • Amazon Connect fügt dem Einbettungsskript für das Kommunikations-Widget eine Callback-Funktion hinzu, die nach einem JWT (JSON Web Token) sucht, wenn ein Chat initiiert wird.

      Sie müssen die Callback-Funktion im Einbettungscode implementieren, wie im folgenden Beispiel gezeigt.

      amazon_connect('authenticate', function(callback) {
  window.fetch('/token').then(res => {
    res.json().then(data => {
      callback(data.data);
    });
  });
});

    Wenn Sie diese Option wählen, erhalten Sie im nächsten Schritt einen Sicherheitsschlüssel für alle Chat-Anfragen, die auf Ihren Websites initiiert wurden. Bitten Sie Ihren Website-Administrator, Ihre Webserver so einzurichten, dass sie JWTs mit diesem Sicherheitsschlüssel ausgeben.

  3. Wählen Sie Speichern.

Schritt 3: Bestätigen und Kopieren des Kommunikations-Widget-Codes und der Sicherheitsschlüssel

In diesem Schritt bestätigen Sie Ihre Auswahl, kopieren den Code für das Kommunikations-Widget und betten ihn in Ihre Website ein. Wenn Sie sich JWTs in Schritt 2 für die Verwendung entschieden haben, können Sie auch die geheimen Schlüssel kopieren, um sie zu erstellen.

Sicherheitsschlüssel

Verwenden Sie diesen 44-stelligen Sicherheitsschlüssel, um JSON-Webtoken von Ihrem Webserver aus zu generieren. Sie können Schlüssel auch aktualisieren oder rotieren, wenn Sie sie ändern müssen. Wenn Sie dies tun, stellt Ihnen Amazon Connect einen neuen Schlüssel zur Verfügung und behält den vorherigen Schlüssel bei, bis Sie ihn ersetzen können. Nachdem Sie den neuen Schlüssel bereitgestellt haben, können Sie zu Amazon Connect zurückkehren und den vorherigen Schlüssel löschen.

Der von Amazon Connect bereitgestellte Sicherheitsschlüssel.

Wenn Kunden mit dem Chat-Start-Symbol auf Ihrer Website interagieren, fordert das Chat-Widget vom Webserver ein JWT an. Wenn dieses JWT bereitgestellt wird, nimmt das Widget es als Teil der Chat-Anfrage des Endkunden an Amazon Connect auf. Amazon Connect verwendet dann den geheimen Schlüssel, um das Token zu entschlüsseln. Bei Erfolg wird bestätigt, dass das JWT von Ihrem Webserver ausgestellt wurde, und Amazon Connect leitet die Chat-Anfrage an Ihre Kundendienstmitarbeiter im Kontaktcenter weiter.

Einzelheiten zum JSON-Web-Token

  • Algorithmus: HS256

  • Claims:

    • Sub: widgetId

      Ersetzen Sie widgetId durch Ihre eigene WidgetID. Um Ihre widgetId zu finden, sehen Sie sich das Beispiel-Skript für das Kommunikations-Widget an.

    • iat: *Ausgabezeitpunkt.

    • exp: *Flow (maximal 10 Minuten).

    • SegmentAttributes (optional): Ein Satz von systemdefinierten Schlüssel-Wert-Paaren, die mithilfe einer Attributzuordnung in einzelnen Kontaktsegmenten gespeichert werden. Weitere Informationen finden Sie SegmentAttributes in der API. StartChatContact

    • Attribute (optional): Objekt mit string-to-string Schlüssel-Wert-Paaren. Die Kontaktattribute müssen den von der API festgelegten Einschränkungen entsprechen. StartChatContact

    • CustomerId (optional): Dies kann entweder eine Amazon Connect Connect-Kundenprofil-ID oder eine benutzerdefinierte Kennung aus einem externen System, z. B. einem CRM, sein.

    *Informationen zum Datumsformat finden Sie im folgenden Dokument der Internet Engineering Task Force (IETF): JSON Web Token (JWT), Seite 5.

Der folgende Codeblock zeigt ein Beispiel für die Generierung eines JWT in Python:

import jwt 
import datetime 
CONNECT_SECRET = "your-securely-stored-jwt-secret" 
WIDGET_ID = "widget-id" 
JWT_EXP_DELTA_SECONDS = 500

payload = { 
'sub': WIDGET_ID, 
'iat': datetime.datetime.utcnow(), 
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
'customerId': "your-customer-id",
'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} } 
header = { 'typ': "JWT", 'alg': 'HS256' } 
encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect

Skript für das Kommunikations-Widget

Die folgende Abbildung zeigt ein Beispiel für das JavaScript , das Sie auf Websites einbetten, auf denen Kunden mit Agenten chatten sollen. Dieses Skript zeigt das Widget in der unteren rechten Ecke Ihrer Website an.

Das Skript für das Kommunikations-Widget

Wenn Ihre Website geladen wird, sehen Kunden zuerst das Symbol Start. Wenn sie dieses Symbol wählen, wird das Kommunikations-Widget geöffnet und sie können eine Nachricht an einen Kundendienstmitarbeiter senden.

Sie können jederzeit Änderungen am Kommunikations-Widget über Bearbeiten vornehmen.

Anmerkung

Gespeicherte Änderungen aktualisieren die Kundenumgebung in wenigen Minuten. Überprüfen Sie Ihre Widget-Konfiguration, bevor Sie sie speichern.

Der Link zum Bearbeiten in der Widget-Vorschau.

Damit Änderungen an Widget-Symbolen auf der Website wirksam werden, müssen Sie Ihre Website direkt mit einem neuen Codeblock aktualisieren.

Werden Fehlermeldungen angezeigt?

Wenn Fehlermeldungen auftreten, finden Sie weitere Informationen unter Probleme mit Ihrem Amazon Connect Connect-Kommunikations-Widget beheben.