Den Facebook-Chat in 2 Schritten in Deine Webseite einbauen

Der Facebook-Chat ermöglicht Dir und Deiner Kundschaft eine schnelle und direkte Möglichkeit der Kommunikation. Wie Du den Chat in 2 einfachen Schritten unter Berücksichtigung des Datenschutz in Deine Webseite einbauen kannst, zeigt Dir dieses Tutorial.

Wenn Du stolzer Besitzer:in einer Facebook-Seite bist, hast Du die Möglichkeit über die Business Suite den Facebook-Chat auf Deiner Seite zu integrieren. Im wesentlichen ist das der Facebook Messenger mit seinen ganzen Funktionen. Für Deine Kundschaft ist das optimal, weil viele den Messenger bereits nutzen. Für diejenigen, die sich Facebook verweigern, gibt im Facebook Chat seit letztem Jahr auch die Möglichkeit ohne Account zu schreiben. Allerdings bedeutet Facebook auch immer Datenschutz. Was Du dafür tun musst, damit der Facebook-Chat datenschutzkonform in Deine Seite eingebunden werden kann, erkläre ich Dir in diesem Tutorial.

Der Facebook-Chat in 5 Minuten

Die Einstellungen des Facebook-Chats erreichst Du unter https://business.facebook.com/latest/inbox/chat_plugin. Dort kannst Du allerhand Einstellungen machen. Das betrifft sowohl das Erscheinungsbild, wie auch vorbereitete Fragen und Antworten, die den Start Deiner Kundschaft mit Deiner Seite oder Unternehmen erleichtern.

Über den Button Einrichten, startest Du den Assistenten, der in 4 Schritten alles für dich erstellt, so dass Du hinterher nur noch ein Code-Schnipsel in deine Webseite eintragen musst. Für WordPress gibt es auch ein fertiges Plugin, welches dir auch diesen Schritt abnimmt. Das Crux an der Sache ist, dass direkt bei Aufruf der Seite, Daten von und zu Facebook übertragen werden. Das ist laut der DSGVO nicht mehr zulässig. Ein Webseitenbetreiber muss in solchen Fällen erst um Erlaubnis fragen. Eine Lösung wäre ein Cookie-Banner, aber bei eher kritischen Diensten wie Facebook ist eine gezielte Einwilligung, wenn der Besucher oder die Besucherin zum ersten Mal auch das Chat-Icon klickt, nutzerfreundlicher.

Vorgehensweise aus Nutzersicht

Ein Besucher:in kommt auf Deine Webseite und sieht das Chat-Icon. Nach einem Klick auf dieses Icon, welches nur ein Icon ist, ohne dass weitere Skripte nachgeladen wurden, wird dem Besucher:in ein PopUp angezeigt, in dem die Möglichkeit besteht den Chat zu aktivieren. Mit der Aktivierung wird ein Session-Cookie geschrieben, die Skripte von Facebook geladen und der Chat aktiviert. Bei einem späteren Aufruf der Seite in der derselben Browser-Session wird der Chat automatisch gestartet, denn der Besucher:in hat für die aktuelle Session schon zugestimmt. Das Session-Cookie wird beim Beenden des Browsers automatisch gelöscht und beim nächsten Besuch der Webseite wird der Besucher:in erneut um Zustimmung gebeten.

Demo, wie der Ablauf aus Sicht des Benutzers oder der Benutzerin ist.

Was brauchst Du dafür alles?

Da wir für die Integration des Facebook-Chat etwas Javascript, CSS und PHP brauchen, benötigst Du ein Child Theme. Wie Du das anlegen kannst, habe ich in diesem Tutorial beschrieben. Hilfreich ist auch ein Plugin, mit welchen Du ein PopUp erstellen kannst. Ich nutz dafür den PopUp-Maker in der kostenlosen Version. In diesem Tutorial nutze ich allerdings anstatt eines PopUps einen einfachen Abfragedialog, das vereinfacht das Tutorial etwas. Hinweise zur Verwendung des PopUp-Makers findest Du aber am Ende des Tutorials. Und letztendlich solltest Du wie oben beschrieben den Facebook-Chat bereits konfiguriert haben.

