Hinzufügen eine Chat-Benutzeroberfläche zu einer Website

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.

Themen

• Unterstützte Widget-Snippet-Felder
• Unterstützte Browser
• Schritt 1: Anpassen Ihres Kommunikations-Widgets
• Schritt 2: Angeben der Website-Domains an, auf denen das Kommunikations-Widget angezeigt werden soll
• Schritt 3: Bestätigen und Kopieren des Kommunikations-Widget-Codes und der Sicherheitsschlüssel
• Werden Fehlermeldungen angezeigt?
• Weitere Anpassungen für Ihr Kommunikations-Widget
• Anpassen des Startverhaltens und des Schaltflächensymbols für das Widget
• Übergeben des Anzeigenamens des Kunden, wenn ein Chat gestartet wird
• Übergeben von Kontaktattributen, wenn ein Chat initialisiert wird
• Alternative Methode: Übergeben Sie Kontaktattribute direkt aus dem Snippet-Code
• Zusätzliche Chat-Anpassungen
• Chat-Transkript herunterladen
• Passen Sie den Chat mit dem Open-Source-Beispiel von Amazon Connect an
• Starten Sie Chats in Ihren Anwendungen mithilfe von Amazon Connect APIs
• Senden Sie Browser-Benachrichtigungen an Kunden, wenn Chat-Nachrichten eintreffen
• Übergeben Sie benutzerdefinierte Eigenschaften, um die Standardeinstellungen im Kommunikations-Widget zu überschreiben
• Fügen Sie einer Amazon Connect Connect-Website eine Chat-Benutzeroberfläche hinzu

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 Browser-Benachrichtigungen 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://aninstance name.my.connect.aws/. Wählen Sie Kommunikations-Widget anpassen.

   

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.

   

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.

   

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.

   

Schaltflächenstile

1. Wählen Sie die Farben für den Schaltflächenhintergrund aus, indem Sie Hex-Werte (Farbcodes) eingeben. HTML

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 ein URL Banner aus einem Amazon S3 S3-Bucket oder einer anderen Online-Quelle in Ihr Logo 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.

2. • 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. Die Standardeinstellung 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 Agenten: Wählen Sie die Farben für die Nachrichtenblasen des Agenten aus, indem Sie Hexadezimalwerte (HTMLFarbcodes) eingeben.

4. Farbe der Chat-Blase für Kunden: Wählen Sie die Farben für die Nachrichtenblasen des Kunden aus, indem Sie Hexadezimalwerte (HTMLFarbcodes) 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.

   

   Wichtig

   • Vergewissern Sie sich, dass Ihre Website URLs gültig ist und keine Fehler enthält. Geben Sie den vollständigen Text an, der mit https://URLbeginnt.

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

2. Wir empfehlen, unter Sicherheit für Ihr Kommunikations-Widget hinzufügen die Option Ja auszuwählen und mit Ihrem Website-Administrator zusammenzuarbeiten, um Ihre Webserver so einzurichten, dass sie JSON Web-Token (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.

   

   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-Token (JWTs) erstellen können.

   • Amazon Connect fügt dem Einbettungsskript für das Kommunikations-Widget eine Rückruffunktion hinzu, die nach einem JSON Web-Token (JWT) 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 Webseitenadministrator, Ihre Webserver so einzurichten, dass sie JWTs mit diesem Sicherheitsschlüssel ausgeben.

3. Wählen Sie Save (Speichern) aus.

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 Web-Token von Ihrem Webserver 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.

Wenn Ihre Kunden mit dem Chat-Symbol auf Ihrer Website interagieren, fordert das Kommunikations-Widget Ihren Webserver nach einemJWT. Wenn dies bereitgestellt JWT wird, nimmt das Widget es dann 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 die von Ihrem Webserver ausgestellt JWT wurde, und Amazon Connect leitet die Chat-Anfrage an Ihre Contact-Center-Agenten weiter.

JSONEinzelheiten zu Web-Tokens

• Algorithmus: HS256

• Claims:

  • Sub: widgetId

    Ersetze es widgetId durch dein eigeneswidgetId. Um Ihren zu findenwidgetId, sehen Sie sich das Beispiel unter anSkript für das Kommunikations-Widget.

  • 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. StartChatContactAPI

  • Attribute (optional): Objekt mit string-to-string Schlüssel-Wert-Paaren. Die Kontaktattribute müssen den Einschränkungen entsprechen, die von der festgelegt wurden. StartChatContactAPI

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

Der folgende Codeausschnitt zeigt ein Beispiel für die Generierung von a 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), 
'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "[e-mail]", "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.

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.

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 Fügen Sie einer Amazon Connect Connect-Website eine Chat-Benutzeroberfläche hinzu.

Weitere Anpassungen für Ihr Kommunikations-Widget

Weitere Informationen zum Anpassen der Chat-Umgebung finden Sie in den folgenden Themen:

• Anpassen des Startverhaltens und des Schaltflächensymbols für das Widget

• Übergeben des Anzeigenamens des Kunden, wenn ein Chat gestartet wird

• Übergeben von Kontaktattributen, wenn ein Chat initialisiert wird

• Aktiviere zugestellte und gelesene Benachrichtigungen für Chat-Kunden