20.6 Testen Sie Ihren Chat auf der Demo-Website

Mit dem Web Messenger Widget von Stackchat können Sie Ihren Luma-Bot zu Ihrer Luma Demo-Site hinzufügen. In diesem Abschnitt konfigurieren Sie die Integration in Stackchat Studio, erstellen das Website-Projekt und fügen dann das JavaScript zu Ihrer Luma Demo-Site hinzu, um den Echtzeit-Web-Chat zu aktivieren.

  • Die neueste Version von Node.js wurde installiert. Stellen Sie sicher, dass Sie Node v12 oder höher ausführen.
  • Neueste Version von Github für Desktop (oder nutzen Sie die Git-Kommandozeile, wenn Sie es bevorzugen)
  • AWS S3-Konto (oder eine andere Hostinglösung Ihrer Wahl) zum Hosten Ihres Luma Bot-Javascripts

20.6.1 Web-Messenger konfigurieren

Wenn Sie sich bei Stackchatangemeldet haben, navigieren Sie im Menü links zu Bots, wählen Sie Ihren Luma Bot und klicken Sie dann auf die Schaltfläche Integrationen im Bot Menü. Klicken Sie nun auf die Schaltfläche Verwalten für den Stackchat Web Messenger.

web_messenger_integration

Dann sehen Sie das. Tippen Sie auf die + -Schaltfläche neben der Eingabe im Feld Standard-Avatar-URL .

web_messenger_integration

Laden Sie zuerst das folgende Bild auf Ihren Computer herunter:

Adobe_AEP_logo

Laden Sie es dann im Popup-Fenster in Stackchat Studio hoch:

Adobe_AEP_logo

Klicken Sie abschließend auf Hochladen.

Adobe_AEP_logo

Führen Sie nun dasselbe für das Feld "Schaltflächensymbol-URL"aus (oder kopieren Sie einfach die neue URL aus dem vorherigen Feld und fügen Sie sie ein). Lassen Sie die anderen Felder in Ruhe.

web_messenger_integration

Wählen Sie die Registerkarte " Marke "und laden Sie dasselbe Bild für das Feld "Geschäftssymbol-URL"hoch (oder kopieren Sie einfach die URL aus dem vorherigen Feld).

Verwenden Sie für die Felder Markenfarbe und Konversationsfarbe den Wert F3793B. Verwenden Sie für das Feld Aktionsfarbe den Wert 26A9E0.

Sie sollten jetzt Folgendes haben:

ui_messenger_brand-crunch2

Wählen Sie die Registerkarte " Erste Grüße "und fügen Sie dem ersten Meldungsfeld den folgenden Text hinzu:

Sind Sie bereit, loszulegen?

Fügen Sie dann dem ersten Feld für die Schnellantwort den folgenden Text hinzu:
Lass uns gehen! 🚀

Wenn Sie neugierig sind, öffnen Sie den Bot Builder, bearbeiten Sie Ihre CDML und führen Sie eine Suche nach dem Begriff Let's go!! 🚀. Sie werden sehen, dass es als Suchbegriff im Begrüßungsablauf konfiguriert wurde. Hier navigiert Luma Bot zu Benutzern, die diese schnelle Antwort wählen.

Klicken Sie auf Integration aktualisieren , um Ihre Änderungen zu speichern.

web_messenger_integration

Nach dem Speichern öffnen Sie das Web Messenger Widget und Vorschau der Luma-Branding, das jetzt angezeigt wird!

web_messenger_integration

Sie sehen jedoch, dass die Schnellantwort, die Sie auf der Registerkarte " Erste Grüße "konfiguriert haben, nicht angezeigt wird. Dies liegt daran, dass es nur von neuen Benutzern gesehen wird.

Klicken Sie zum Testen auf die Schaltfläche Übersicht im Bot-Menü und klicken Sie dann oben rechts auf die Schaltfläche Freigeben .

web_messenger_integration

Klicken Sie auf die Schaltfläche Link kopieren .

web_messenger_integration

Öffnen Sie dann ein neues inkognito-Fenster und fügen Sie die kopierte URL ein.

web_messenger_integration

Sie sollten nun sehen, dass Ihre erste Begrüßung für eine schnelle Antwort angezeigt wird. Klicken Sie darauf und sehen Sie, wie Ihr Luma Bot Sie zu Ihrem Begrüßungs -Fluss führt.

web_messenger_integration

Ihr Web-Messenger ist jetzt bereit, in Ihre Luma Demo-Site eingebettet zu werden!

20.6.2 Hinzufügen den Web Messenger auf Ihrer Demo-Site

Gehen Sie zurück zum Visual Studio-Code-Editor.

Nach dem Öffnen navigieren Sie zum ./web-messenger Ordner.

vs_web-messanger-folder.png

Öffnen Sie ein Terminal (Ansicht -> Terminal).

demo

Geben Sie den Befehl cd web-messenger ein und klicken Sie auf enter.

demo

Führen Sie den Befehl npm i aus, um die Projektabhängigkeiten zu installieren.

demo

Nehmen Sie sich einen Moment Zeit, um den Ordner src des Projekts zu erkunden. Im Folgenden finden Sie eine Aufschlüsselung der beiden Ordner:

  • luma-api: Logik zum Abrufen von Luma-Markeninformationen aus der Demo-API
  • Messenger: Logik zur Instanziierung des Web-Messenger und Anpassung dieses

demo

Bevor wir das Projekt erstellen und testen, muss die Konfiguration mit der App-ID Ihres Bots aktualisiert werden.

Gehen Sie zu Stackchat Studio, navigieren Sie zu Ihrem Luma Bot und klicken Sie im Bot-Menü auf Integrationen . Klicken Sie auf die Schaltfläche Verwalten für Web Messenger.

demo

Kopieren Sie im Web Messenger-Bildschirm die App-ID:

demo

Wechseln Sie nun zurück zum Visual Studio-Code, öffnen Sie die Konfigurationsdatei: src/messenger/config.ts und fügen Sie dem config-Objekt in Zeile 4 Ihren App-ID-Wert hinzu. Vergewissern Sie sich, dass es sich um eine Zeichenfolge handelt, z. B. in Zitaten:

appId: null, // Replace this null value with your Luma bot's App Id! e.g "k9s9xxxxxx"

In diesem Beispiel lautet die App-ID "ctduc8z4hn6x03", daher sollte die aktualisierte Zeile 4 jetzt wie folgt aussehen:

appId: "ctduc8z4hn6x03", // Replace this null value with your Luma bot's App Id! e.g "k9s9xxxxxx"

demo

Speichern Sie Ihre Änderungen in der Konfigurationsdatei. Jetzt können Sie Ihr Projekt erstellen und testen. Öffnen Sie das Terminal (Ansicht -> Terminal) und führen Sie den Befehl build aus:

npm run build

Mit diesem Befehl wird WebPack ausgeführt, das so konfiguriert wurde, dass das TypeScript-Projekt in eine einzige mit Browsern kompatible JavaScript-Datei kompiliert wird.
Der Build sollte erfolgreich abgeschlossen werden:

demo

Ihr Projekt verfügt nun über einen dist -Ordner, der von Webpack generiert wurde. Es enthält eine Datei mit dem Namen bundle.js. Sie müssen diese Datei im nächsten Schritt hosten, damit sie von der Demo-Website aufgerufen werden kann.

20.6.3 JavaScript-Datei hosten

Um Ihren Luma Bot auf die Demo-Site zu bringen, müssen Sie Ihre bundle.js -Datei irgendwo hosten und öffentlich zugänglich machen. In Übung 5.1 - Einrichten eines AWS S3-Behälters haben Sie bereits einen AWS-Behälter eingerichtet, den wir nutzen können.

Melden Sie sich bei Ihrem AWS S3-Konto an: https://console.aws.amazon.com/s3. Da diese Datei öffentlich verfügbar sein muss, erstellen wir einen neuen Behälter. Klicken Sie auf Behälter erstellen.

demo

Benennen Sie den Bucket aepmodule20LDAP, z. B. aepmodule20vangeluw , und wählen Sie den gewünschten Bereich aus.

demo

Blättern Sie nach unten, bis die Behältereinstellungen für "Öffentlichen Zugriff sperren"angezeigt werden.

  • Deaktivieren Sie das Kontrollkästchen für Zugriff sperren für alle öffentlichen Benutzer
  • Markieren Sie das Kontrollkästchen, damit ich die aktuellen Einstellungen bestätigt…

Sie sollten jetzt eine ähnliche Ansicht haben:

demo

  • Klicken Sie erneut auf Weiter , um die Einstellungen für Name und Region beizubehalten.
  • Deaktivieren Sie im Abschnitt Optionen konfigurieren die Option Blockieren des gesamten öffentlichen Zugriffs. Dadurch wird eine Bestätigungserklärung eingeblendet, die bestätigt, dass alles in diesem Behälter öffentlich zugänglich ist. Markieren Sie das zu bestätigende Kästchen und klicken Sie dann auf Weiter

s3_bucket-setpermissions

Blättern Sie nach unten und klicken Sie auf Behälter erstellen.

Nun wird Ihr neuer Behälter erstellt, klicken Sie darauf, um ihn zu öffnen.

demo

Dann sehen Sie das.

demo

Klicken Sie auf Hochladen. Dann sehen Sie Folgendes:

s3_bundlefile-review

Klicken Sie auf Hinzufügen Dateien, navigieren Sie zur Datei " bundle.js "und wählen Sie sie aus.

s3_bundlefile-overview

Sie sehen das jetzt. Blättern Sie nach unten auf ein, klicken Sie auf das Feld Ziel und aktivieren Sie das Kontrollkästchen, damit ich bestätigen kann, dass vorhandene Objekte mit demselben Namen überschrieben werden.

demo

Blättern Sie nach unten und klicken Sie auf Hochladen.

demo

Dann sehen Sie das. Klicken Sie auf den Dateinamen bundle.js.