Schritt 1: Chat-Icon bereitstellen

Der Besucher, die Besucherin sieht als erstes nur ein Chat-Icon. Das fügen wir als als erstes ein. Hierfür bietet sich es an, dass Icon als SVG-Symbol bereitzustellen. SVG-Symbole sind zuerst unsichtbar in der Seite und können an beliebigen Stellen referenziert werden. Damit Du die Seiten-Templates des Themes nicht anpassen müssen, nutzen wir den generate_before_footer Hook von WordPress. Damit fügen wir automatisch das SVG-Symbol zu jeder Seite hinzu. Am besten bewerkstelligst Du das, in dem Du das folgende Code-Snippet in die functions.php Deines Child-Themes hinzufügst:

add_action( 'generate_before_footer', function() { echo ' <svg style="display: none"> <defs> <symbol id="icon-facebook-chat" viewBox="0 0 60 60"><g stroke="none" stroke-width="2" fill="none" fill-rule="evenodd"><g><circle fill="#384545" cx="30" cy="30" r="30"></circle><svg x="10" y="10"><g transform="translate(0.000000, -10.000000)" fill="#FFFFFF"><g id="logo" transform="translate(0.000000, 10.000000)"><path d="M20,0 C31.2666,0 40,8.2528 40,19.4 C40,30.5472 31.2666,38.8 20,38.8 C17.9763,38.8 16.0348,38.5327 14.2106,38.0311 C13.856,37.9335 13.4789,37.9612 13.1424,38.1098 L9.1727,39.8621 C8.1343,40.3205 6.9621,39.5819 6.9273,38.4474 L6.8184,34.8894 C6.805,34.4513 6.6078,34.0414 6.2811,33.7492 C2.3896,30.2691 0,25.2307 0,19.4 C0,8.2528 8.7334,0 20,0 Z M7.99009,25.07344 C7.42629,25.96794 8.52579,26.97594 9.36809,26.33674 L15.67879,21.54734 C16.10569,21.22334 16.69559,21.22164 17.12429,21.54314 L21.79709,25.04774 C23.19919,26.09944 25.20039,25.73014 26.13499,24.24744 L32.00999,14.92654 C32.57369,14.03204 31.47419,13.02404 30.63189,13.66324 L24.32119,18.45264 C23.89429,18.77664 23.30439,18.77834 22.87569,18.45674 L18.20299,14.95224 C16.80079,13.90064 14.79959,14.26984 13.86509,15.75264 L7.99009,25.07344 Z"></path></g></g></svg></g></g></symbol> </defs> </svg> '; });
Code-Sprache: PHP (php)

In den Zeilen 3-7 wird das SVG-Symbol erzeugt und dem HTML Deiner Seite automatisch hinzugefügt. Damit das Icon auch rechts unten schwebend dargestellt wird, benötigen Du etwas CSS, dass am besten der style.css in Deinem Child-Theme hinzugefügt wird. Das CSS sorgt dafür dass das Symbol mitscrollt und immer unten rechts sichtbar ist. Zusätzlich schwebt es über allen anderen Elementen, so dass es nicht verdeckt wird.

.facebook-chat-without-consent{ position: fixed; bottom: 24px; right: 24px; z-index: 1999999998; display: none; } .icon-facebook-chat{ width: 60px; height: 60px; }
Code-Sprache: CSS (css)

Schritt 2: JavaScript bereitstellen, damit der Chat nachgeladen werden kann

Den größten Teil der Arbeit übernimmt ein kleines JavaScript, welches überprüft, ob der Benutzer:in bereits eine Zustimmung in der aktuellen Browser-Session erteilt hat. In diesem Fall, kann der Facebook-Chat direkt geladen werden. Ansonsten wird nur das Chat-Icon angezeigt.

Das folgende JavaScript kannst Du in einer JavaScript-Datei in Deinem Child-Theme anlegen. Wie das geht, habe ich hier beschrieben.

