20.7 Verbinden Sie Ihren Chat mit Facebook Messenger.

FB_Messenger_logo

In dieser Übung verwenden Sie die Facebook-Desktop-Site, um Ihren Chat-Bot mit Facebook Messenger zu verbinden, sodass Sie Zugriff auf ein Facebook-Konto benötigen.

20.7.1 Facebook-Seite erstellen

Nachdem Sie sich bei Ihrem Facebook-Konto angemeldet haben, wählen Sie das Symbol + oben rechts im Bildschirm aus.

FB_Plus_btn

Dadurch wird eine Dropdown-Liste Erstellen mit verschiedenen Optionen angezeigt.

FB_Homepage

Wählen Sie Seite aus.

FB_Create_Page_btn

Jetzt haben Sie die Möglichkeit, Ihre Seiteninformationen wie Seitenname, Kategorie, Beschreibung usw. einzugeben. Bitte füllen Sie diese Felder nach Belieben aus. In diesem Beispiel haben wir jedoch Folgendes verwendet:

Angeforderte Informationen Erklärung Beispielantwort
Page Name ldap-fb-page idejong-fb-page
Kategorie [Industrie] Branchen- oder Geschäftstyp Einzelhandelsunternehmen
Beschreibung Beschreibung der Seite Meine facebook-Seite für Chat-Bot-Tests

FB_CreatePage_PageDetails

Klicken Sie nach Abschluss auf Seite erstellen.

FB_CreatePage_btn.png

Jetzt haben Sie die Möglichkeit, ein Profilbild und ein Titelbild in den linken Optionen hinzuzufügen. Sie können dies gerne tun, aber dies ist optional.

FB_CreatePage_PageDetails_addImgs

Sobald Sie mit den Seitendetails zufrieden sind, klicken Sie auf Speichern.

FB_Save_btn

Jetzt wird Ihnen die fertige Facebook-Seite angezeigt. Sie können Ihre neue Facebook-Seite nach Belieben aktualisieren und bearbeiten, aber für dieses Tutorial werden wir mit der Einrichtung des Chat-Bots fortfahren…

20.7.2 Erweiterte Nachrichten auf der Facebook-Seite konfigurieren

Auf der Startseite Ihrer neu erstellten Facebook-Seite wird auf der linken Bildschirmseite eine Liste der Optionen angezeigt.

FB_ManagePage_Nav

Wählen Sie Seiteneinstellungen am unteren Rand der Optionen aus.

FB_Pagesetting_btn

Hier können Sie viel Zeit damit verbringen, Ihre Facebook-Seite nach Belieben zu konfigurieren, aber für die Zwecke des Tutorials werden wir mit der Einrichtung des Chat-Bots fortfahren.

fb_pageSet_nav

Wählen Sie Erweiterte Messaging aus.

FB_AdvancedMessaging_btn

Scrollen Sie zu Allgemeine Einstellungen > Connected Apps. Sie sehen, dass keine Apps verbunden sind. Hier wird Stackchat aufgelistet, sobald wir unseren Chat mit der Stackchat-Benutzeroberfläche verbinden.

FB_GeneralSettings_ConnectedApps

20.7.3 Stackchat mit Facebook Messenger verbinden

Nachdem Ihre Facebook-Seite erstellt wurde, müssen wir jetzt Stackchat-Berechtigungen erteilen, um die Nachrichten zu verwalten, die an die Seite gesendet werden. Öffnen Sie Ihren Luma Bot in Stackchat Studio und klicken Sie im Bot-Menü auf die Schaltfläche Integrationen .

Stackchat_Integration_FB

Klicken Sie oben rechts auf die Schaltfläche Integration hinzufügen und wählen Sie Facebook Messenger aus.

Stackchat_Integration_FB

Klicken Sie auf die Schaltfläche Facebook-Berechtigungen verwalten .

Stackchat_Integration_FB

Es sollte ein Facebook-Anmeldemodul angezeigt werden. Andernfalls hat Ihr Browser das modale Popup blockiert. Überprüfen Sie, ob Warnhinweise vorhanden sind, und geben Sie Stackchat die Erlaubnis, Popups zu starten. Melden Sie sich bei Ihrem Facebook-Konto an.

Stackchat_Integration_FB

Wählen Sie alle Seiten aus, mit denen Sie einen Chat-Bot verbinden möchten. Stackchat speichert diese Seiten und gibt Ihnen die Möglichkeit, sie aus einer Liste auszuwählen. Drücken Sie die Schaltfläche Weiter , wenn Sie Ihre Seiten ausgewählt haben.

Stackchat_Integration_FB

Lassen Sie diese Berechtigungen unverändert. Drücken Sie einfach die Schaltfläche Fertig und dann die Schaltfläche OK.

Stackchat_Integration_FB

Das Modal wird geschlossen und Sie können jetzt die Facebook-Seite auswählen, mit der Sie Ihren Chat-Bot verbinden möchten.

Stackchat_Integration_FB

Drücken Sie die Schaltfläche Integration hinzufügen und Sie sind fertig!

20.7.4 Integration testen

Um mit der Demo zu beginnen, melden Sie sich bei Facebook an und navigieren Sie zur Facebook-Seite, die Sie in den vorherigen Schritten erstellt haben. Für dieses Tutorial verwenden wir unsere Demoseite Luma Retail.