demo

Sie sollten jetzt die Übersichtsdetails der Datei, einschließlich einer Objekt-URL, Ansicht haben. Kopieren Sie diese URL, da Sie diese im nächsten Schritt benötigen. Klicken Sie auf die Schaltfläche Als öffentlich einstellen.

s3_bundlefile-overviewdetails

Sie haben Ihre bundle.js -Datei jetzt erfolgreich gehostet. Im nächsten Schritt müssen Sie die Objekt-URL im Bildschirm " Konfigurations-ID aktualisieren"einfügen.

20.6.4 Aktualisierung der Konfigurations-ID der Demo-Site

Um sicherzustellen, dass die Demo-Site Ihren Luma-Chatbot lädt, müssen Sie Ihre Konfigurations-ID Ihrer Demo-Website aktualisieren, um Folgendes einzuschließen:

  • Stackchat bundle.js JavaScript-URL, die Sie soeben über Ihren S3-Behälter erstellt haben
  • Journey Orchestration-Ereignis-ID, um die Reise auszulösen, die Sie in Übung 20.4eingerichtet haben.

Rufen Sie die Seite https://public.aepdemo.net/admin_configuration_update.html in einem neuen, sauberen Fenster auf. Dann sehen Sie Folgendes:

demo

Geben Sie Ihre Konfigurations-ID ein und klicken Sie auf die Schaltfläche Konfiguration laden . Dann haben Sie Folgendes:

demo

Blättern Sie nach unten, bis Sie die Felder EventID - Stackchat Journey und Stackchat Chatbot Tag sehen.

demo

Ersetzen Sie den Wert " EventID - Stackchat Journey "(leer) durch Ihre in Übung 20.4.1 erstellte OrchesterereignisID und ersetzen Sie den aktuellen Wert " Stackchat-Tag "durch die Objekt-URL der gehosteten Datei " bundle.js", die die im vorherigen Schritt erstellte AWS S3-Objekt-URL.

demo

Blättern Sie nach unten und klicken Sie auf die Schaltfläche Konfigurations-ID aktualisieren. Du bist jetzt bereit zu testen!

demo

20.6.5 Führen Sie ein Demo-Szenario durch

Go to https://public.aepdemo.net/. Geben Sie Ihre Konfigurations-ID ein und klicken Sie auf Konfiguration laden. Wählen Sie dann Ihr LDAP und dann Ihre Marke aus. Wählen Sie die Marke Luma.

Wenn Sie dann die Luma Homepage erreichen, sehen Sie, wie Ihr Chatbot geladen wird und das Symbol unten rechts auf dem Bildschirm angezeigt wird.

demo

Gehen Sie zuerst zu ANMELDEN/REGISTER, füllen Sie Ihre persönlichen Daten aus und erstellen Sie ein neues Konto.

demo

Sie sehen dann, dass der Chatbot Ihren Vornamen im Aktionsaufruf verwendet:

demo

Dies kann erreicht werden, indem Benutzerinformationen an Nachrichtenmetadaten im beforeSend -Delegaten in der Datei helper.ts angehängt werden, sodass der Chatbot nicht nach bereits bekannten Informationen fragen muss. Weitere Informationen zu Nachrichtenmetadaten finden Sie hier.

Öffnen Sie das Chat-Widget und klicken Sie auf Lasst uns gehen!.

demo

Dann sehen Sie das. Wählen Sie als Nächstes das Menüelement Ich benötige Ideen .

demo

Dann sehen Sie, dass Luma-Produkte im Chatbot angezeigt werden.

demo

Klicken Sie anschließend auf die Schaltfläche ❤️ für einige Produkte, um die angezeigten Ereignis zu generieren und Ihre Reise in die Journey Orchestration zu starten.

demo

Einige Sekunden später sollten Sie eine E-Mail von Adobe Experience Platform und Journey Orchestration mit einer Promotion für den Artikel erhalten, den Sie gerade mögen.

demo

Die nächste Frage im Chatbot ist, ob es Ihnen etwas ausmacht, Feedback zu Ihrem Chat-Erlebnis zu geben. Klicken Sie auf Sicher.

demo

Treffen Sie Ihre Wahl, in diesem Fall ist die Wahl groß.

demo

Klicken Sie auf Herzlichen Glückwunsch!

demo

Geben Sie Ihr zusätzliches Feedback ein und klicken Sie auf Senden.

demo

Öffnen Sie abschließend das Röntgen-Bedienfeld und klicken Sie auf die Schaltfläche "Aktualisieren". Anschließend sehen Sie, wie die Ansicht Ihres Produkts im Röntgen-Bedienfeld angezeigt wird.

demo

Ihr Web-Messenger-Chatbot funktioniert jetzt einwandfrei. Verbinden wir nun Ihren Chat mit Facebook Messenger.

Nächster Schritt: 20.7 Verbinden Sie Ihren Chat mit Facebook Messenger

Zurück zu Modul 20

Zurück zu allen Modulen

Auf dieser Seite