Fügen Sie Ihrer Website eine Chat-Benutzeroberfläche hinzu

Um Ihre Kunden per Chat zu unterstützen, können Sie Ihrer Website ein Chat-Widget hinzufügen, das von Amazon Connect gehostet wird. Sie können das Chat-Widget in der Amazon Connect Connect-Konsole konfigurieren: Passen Sie die Schriftart und die Farben an und sichern Sie das Widget so, dass es nur von Ihrer Website aus gestartet werden kann. Als Ergebnis erhalten 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 Chat-Widgets unterliegt standardmäßigen Servicekontingenten, wie z. B. der Anzahl der erforderlichen Zeichen für jede Nachricht. Bevor Sie Ihr Chat-Widget in Betrieb nehmen, stellen Sie sicher, dass Ihre Servicekontingenten den Anforderungen Ihres Unternehmens entsprechen. Weitere Informationen finden Sie unter Amazon Connect-Service Quotas.

Unterstützte Browser

Das vorgefertigte Chat-Widget unterstützt die folgenden Browserversionen und höher:

• Google Chrome 85.0

• Safari 13,1

• Microsoft Edge, Version 85

• Mozilla Firefox 81.0

Das Chat-Widget unterstützt Browser-Benachrichtigungen für Desktop-Geräte. Weitere Informationen finden Sie unter Browser-Benachrichtigungen.

Schritt 1: Passen Sie Ihr Chat-Widget an

In diesem Schritt passen Sie das Erlebnis des Chat-Widgets für Ihre Kunden an.

1. Melden Sie sich auf der Amazon Connect Admin-Website unter https://Instanzname .my.connect.aws/ an. Wählen Sie „Chat-Widget anpassen“.

   

2. Wählen Sie auf der Seite Chat-Widgets die Option Chat-Widget hinzufügen aus, um mit der Anpassung eines neuen Chat-Widgets zu beginnen. Um ein vorhandenes Chat-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.

   

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

   Anmerkung

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

4. Verwenden Sie für Typeface das Drop-down-Menü, um die Schriftart für den Text im Chat-Widget auszuwählen.

   

5. Wählen Sie für das Chat-Widget die Farben für den Widget-Header, die Chat-Nachrichtenblasen und die Start- und Minimierungssymbole aus, indem Sie Hexadezimalwerte (HTML-Farbcodes) eingeben, die das Chat-Widget an Ihr Website-Branding anpassen.

   Wenn Sie Farben auswählen, wird die Chat-Vorschau automatisch aktualisiert, sodass Sie sehen können, wie Ihr Widget aussehen wird.

   

6. Optional können Sie dem Chat-Widget Ihr Firmenlogo und anderes Branding hinzufügen.

   Die folgende Abbildung zeigt ein Widget, bei dem das Branding im Banner (die Logo-URL) auf Amazon, der Anzeigename der Systemnachricht auf Systemnachricht, der Anzeigename der Bot-Nachricht auf Alexa, der Platzhalter für die Texteingabe auf Frage stellen und der Text der Schaltfläche „Chat beenden“ auf Sitzung beenden eingestellt ist.

   

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

      Anmerkung

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

      Das Banner muss im Format.svg, .jpg oder .png sein. 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 Bereich der 280x60-Logo-Komponente passt.

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

      2. Stellen Sie sicher, dass die Bildberechtigungen richtig eingestellt sind, sodass das Chat-Widget über Zugriffsrechte 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.

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

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

   4. Platzhalter für Texteingabe: Geben Sie einen neuen Platzhaltertext ein und überschreiben Sie den Standard. Die Standardeinstellung ist Geben Sie eine Nachricht ein.

   5. Text der Chat-Schaltfläche beenden: Geben Sie neuen Text ein, um den Standardtext zu ersetzen. Die Standardeinstellung ist Chat beenden.

7. Wählen Sie unter Chat-Symbol minimieren die Farben für das Symbol aus, das Kunden auswählen, oder tippen Sie darauf, um das Chat-Widget zu minimieren.

8. Wählen Sie unter „Chat-Symbol öffnen“ die Farben für das Symbol aus, das Kunden auswählen, oder tippen Sie darauf, um einen Chat mit Ihrem Kontaktzentrum zu starten.

