Live-Chat in WordPress einbinden (ohne Programmierkenntnisse)

Läuft Ihre Website mit WordPress oder WooCommerce, ist der Live-Chat von Hodhod in wenigen Minuten eingerichtet. Diese Anleitung stellt drei Methoden vor: Die empfohlene nutzt das kostenlose Plugin „Hodhod Live-Chat“; bei den beiden anderen fügen Sie den Code mit dem Plugin WPCode oder direkt in Ihr Theme ein.

Bevor Sie beginnen: den Code aus dem Panel kopieren

Legen Sie zuerst im Hodhod-Panel einen Website-Posteingang an. Wie das Schritt für Schritt geht, zeigt die Installationsanleitung für Websites mit Screenshots. Sie brauchen den Installationscode, der beim Anlegen des Posteingangs angezeigt wird. Später kopieren Sie ihn jederzeit erneut: Öffnen Sie unter Einstellungen → Posteingänge Ihren Website-Posteingang und schalten Sie im Tab „Einstellungen“ die Widget-Vorschau von „Vorschau“ auf „Script“ um.

Methode 1 (empfohlen): das Plugin „Hodhod Live-Chat“

Das offizielle Plugin von Hodhod bindet das Widget auf allen Seiten Ihrer Website ein, lässt Sie sein Aussehen festlegen und lädt es, ohne Ihre Seiten auszubremsen.

1. Laden Sie das Plugin herunter: hodhod-live-chat-1.0.1.zip.
2. Gehen Sie im WordPress-Dashboard zu Plugins → Plugin hinzufügen und klicken Sie auf „Plugin hochladen“.
3. Wählen Sie die heruntergeladene ZIP-Datei aus, klicken Sie auf „Jetzt installieren“ und danach auf „Plugin aktivieren“.
4. Gehen Sie zu Einstellungen → Hodhod Live-Chat.
5. Fügen Sie den kompletten Code aus dem Hodhod-Panel in das Feld „Website-Code oder Token“ ein und klicken Sie auf „Änderungen speichern“.

Das war's: Das Plugin liest das Website-Token aus dem Code aus, und der Chat-Button erscheint auf jeder Seite – auch auf den Produktseiten sowie im Warenkorb und im Checkout von WooCommerce. Auf derselben Einstellungsseite legen Sie außerdem fest:

• Position: unten rechts oder unten links.
• Chat-Button: ein runder Button oder ein Button mit Ihrem eigenen Text.
• Farbschema: wie das Gerät des Besuchers, immer hell oder immer dunkel.
• Sprache: Standardmäßig folgt das Widget der Sprache Ihrer Website (bei Persisch und Arabisch mit Layout von rechts nach links); alternativ nutzen Sie die Browsersprache des Besuchers oder wählen eine feste Sprache aus.
• Seitengeschwindigkeit: „Chat nach der Seite laden“ (standardmäßig aktiviert) lädt das Widget erst beim ersten Scrollen, Antippen oder Tastendruck des Besuchers oder wenige Sekunden nach dem Laden der Seite – so wirkt es sich nicht auf die Ladezeit Ihrer Seiten aus.
• Angemeldete Nutzer: Melden sich Ihre Kunden an (etwa in ihrem WooCommerce-Kundenkonto), aktivieren Sie „Name und E-Mail angemeldeter Nutzer an Hodhod senden“. Fügen Sie dann unter „Geheimer Schlüssel“ den Schlüssel ein, den Sie im Tab „Konfiguration“ desselben Posteingangs im Bereich „Identity Validation“ (Feld „Secret Key“) finden – Bereich und Feld erscheinen im deutschen Panel auf Englisch. So sieht Ihr Team, mit wem es spricht, und Kunden führen dasselbe Gespräch geräteübergreifend fort. Der Schlüssel bleibt auf Ihrem Server und wird nie an den Browser gesendet.

Methode 2: das Plugin WPCode

Nutzen Sie bereits WPCode (mit vollem Namen „WPCode – Insert Headers and Footers + Custom Code Snippets“), um Code in Ihre Website einzufügen, können Sie den Hodhod-Code auch dort hinterlegen:

1. Gehen Sie im WordPress-Dashboard zu Plugins → Plugin hinzufügen.
2. Suchen Sie nach „WPCode“, installieren Sie „WPCode – Insert Headers and Footers“ und aktivieren Sie das Plugin.
3. Öffnen Sie im linken Menü Code Snippets → Header & Footer.
4. Fügen Sie den Hodhod-Code in das Feld Footer ein.
5. Klicken Sie auf „Save Changes“.

Der Code wird nun auf jeder Seite Ihrer Website geladen und bleibt auch nach Theme-Updates und einem Theme-Wechsel erhalten.

Methode 3: die Theme-Datei bearbeiten

Möchten Sie kein Plugin installieren, können Sie den Code auch direkt in die Footer-Datei Ihres Themes einfügen:

1. Gehen Sie im Dashboard zu Design → Theme-Datei-Editor.
2. Öffnen Sie in der Dateiliste footer.php.
3. Fügen Sie den Hodhod-Code direkt vor </body> ein und klicken Sie auf „Datei aktualisieren“.

Zwei wichtige Hinweise: Bearbeiten Sie das Haupt-Theme statt eines Child-Themes, geht diese Änderung beim nächsten Theme-Update verloren – legen Sie deshalb entweder ein Child-Theme an oder nutzen Sie Methode 1. Neuere Block-Themes (etwa Twenty Twenty-Four) haben gar keine footer.php; bei ihnen funktionieren nur die Methoden 1 und 2.

Nach der Installation: den Chat testen

Öffnen Sie Ihre Website in einem privaten Browserfenster und scrollen Sie ein wenig: Unten auf der Seite erscheint der Chat-Button. Senden Sie eine Testnachricht und prüfen Sie, ob sie im Hodhod-Panel unter „Gespräche“ ankommt.

Häufige Probleme beheben

Das Widget erscheint nicht

Meistens liegt es am Cache. Leeren Sie den Cache von Plugins wie WP Rocket, LiteSpeed Cache oder W3 Total Cache sowie den Cache Ihres CDN, falls Sie eines nutzen, und versuchen Sie es dann erneut. Beim Hodhod-Plugin prüfen Sie außerdem, ob das Häkchen bei „Chat-Widget auf meiner Website anzeigen“ gesetzt und der Website-Code gespeichert ist.

Das Widget erscheint verzögert

Beim Hodhod-Plugin ist das Absicht: Der Chat wartet auf die erste Interaktion des Besuchers oder einige Sekunden, damit Ihre Inhalte zuerst laden. Soll er gleich beim Laden der Seite erscheinen, entfernen Sie das Häkchen bei „Chat nach der Seite laden“. Bei den Methoden 2 und 3 verzögern manche Plugins zur Geschwindigkeitsoptimierung Skripte bis zur ersten Interaktion (etwa über eine Option wie „Delay JavaScript execution“). Soll das Widget sofort sichtbar sein, tragen Sie sdk.js dort als Ausnahme ein.

Meine Website ist mehrsprachig

Beim Hodhod-Plugin lassen Sie die Sprache auf „Wie diese Website“: Mit Plugins wie WPML oder Polylang folgt das Widget dann der Sprache jeder einzelnen Seite. Bei den Methoden 2 und 3 fügen Sie vor dem eigentlichen Code window.chatwootSettings mit dem locale-Wert der jeweiligen Seite ein – die Details stehen in der Installationsanleitung.

Häufig gestellte Fragen