(function($){ $(document).ready(function(){ /** * Handling for activation Facebook chat */ var enableChat = function(){ $(".site-main").append("<div id=\"fb-root\"></div><div id=\"fb-customer-chat\" class=\"fb-customerchat\"></div>"); var chatbox = document.getElementById('fb-customer-chat'); chatbox.setAttribute("page_id", "DEINE-PAGE_ID"); chatbox.setAttribute("attribution", "biz_inbox"); window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v12.0' }); FB.Event.subscribe('customerchat.load', function(){ $(".facebook-chat-without-consent").remove(); }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/de_DE/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); } var getCookieWithName = function(nameOfCookie){ const b = document.cookie.match('(^|;)\\s*' + nameOfCookie + '\\s*=\\s*([^;]+)'); return b ? b.pop() : ''; } if (getCookieWithName("consent_chat_activation")){ enableChat(); }else{ $(".site-main").append("<div class=\"facebook-chat-without-consent\"><svg class=\"icon-facebook-chat\"><use xlink:href=\"#icon-facebook-chat\"></use></svg></div>"); $(".facebook-chat-without-consent").css("display", "block"); $(".facebook-chat-without-consent").on("click", function(event){ event.preventDefault(); var giveConsent = confirm("Um den Chat zu starten, müssen Daten von und zu Facebook übertragen werden. Beachte auch meine Datenschutzerklärung hierzu."); if (giveConsent){ document.cookie = "consent_chat_activation=1"; enableChat(); } }); } }); })(jQuery);
Code-Sprache: JavaScript (javascript)

Das ist eine ganze Menge JavaScript-Code. Aber wir lösen die einzelnen Sachen in den folgenden Abschnitten auf. Dazu beginnen wir mit Zeile 41-49. Hier wird der Fall abgearbeitet, wenn der Benutzer:in noch keine Zustimmung erteilt hat. In Zeile 41 wird dazu am Ende des Inhalts der Seite das nötige HTML für das SVG-Icon erzeugt und das Icon angezeigt. Zusätzlich wird ein Event-Handler in Zeile 43 erzeugt, der den Abfragedialog anzeigt und im Falle einer Bestätigung den Consent-Cookie schreibt und den Chat aktiviert (Zeile 47 und 48).

Als nächstes schauen wir uns an, wie der Chat aktiviert wird. Im Wesentlichen ist das derselbe Javascript-Code, den Dir Facebook auch bei der Einrichtung anbietet (Zeile 7 – 31). In Zeile 10 musst Du nur den Platzhalter mit Deiner Page-ID ersetzen. Die findest Du in dem JavaScript-Code von Facebook.

Und nun etwas zum Cookie, der hier erzeugt wird. Das ist ein Session-Cookie, der nach Beendigung der Browser-Session automatisch gelöscht wird. Diese Art von Cookies sind nicht zustimmungspflichtig und können einfach so verwendet werden. Die einzige Information, die dieser Cookie enthält, ist die Zustimmung, dass der Chat gestartet werden kann. Das fragt das Skript in Zeile 38 ab und nutzt dazu die Funktion aus Zeile 33 – 36.

Das ist schon alles. Danach ist das komplette Handling ohne weitere Plugins oder externe Skript implementiert. Grundsätzlich funktioniert dieses Verfahren auch für andere Dienste, die Du in Deine Seite aktivieren willst, aber vorher eine explizite Zustimmung der Besucher bzw. der Besucherinnen benötigt.

Bonus: Abfrage mit einem PopUp

Der einfache Abfragedialog hat viele Vorteile aber auch den Nachteil, dass der Gestaltungsspielraum sehr eng gesetzt ist. Du kannst nur Text hinzufügen und nicht auf Deine Datenschutzerklärung verlinken. Außerdem passt das Design nicht immer zu dem Design Deiner Seite. Das ist ein Grund, warum ein PopUp eine Alternative sein kann.

Ich habe den PopUp-Maker in der kostenlosen Version dazu verwendet, um ein PopUp zu erstellen. Um das zu realisieren musst Du 3 Dinge noch zusätzlich tun.

1. Cookie konfigurieren

Im PopUp-Maker kannst Du definieren, dass bei der Existenz eines bestimmten Cookies das PopUp nicht mehr angezeigt wird. Das kannst Du nutzen und unser Cookie mit dem Namen consent_chat_activation konfigurieren. Als Ereignis wählst Du manuell, denn Du schreibst das Cookie bereits in deinem JavaScript-Code.

2. Auslöser

Das PopUp muss natürlich wissen, wann es aktiviert werden soll und bei welchem Cookie es unterdrückt werden soll. Als Auslöser kannst Du den CSS-Selektor .facebook-chat-without-consent verwenden. Dieser Selektor ist dem Container für das SVG-Icon zugeordnet. Zusätzlich wählst Du das eben konfigurierte Cookie aus, um zu verhindern, dass das PopUp aktiviert wird, wenn dieses Cookie existiert.

3. JavaScript anpassen

Jetzt musst Du nur noch das JavaScript etwas anpassen. Ich habe Dir hier nochmal das ganze JavaScript kopiert und dir die Änderungen markiert.

(function($){ $(document).ready(function(){ /** * Handling for activation Facebook chat */ var enableChat = function(){ $(".site-main").append("<div id=\"fb-root\"></div><div id=\"fb-customer-chat\" class=\"fb-customerchat\"></div>"); var chatbox = document.getElementById('fb-customer-chat'); chatbox.setAttribute("page_id", "DEINE-PAGE_ID"); chatbox.setAttribute("attribution", "biz_inbox"); window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v12.0' }); FB.Event.subscribe('customerchat.load', function(){ $(".facebook-chat-without-consent").remove(); }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/de_DE/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); } var getCookieWithName = function(nameOfCookie){ const b = document.cookie.match('(^|;)\\s*' + nameOfCookie + '\\s*=\\s*([^;]+)'); return b ? b.pop() : ''; } $(".write-consent-cookie").on("click", function(event){ event.preventDefault(); document.cookie = "consent_chat_activation=1"; enableChat(); }); if (getCookieWithName("consent_chat_activation")){ enableChat(); }else{ $(".site-main").append("<div class=\"facebook-chat-without-consent\"><svg class=\"icon-facebook-chat\"><use xlink:href=\"#icon-facebook-chat\"></use></svg></div>"); $(".facebook-chat-without-consent").css("display", "block"); } }); })(jQuery);
Code-Sprache: JavaScript (javascript)

In Deinem PopUp benötigst Du einen Link oder Button, den der Benutzer oder die Benutzerin betätigen kann, um zuzustimmen. Bei mir hat der Button die CSS-Klasse write-consent-cookie. In Zeile 38 – 42 findest Du den Handler dafür. Bei einem Klick auf den Button, wird das Cookie geschrieben und der Chat gestartet.

Du kannst auch eine Menge Code löschen. Alles ab Zeile 49 ist nun überflüssig geworden.

Zu guter Letzt

Mit einigen Handgriffen ist es auch möglich, datenhungrige Dienste wie Facebook in die eigene Webseite zu integrieren. Denn die Dienste, die Facebook für KMUs anbieten, sind gar nicht so schlecht. Wenn Du Deine Kunden auf Facebook findest, ist die Integration des Chats auf jeden Fall eine gute Sache.

Nutzt Du bereits den Facebook-Chat auf Deiner Seite oder planst es? Schreib mir doch einen Kommentar dazu. Ich freue mich.

Schreibe einen Kommentar

Das könnte Dich auch interessieren

Welches WordPress passt zu mir?

WordPress com oder org – welches passt zu mir?

Von WordPress gibt es eine freie und eine kommerzielle Variante. Doch was sind die Unterschiede ...
Weiterlesen …
Perfekte Bilder in WordPress

Perfekte Bilder in WordPress

Bilder sagen mehr als 1000 Worte. Wie Du mit Bildern in WordPress umgehen kannst, beschreibt ...
Weiterlesen …
Was kann ein Child Theme in WordPress überhaupt alles?

Was kann ein Child Theme in WordPress überhaupt alles?

Ein Child Theme in WordPress ermöglicht es Dir, dass aktive Theme zu erweitern und zu ...
Weiterlesen …