Facebook_LumaRetail_HP

Da Sie Administrator dieser Seite sind, drücken Sie die Schaltfläche Als Besucher anzeigen .

Facebook_LumaRetail_viewasVisitor

Dadurch wird die Ansicht geändert und die Seite so dargestellt, als wären Sie ein Kunde

Facebook_LumaRetail_HP_cv

Drücken Sie die Schaltfläche Nachricht senden oben rechts.

Facebook_LumaRetail_sendMessage

Dadurch wird der Chatbot geöffnet, der jetzt von Stackchat unterstützt wird. Wenn Sie den Chat-Bot zum ersten Mal öffnen, werden Sie darüber informiert, dass nach Auswahl von Erste Schritte Luma Retail Ihre öffentlichen Informationen sehen wird

Facebook_LumaRetail_ChatBot_welcomeAnon

Wählen Sie Erste Schritte aus.

Facebook_LumaRetail_ChatBot_getstarted_btn

Sobald der ChatBot gestartet wurde, wird eine Willkommensnachricht angezeigt. Führen Sie den Fluss "Ich brauche Ideen" durch, wie wir es beim Web Messenger im vorherigen Abschnitt getan haben, um zu testen, ob die Konversation korrekt angezeigt wird.

Facebook_LumaRetail_ChatBot_Initial2

Als Nächstes sehen Sie, wie Luma Bot den Link zu seinen Richtlinien teilt und um Zustimmung bittet. Klicken Sie auf Ja , um fortzufahren.

Facebook_LumaRetail_ChatBot_optin

Senden Sie Ihre Demo-E-Mail, entweder die beim Testen des Web Messenger verwendete oder eine neue, um zu sehen, wie das Erlebnis aussieht, wenn Facebook der erste Touchpoint bei Luma wäre.

Facebook_LumaRetail_ChatBot_email-submit2

Luma Bot zeigt nun ein Karussell von Produkten an. Durchsuchen Sie die Produkte und klicken Sie auf das Herzsymbol, um ein Produkt Ihrer Wahl zu mögen. Ich habe schon immer ein paar Parachute Pants gefickt…

Facebook_LumaRetail_ChatBot_productLike

HINWEIS

Hot Tip! Die folgenden Befehle wurden heimlich in unseren Chat-Bot "gebacken":

  • /debug - Hiermit wird bestätigt, mit welcher AEP-Instanz der Chat-Bot derzeit verbunden ist
  • /reset - Ermöglicht es Ihnen, die Konversation von Grund auf neu zu starten

Sie können also jederzeit die Integration bestätigen oder die Konversation zurücksetzen. Wenn Sie neugierig sind, überprüfen Sie, ob Sie diese Suchbegriffkonfigurationen in der Studio-Benutzeroberfläche oder im CDML-Editor finden - sie werden mit regulären Ausdrücken konfiguriert!

Nachdem wir das Cora Parachute Pants-Produkt "gemocht"haben, können wir unseren E-Mail-Posteingang überprüfen, um zu bestätigen, dass unsere Journey in Übung 20.4 eingerichtet wurde und erfolgreich zugestellt wurde.

JO-E-Mail zugestellt

Als Nächstes werden wir sehen, wie wir die "Konversation" vor Ort fortsetzen können. Stellen wir uns nun vor, dass der Facebook Messenger-Chat, den wir gerade mit Luma hatten, unsere erste Interaktion mit dem Luma-Einzelhandel war und wir möchten sehen, wie das Erlebnis für einen erstmaligen Website-Besucher nach Interaktion mit dem Luma Bot auf Facebook aussieht. Navigieren Sie zur Luma-Website im Inkognito-Modus. Da es sich um ein neues Inkognito-Fenster handelt, müssen Sie Ihren ldap, Ihre Marke (Luma) wie gewohnt einstellen. Nachdem Sie Ihre neue Inkognito Luma-Website geöffnet haben, überprüfen Sie das Bedienfeld X-Ray , um zu bestätigen, dass Sie ein neuer Benutzer sind, d. h. keine Profilattribute oder Erlebnisereignisse.

web_incog-xray.png

Navigieren Sie zur Seite ANMELDEN/REGISTER und melden Sie sich mit der E-Mail an, die Sie im Facebook Messenger-Chat gesendet haben. Navigieren Sie nach der Anmeldung zurück zur Homepage und öffnen Sie das Bedienfeld X-Ray . Jetzt sollte Ihre Facebook-Interaktion unter den Erlebnisereignissen angezeigt werden.

web_xray-fb-interaction

Da die Website und Web Messenger jetzt Ihre erste Interaktion mit Facebook kennen, können wir die "Konversation" fortsetzen und die Benutzer bei Bedarf personalisieren. Sie haben die Konversation gerade von einem sozialen Kanal erweitert, im Gegensatz zu einem uninformierten Inkognito-Erlebnis.

Das ist alles! Sie haben nun die Facebook-Integration abgeschlossen und Facebook Messenger und Web Messenger getestet.

Als Nächstes sehen wir uns einen anderen sozialen Kanal an: WeChat

Nächster Schritt: 20.8 Testen der WeChat-Integration

Zurück zu Modul 20

Zu allen Modulen zurückkehren

Auf dieser Seite