9. Wählen Sie unter Flow auswählen den eingehenden Flow aus, der initiiert wird, wenn ein Kunde einen Chat startet.

10. Wählen Sie Weiter aus.

Schritt 2: Geben Sie die Website-Domains an, auf denen das Chat-Widget angezeigt werden soll

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

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

   

   Wichtig

   • Vergewissern Sie sich, dass die URLs Ihrer Website gültig sind und keine Fehler enthalten. Geben Sie die vollständige URL an, die mit https://beginnt.

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

2. Wir empfehlen, unter Sicherheit für Ihr Chat-Widget hinzufügen die Option Ja auszuwählen und mit Ihrem Website-Administrator zusammenzuarbeiten, um 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 der Möglichkeit, zu überprüfen, ob an Amazon Connect gesendete Chat-Anfragen von authentifizierten Benutzern stammen.

   

   Wenn Sie Ja wählen, hat das folgende Ergebnis:

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

   • Amazon Connect fügt dem Chat-Widget-Einbettungsskript eine Rückruffunktion hinzu, die nach einem JWT sucht, wenn ein Chat initiiert wird.

     Sie müssen die Callback-Funktion im eingebetteten Snippet 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 aus.

Schritt 3: Bestätigen und kopieren Sie den Chat-Widget-Code und die Sicherheitsschlüssel

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

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 die Möglichkeit haben, ihn zu ersetzen. Nachdem Sie den neuen Schlüssel bereitgestellt haben, können Sie zu Amazon Connect zurückkehren und den vorherigen Schlüssel löschen.

Wenn Ihre Kunden mit dem Chat-Startsymbol auf Ihrer Website interagieren, fordert das Chat-Widget Ihren Webserver nach einem 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 Contact-Center-Agenten weiter.

Besonderheiten des JSON-Web-Tokens

• Algorithmus: HS256

• Behauptungen:

  • Sub: WidgetID

    Ersetze es widgetId durch deine eigene WidgetID. Um Ihre WidgetID zu finden, sehen Sie sich das Beispiel an. Chat-Widget-Skript

  • iat: *Zeitnah ausgestellt.

  • exp: *Ablauf (maximal 10 Minuten).

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

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

payload = {
'sub': widgetId, // don't add single quotes, such as 'widgetId'
'iat': datetime.utcnow(),
'exp': datetime.utcnow() + timedelta(seconds=JWT_EXP_DELTA_SECONDS)
}

header = {
'typ': "JWT",
'alg': 'HS256'
}

encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm=JWT_ALGORITHM, headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
                

Chat-Widget-Skript

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.

1. Ein Beispiel dafür, wo Sie Ihre WidgetID finden können.

Wenn Ihre Website geladen wird, sehen Kunden zuerst das Symbol „Chat starten“. Wenn sie dieses Symbol wählen, wird das Chat-Widget geöffnet und Kunden können eine Nachricht an Ihre Agenten senden.

Um jederzeit Änderungen am Chat-Widget vorzunehmen, wählen Sie Bearbeiten.

Anmerkung

Gespeicherte Änderungen aktualisieren das Kundenerlebnis in wenigen Minuten. Bestätigen Sie Ihre Widget-Konfiguration, bevor Sie sie speichern.

Um Änderungen an Widget-Symbolen auf der Website vorzunehmen, erhalten Sie einen neuen Codeausschnitt, mit dem Sie Ihre Website direkt aktualisieren können.

Erhalten Sie Fehlermeldungen?

Wenn Sie auf Fehlermeldungen stoßen, finden Sie weitere Informationen unterUntersuchen Sie häufig auftretende Probleme beim Hinzufügen einer Chat-Benutzeroberfläche zu Ihrer Website.

Weitere Anpassungen für Ihr Chat-Widget

Weitere Informationen zur Anpassung des Chat-Erlebnisses finden Sie in den folgenden Themen:

• Passen Sie das Startverhalten und das Schaltflächensymbol des Widgets an

• Übergeben Sie den Anzeigenamen des Kunden, wenn ein Chat initialisiert wird

• Übergeben Sie Kontaktattribute, wenn ein Chat initialisiert wird

• Aktiviere „Nachricht zugestellt“ und „Empfangsbestätigungen gelesen“ in deiner Chat-Benutzeroberfläche