So fügen Sie Facebook Messenger zu Divi hinzu (ohne Ihre Website zu beschädigen)

Updated on January 8, 2026
|
Written by Sajjan Sharma Sajjan Sharma
So fügen Sie Facebook Messenger zu Divi hinzu (ohne Ihre Website zu beschädigen)

Ein potenzieller Kunde kann ganz einfach einen Chat auf Ihrer Desktop-Website starten, während er Produkte durchsucht, und dann dieselbe Konversation später am Tag auf seinem Mobiltelefon fortsetzen.

Wenn Sie Facebook Messenger zu Divi hinzufügen möchten, können Sie dies ganz einfach tun, indem Sie entweder ein kostenloses WordPress-Chat-Plugin verwenden oder das Meta-Chat-Skript direkt in Ihre Theme-Optionen einfügen.

Ich weiß, dass das Hantieren mit den Code-Modulen von Divi beängstigend sein kann, wenn Sie kein Entwickler sind.

Ich habe gesehen, wie eine einzige falsch platzierte Codezeile einen leeren Bildschirm ausgelöst oder bei einem routinemäßigen Theme-Update vollständig gelöscht wurde.

Ich zeige Ihnen die absolut sicherste Plugin-Methode sowie die manuelle Methode, damit Sie genau auswählen können, was für Ihr Unternehmen am besten geeignet ist und sofort mit Kunden in Kontakt treten können.

Warum Echtzeit-Chat für Ihre Divi-Website wichtig ist

Das Hinzufügen von Facebook Messenger gibt Ihren Besuchern direkten, sofortigen Zugang zu einem echten Menschen, was Ihre statische Divi-Seite in ein interaktives Erlebnis verwandelt.

Forschungsergebnisse zeigen, dass 82 % der Verbraucher eine sofortige Antwort erwarten, wenn sie Fragen zum Verkauf haben, und Live-Chat insgesamt eine massive Zufriedenheitsrate von 73 % aufweist.

Facebook Messenger für ein Unternehmen

Da Facebook Messenger über 1,3 Milliarden aktive Nutzer hat, müssen Ihre Besucher keine neue App herunterladen oder ein neues Konto erstellen, nur um mit Ihnen zu sprechen. Sie sind wahrscheinlich bereits auf der Plattform angemeldet.

Der Vorteil der geräteübergreifenden Synchronisierung

Einer der größten Vorteile der Messenger-Integration ist, wie die Plattform Konversationen über verschiedene Bildschirme hinweg verwaltet.

Ein potenzieller Kunde kann ganz einfach einen Chat auf Ihrer Desktop-Website starten, während er Produkte durchsucht, und diese exakt gleiche Unterhaltung später am Tag auf seinem Mobiltelefon beenden.

Beispiel für ein Facebook-Chat-Widget

Der Chatverlauf wird automatisch in ihrer Messenger-App synchronisiert, sodass Sie den Lead nicht verlieren, nur weil sie ihren Computer verlassen haben.

Plugin vs. Manueller Code: Welche Methode ist die richtige für Sie?

Beide Methoden können Facebook Messenger Chat auf Ihrer Divi-Site zum Laufen bringen. Aber sie sind nicht gleichwertig – besonders wenn Sie kein Entwickler sind.

Hier ist ein Vergleich der beiden:

FaktorPlugin-Methode (WPChat)Manuelle Code-Methode
EinrichtungszeitUnter 5 Minuten20–40 Minuten
Risiko von Website-UnterbrechungenSehr niedrigMittel bis hoch
Überlebt Theme-UpdatesJa – das Plugin ist unabhängig von DiviNein – Code kann bei Update gelöscht werden
Visuelle AnpassungssteuerungenVollständiges Dashboard mit Live-VorschauManuelle CSS-Bearbeitungen erforderlich
Erforderliche technische KenntnisseKeineFortgeschritten
Laufende WartungAutomatische Plugin-UpdatesManuelle Code-Prüfungen erforderlich

Wenn Sie kein Entwickler sind, ist die Plugin-Methode die klare Wahl.

Stattdessen können Sie ein Plugin wie WPChat verwenden, das alles über ein visuelles Dashboard verwaltet. Kein Code, kein Risiko, Ihr Layout zu beschädigen, und keine Sorge, dass Ihre Arbeit nach einem Divi-Update verschwindet.

Warum WPChat das Beste für Divi-Benutzer ist

Von allen verfügbaren Optionen hat sich WPChat als das beste Chat-Plugin für Divi-Websites herausgestellt.

WPChat Plugin-Homepage

Ich habe WPChat speziell auf Divi-Seiten gegen drei andere Chat-Plugins (Tidio, Tawk.to und LiveChat) getestet.

Wichtige WPChat-Funktionen, die für Divi-Benutzer relevant sind

  • Geführter Einrichtungsassistent: WPChat führt Sie Schritt für Schritt durch den gesamten Einrichtungsprozess und schaltet Ihren Facebook Messenger-Chat in weniger als 10 Minuten live, ohne dass technische Kenntnisse erforderlich sind.
  • Live-Anpassung mit Ein-Klick-Designs: Verwandeln Sie das Erscheinungsbild Ihres Chats sofort, indem Sie aus voreingestellten Designs wählen, und passen Sie dann Farben, Schriftarten und Layouts an, ohne Code zu berühren.
Live-Editor für Ihren Divi-Chat
  • Multi-Agenten-Unterstützung mit intelligenter Weiterleitung: Fügen Sie mehrere Teammitglieder hinzu, um Chats zu bearbeiten, und lassen Sie WPChat Unterhaltungen automatisch an die richtige Person weiterleiten, basierend auf deren Verfügbarkeit.
  • Leistungsstarke Sichtbarkeitskontrollen: Entscheiden Sie genau, wo Ihr Chat angezeigt wird, indem Sie bestimmte Seiten, Kategorien oder Beitragstypen auswählen, damit Sie den Chat nicht dort anzeigen, wo er keinen Sinn ergibt.
  • Integriertes Analyse-Dashboard: Verfolgen Sie Antwortzeiten, Kundenverhalten und Zufriedenheitsmetriken, um zu sehen, was funktioniert, und verbessern Sie Ihren Support kontinuierlich.
Analysefunktion für das WPChat-Plugin

Der Einrichtungsprozess dauert weniger als 10 Minuten, und WPChat lässt sich nahtlos in Divi integrieren, ohne dass Codeänderungen erforderlich sind. 

Außerdem bleibt WPChat auch dann aktiv, wenn Sie Ihr Theme aktualisieren, sodass Sie Ihre Chat-Funktionalität nie verlieren.

Sind Sie bereit, die Art und Weise, wie Sie mit Besuchern auf Ihrer Divi-Website interagieren, zu verändern? 

Holen Sie sich WPChat noch heute und beginnen Sie mit der Bereitstellung von Sofort-Support.

So fügen Sie Facebook Messenger Chat zu Divi hinzu (mit einem Plugin)

Nachdem Sie nun verstehen, warum Facebook Messenger Chat so gut mit Divi funktioniert, führe ich Sie durch den genauen Einrichtungsprozess.

Es ist ein schneller und einfacher Prozess, und Sie werden in nur wenigen Minuten ein leistungsstarkes Chat-System einsatzbereit haben.

Schritt 1: Installieren und aktivieren Sie das WPChat-Plugin

Zuerst müssen Sie eine Kopie des WPChat-Plugins erwerben. Besuchen Sie die WPChat-Website und wählen Sie den Plan, der Ihren Bedürfnissen entspricht.

Sobald Sie die Plugin-Datei heruntergeladen haben, installieren und aktivieren Sie sie auf Ihrer Website.

Falls Sie Hilfe benötigen, können Sie sich diese Schritt-für-Schritt-Anleitung zur Installation von WordPress-Plugins ansehen.

Schritt 2: Schließen Sie die anfängliche WPChat-Einrichtung ab

Jetzt ist es an der Zeit, Ihr neues Plugin zu konfigurieren. Öffnen Sie den Menüpunkt WPChat in Ihrem WordPress-Dashboard.

Sie sehen einen Begrüßungsbildschirm mit einer Schaltfläche Einrichten. Klicken Sie einfach darauf, um die Einrichtung zu starten.

Einrichtung von WPChat starten

Danach können Sie diesen Chat-Assistenten mit Facebook verbinden.

Geben Sie dazu den Benutzernamen der Facebook-Seite Ihrer Marke ein.

Sie können hier auch andere Messaging-Apps verbinden, darunter WhatsApp (ebenfalls im Besitz von Meta), Instagram und Telegram.

Scrollen Sie schließlich nach unten und klicken Sie auf die Schaltfläche Weiter.

Klicken Sie auf Weiter, um die Verbindung zu bestätigen

Auf dem folgenden Bildschirm können Sie ein Design für das Erscheinungsbild Ihres Chat-Widgets auswählen.

WPChat bietet mehrere vordefinierte Designs, die zu verschiedenen Website-Stilen passen:

  • Basic
  • Nacht
  • Pastell

Wählen Sie dasjenige aus, das Ihr Divi-Design am besten ergänzt, und klicken Sie dann auf Weiter, um fortzufahren.

Wählen Sie ein Design für Ihr Divi Messenger-Chat-Widget

Schritt 3: Sichtbarkeit für das Facebook Messenger Chat-Widget wählen

In diesem Schritt können Sie genau steuern, wo Ihr Chat-Widget auf Ihrer Divi-Site angezeigt wird. Sie haben zwei Hauptoptionen zu beachten:

  • Auf allen Seiten anzeigen zeigt Ihr Chat-Widget auf Ihrer gesamten Website an und gibt Besuchern einen konsistenten Zugang zum Support.
  • Nur auf bestimmten Seiten anzeigen ermöglicht es Ihnen, genau auszuwählen, auf welchen Seiten die Chat-Blase angezeigt werden soll.
Wählen Sie aus, wo das Divi Facebook Messenger-Widget angezeigt werden soll

Sobald Sie dies getan haben, können Sie die untenstehenden Filter verwenden, um die Option für den Messenger-Chat noch weiter zu steuern.

Sie können Filter basierend auf Seiten, Kategorien, Tags oder benutzerdefinierten Beitragstypen hinzufügen. 

Zum Beispiel möchten Sie vielleicht, dass der Chat nur auf Produktseiten oder Ihrer Kontaktseite angezeigt wird. Oder Sie können die Chat-Option aus Ihrem Blog-Bereich ausschließen.

Nachdem Sie Ihre Sichtbarkeitseinstellungen vorgenommen haben, klicken Sie auf Weiter

Wählen Sie die Seiten, Kategorien, Tags oder benutzerdefinierten Beitragstypen aus

Auf dem letzten Einrichtungsbildschirm geben Sie Ihren WPChat-Lizenzschlüssel ein. Diesen Schlüssel sehen Sie auf Ihrer Konto-Seite bei WPChat.

Geben Sie hier Ihren Schlüssel ein und klicken Sie auf die Schaltfläche Einrichtung abschließen, um hier fertig zu werden. 

Geben Sie Ihren WPChat-Lizenzschlüssel ein, um die Einrichtung abzuschließen

So einfach ist das, Ihr Facebook Messenger Chat-Widget ist jetzt auf Ihrer Divi-Site aktiv.

Jeder auf Ihrer Website kann einfach auf den schwebenden Button klicken, um das Facebook-Chat-Widget zu öffnen.

Beispiel für einen Facebook Messenger-Chat-Button

Schritt 4: Passen Sie Ihr Messenger-Widget für den besten Eindruck an

Nachdem die grundlegende Einrichtung abgeschlossen ist, lassen Sie uns Ihr Chat-Widget perfekt für Ihre Divi-Website gestalten. 

Klicken Sie zuerst auf die Schaltfläche Anpassen in Ihrem WPChat-Dashboard.

Beginnen Sie mit der Anpassung Ihres Divi-Chat-Widgets

Dies öffnet den Live-Editor, wo Sie ein Panel mit den verschiedenen Anpassungsoptionen sehen.

Wie beim Divi-Editor erhalten Sie eine Live-Vorschau, um die Gestaltung Ihres Chat-Widgets zu erleichtern.

Lassen Sie uns einige der Anpassungsoptionen hier durchgehen:

Live-Anpassung für Messenger-Chat-Assistent

Personalisierung des Assistenten-Avatars

Zuerst möchten Sie Ihrem Chat-Widget ein freundliches Gesicht geben. 

Klicken Sie also im Anpassungsmenü auf die Option Avatar des Assistenten.

Beginnen Sie mit der Anpassung Ihres Assistenten-Avatars

Hier finden Sie mehrere vorgefertigte Avatare, aus denen Sie wählen können.

Wenn Sie Ihr eigenes Bild verwenden möchten, klicken Sie stattdessen auf die Schaltfläche Eigenes hinzufügen

Fügen Sie Ihren benutzerdefinierten Assistenten-Avatar hinzu

Verwenden Sie die Schaltfläche Hochladen, um ein Bild aus Ihrer Mediathek oder von Ihrem Computer hinzuzufügen.

Geben Sie einfach einen Namen für Ihren Avatar ein und klicken Sie dann auf Hinzufügen, um ihn zu speichern. 

Fügen Sie Ihren eigenen benutzerdefinierten Assistenten-Avatar hinzu

Damit können Sie auf Speichern klicken, um Ihren neuen Assistenten-Avatar zu bestätigen.

Danach klicken Sie auf die Schaltfläche Zurück, um zum Hauptanpassungsbildschirm zurückzukehren.

Zurück zu den Hauptanpassungsoptionen des WPChat-Plugins

Bearbeiten der sichtbaren Abschnitte

Als Nächstes können Sie die verschiedenen Abschnitte Ihres Messenger-Widgets steuern.

Suchen Sie einfach im Customizer auf der linken Seite nach der Option Abschnitte.

Sichtbare Abschnitte für Ihren Instagram-Chat-Assistenten

Von hier aus können Sie mit einem einzigen Klick auswählen, ob der Abschnitt angezeigt oder ausgeblendet werden soll.

Sie können die Abschnitte auch nach oben und unten verschieben, damit der Fokus auf der Messaging-Funktion der FAQ-Optionen liegt.

Klicken Sie sich gerne durch jeden der beiden Hauptabschnitte, um sie noch weiter anzupassen.

Sichtbare Abschnitte für das Divi-Widget bearbeiten

Wenn Sie mit Ihrem Widget zufrieden sind, klicken Sie auf Speichern, um Ihre Änderungen zu speichern.

Wie Sie sehen können, ist dieser Customizer auch ohne Design- oder Programmiererfahrung recht einfach zu bedienen.

Schritt 5: Richten Sie mehrere Chat-Agenten ein (Teamverwaltung)

Wenn Sie ein Team haben, das Kundenanfragen bearbeitet, können Sie mit WPChat verschiedene Agenten erstellen, die Ihr Support-Team repräsentieren.

Jeder Agent kann einen Namen und ein Profilbild haben, damit sich die Unterhaltung für Ihre Besucher menschlicher anfühlt. 

Um Ihre Agenten einzurichten, öffnen Sie das Menü WPChat » Agenten in Ihrem WordPress-Dashboard.

Sie sehen einen Standard-Agenten, der bei der Einrichtung des Plugins erstellt wurde. 

Klicken Sie einfach auf Bearbeiten neben diesem Agenten, um die Informationen zu ändern.

Beginnen Sie mit der Bearbeitung Ihres Chat-Agenten

Um ein Profilfoto hinzuzufügen, klicken Sie auf Hochladen und wählen Sie ein Bild von Ihrem Computer aus. 

Professionelle Porträts können Vertrauen bei Besuchern aufbauen. Oder Sie können das Firmenlogo oder Maskottchen verwenden, um die Unterhaltung offiziell wirken zu lassen.

Beginnen Sie mit der Festlegung eines Profilbilds für den Facebook Messenger Chat-Agenten

Geben Sie als Nächstes den Namen des Agenten in das Feld unten ein. 

Sie können den echten Namen der Person verwenden, um eine menschliche Note hinzuzufügen, oder einen allgemeinen Namen für alle Support-Mitarbeiter verwenden.

Geben Sie einen Namen für den Chat-Agenten ein

Wenn Sie nach unten scrollen, können Sie auch die Kontaktinformationen für diesen speziellen Chat-Agenten ändern.

Nachdem Sie die Einrichtung des Agenten abgeschlossen haben, klicken Sie auf Änderungen speichern

Sie können dann neue Agenten hinzufügen und diesen Vorgang für jedes Teammitglied wiederholen, das Chat-Gespräche führen wird.

Öffnen Sie schließlich Ihre Website und testen Sie Ihr neues Messenger-Chat-Widget.

Popup-Assistent für den Facebook-Messenger-Button

Fazit

Wie Sie sehen können, kann es überraschend einfach sein, Facebook Messenger mit WPChat zu Ihrer Divi WordPress-Site hinzuzufügen.

Wichtige Erkenntnisse

Sie kennen nun den sichersten und direktesten Weg, um Facebook Messenger Chat zu einer Divi-Site hinzuzufügen. Mit WPChat können Sie alles über ein visuelles Dashboard verwalten.

Sie haben auch gesehen, wie Sie genau steuern können, wo Ihre Chat-Blase erscheint, wie Sie sie an Ihre Website anpassen und wie Sie Chat-Agenten einrichten.

Bereit, in Echtzeit mit Ihren Besuchern in Kontakt zu treten? Starten Sie noch heute mit WPChat!

Häufig gestellte Fragen

Benötige ich eine Facebook-Unternehmensseite, um Messenger zu Divi hinzuzufügen?

Ja, Sie benötigen eine Facebook-Unternehmensseite, um Messenger-Chat zu Ihrer Divi-Site hinzuzufügen. Das Messenger-Chat-Widget wird direkt mit dem Posteingang einer Seite verbunden – es kann keine Verbindung zu einem persönlichen Facebook-Profil herstellen.

Wenn Sie noch keine haben, können Sie in wenigen Minuten eine Facebook-Seite mit Facebooks eigenem Einrichtungsleitfaden erstellen.

Wird das Hinzufügen eines Chat-Widgets meine Divi-Website verlangsamen?

Das Hinzufügen von WPChat zu Ihrer Divi-Website wird diese nicht merklich verlangsamen. WPChat wird asynchron geladen – das bedeutet, dass das Chat-Widget im Hintergrund geladen wird, nachdem der Rest Ihrer Seite für Ihren Besucher bereits sichtbar ist.

Der Inhalt Ihrer Seite wird immer zuerst geladen, und das Widget erscheint leise, sobald alles andere bereit ist.

Kann ich den Messenger-Chat nur auf einer Seite in Divi hinzufügen?

Ja, Sie können das Chat-Widget nur auf einer Seite anzeigen. Die Sichtbarkeitssteuerungen von WPChat – die in Schritt 3 dieser Anleitung behandelt werden – ermöglichen es Ihnen, bestimmte Seiten, Tags, Kategorien oder benutzerdefinierte Beitragstypen anzusprechen.

Funktioniert der Facebook Messenger-Chat mit dem mobilen Layout von Divi?

Ja, das WPChat-Widget funktioniert perfekt mit dem mobilen Layout von Divi. Die schwebende Chat-Blase ist standardmäßig responsiv, d. h. sie passt sich automatisch an jede Bildschirmgröße an: von Desktop-Monitoren bis zu Smartphones.

Darüber hinaus bedeutet der Vorteil der geräteübergreifenden Synchronisierung, den wir bereits erwähnt haben, dass Ihre Besucher ein Gespräch auf dem Handy beginnen und auf dem Desktop fortsetzen können, ohne eine einzige Nachricht zu verlieren.