Wenn Sie vor ein paar Jahren nach Möglichkeiten gesucht haben, eine Live-Chat-Anwendung in Ihre Website zu integrieren, mussten Sie wahrscheinlich ein großes und kompliziertes Plugin oder sogar eine spezielle Anwendung installieren, die Ihnen Kopfschmerzen bereiten würde.
Jetzt gibt es eine intelligente Alternative zu Live-Chat-Anwendungen – Sie können Facebook Messenger in Ihre WordPress-Website integrieren. Und Sie können das in weniger als 5 Minuten selbst tun!
Es gibt allerdings eine Voraussetzung. Um einen Facebook-Messenger-Chat in Ihre Website einzubinden, müssen Sie eine Art Facebook-Seite haben. Und warum? Weil die häufigste Verwendung eines Chats auf einer Website darin besteht, den Kunden die Kommunikation mit Ihrem Unternehmen zu erleichtern. Sie haben also wahrscheinlich sowieso schon eine Facebook-Seite für Ihr Unternehmen.
Wie man den Messenger-Chat in eine WordPress-Website integriert
Erster Schritt – Bereiten Sie Ihre WordPress-Website vor
Das erste, was Sie brauchen, wenn Sie den Messenger-Chat zu Ihrer Seite hinzufügen wollen, ist, dass Sie zu Darstellung >> Theme-Editor gehen und die Theme-Funktionsdatei – functions.php– öffnen. Hier ist ein Beispiel, was Sie sehen werden (es kann je nach dem von Ihnen verwendeten WordPress-Theme variieren):
Scrollen Sie bis zum Ende der Datei und fügen Sie diesen Code am Ende der Datei ein:
function fb_chat_code() {
}
add_action('wp_body_open', 'fb_chat_code');Klicken Sie dann auf Datei aktualisieren, so dass sie wie folgt aussehen sollte:
Zweiter Schritt – Messenger-Chat-Code in Facebook generieren
Rufen Sie die Facebook-Website auf und öffnen Sie Ihre Facebook-Seite – die Seite, mit der Sie Ihre Website verknüpfen möchten. Wenn Sie als Seitenadministrator festgelegt sind, sehen Sie auf der linken Seite ein Verwaltungsmenü. Klicken Sie auf Einstellungen.
Nächster Schritt: Wählen Sie auf der linken Seite Messaging aus, und scrollen Sie zum Abschnitt Messenger zu Ihrer Website hinzufügen. Klicken Sie auf Erste Schritte.
Sie sehen nun einen Assistenten, der Sie durch die Messenger-Chat-Einstellungen führt. Sie können die Sprache des Messengers auswählen, die Begrüßungsnachricht ändern und den Gäste-Chat zulassen oder verbieten. Wenn Sie fertig sind, klicken Sie auf Weiter.
Nächster Schritt – Sie können die Standardfarbe des Messenger-Fensters ändern, um sie an das Farbschema Ihrer Website anzupassen. Nehmen Sie bei Bedarf die Änderung vor und klicken Sie auf Weiter.
Geben Sie anschließend die URL-Adresse Ihrer Website (einschließlich http…) oben links im Fenster ein. Dies ermöglicht die Verwendung von Messenger nur auf der von Ihnen angegebenen Website, so dass niemand denselben Code kopieren und auf anderen Websites verwenden kann. Klicken Sie auf Speichern.
Der letzte Schritt – klicken Sie auf das Code-Snippet-Fenster auf der rechten Seite und kopieren Sie den Messenger-Code. Sie müssen ihn zu Ihrer WordPress-Website hinzufügen. Klicken Sie dann auf Fertig stellen.
Dritter und letzter Schritt – Messenger-Chat-Code zu WordPress hinzufügen
Jetzt müssen Sie zu Ihrer WordPress-Website zurückkehren. Klicken Sie auf Erscheinungsbild >> Themen-Editor und öffnen Sie die Datei functions.php erneut. Scrollen Sie bis zum Ende der Datei, wo Sie zuvor eine Funktion hinzugefügt haben, und nehmen Sie diese Änderung vor:
function fb_chat_code() {
echo " PUT MESSENGER CODE BETWEEN THESE DOUBLEQUOTES ";
}
add_action('wp_body_open', 'fb_chat_code');Da wir in unserer Funktion doppelte Anführungszeichen verwenden („), und der Messenger-Code ebenfalls doppelte Anführungszeichen verwendet, müssen wir zwischen jedem doppelten Anführungszeichen im Messenger-Code einen umgekehrten Schrägstrich ( ) einfügen (6 Stellen).
Hier sehen Sie, wie der endgültige Code aussehen sollte (alle 6 Backslashes sind im Beispiel grün markiert):
Nachdem Sie den Messenger-Code eingefügt und die Backslashes hinzugefügt haben, klicken Sie auf die Schaltfläche Datei aktualisieren:
Endergebnis
Wenn alle Schritte erfolgreich abgeschlossen wurden, wird der Messenger-Chat auf jeder einzelnen Seite Ihrer WordPress-Website angezeigt. Hier ist das Beispiel, wie es auf dieser Website aussehen würde:
