Hodhod-Live-Chat auf der Website einbinden: Schritt-für-Schritt-Anleitung

In dieser Anleitung richten Sie das Live-Chat-Widget von Hodhod auf Ihrer Website ein – vom Anlegen des Posteingangs im Panel bis zur ersten Kundennachricht. Das dauert nur wenige Minuten, und auf Ihrem Server muss nichts installiert werden: Sie fügen lediglich einen kurzen Code-Schnipsel in Ihre Website ein.

Bevor Sie beginnen

• Administratorzugang zum Hodhod-Panel. Nur Administratoren des Kontos können Posteingänge anlegen.
• Die Möglichkeit, den Code oder das Theme Ihrer Website zu bearbeiten. Läuft Ihre Website mit WordPress, ist die WordPress-Anleitung sogar noch einfacher.

Schritt 1: Einen Website-Posteingang anlegen

Gehen Sie im Panel zu Einstellungen → Posteingänge und klicken Sie auf „Posteingang hinzufügen“. Wählen Sie in der Liste der Kanäle „Webseite“ (Create a live-chat widget).

Schritt 2: Das Formular „Website-Kanal“ ausfüllen

• Webseiten-Name: der Name, den Kunden oben im Widget sehen – zum Beispiel der Name Ihres Shops oder Ihrer Marke.
• Website-Domain: die Domain, auf der das Widget laufen soll, etwa example.com.
• Widget Farbe: Wählen Sie Ihre Markenfarbe, damit das Widget wie ein Teil Ihrer Website wirkt.
• Willkommens-Überschrift und Willkommens-Schlagzeile: die Texte, die Kunden auf dem ersten Bildschirm des Widgets sehen.
• Kanal Begrüßung aktivieren (optional): eine Nachricht, die beim Start eines Gesprächs automatisch gesendet wird.

Klicken Sie anschließend auf „Posteingang erstellen“.

Schritt 3: Mitarbeiter zum Posteingang hinzufügen

Wählen Sie als Nächstes unter „Agenten für den Posteingang auswählen“ die Personen aus, die die Gespräche dieser Website beantworten sollen, und klicken Sie auf „Agenten hinzufügen“. Nur hier hinzugefügte Mitarbeiter sehen die Nachrichten dieses Posteingangs – wenn Sie selbst auch antworten möchten, fügen Sie sich ebenfalls hinzu.

Schritt 4: Den Code-Schnipsel kopieren

Der Bildschirm „Ihr Posteingang ist fertig!“ zeigt den Installationscode. Klicken Sie auf „Kopieren“.

Der Code-Schnipsel sieht so aus – nur ist der Wert websiteToken für jeden Posteingang einzigartig. Kopieren Sie den Code deshalb immer aus Ihrem eigenen Panel:

<script>
  (function(d,t) {
    var BASE_URL="https://hodhod.chat";
    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=BASE_URL+"/packs/js/sdk.js";
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload=function(){
      window.chatwootSDK.run({
        websiteToken: 'YOUR_WEBSITE_TOKEN',
        baseUrl: BASE_URL
      })
    }
  })(document,"script");
</script>

Sie brauchen den Code später noch einmal? Öffnen Sie den Posteingang, suchen Sie im Tab „Einstellungen“ die Widget-Vorschau und schalten Sie sie auf „Script“ um.

Schritt 5: Den Code in Ihre Website einfügen

Fügen Sie den Code direkt vor dem schließenden </body>-Tag in die Hauptvorlage Ihrer Website ein, damit er auf jeder Seite geladen wird:

• Reine HTML-Website: in jede Seite oder in Ihren gemeinsamen Footer, falls vorhanden.
• PHP-Templates: meist in footer.php oder in Ihre zentrale Layout-Datei.
• Single-Page-Apps (React, Vue usw.): einmal in index.html, nicht innerhalb von Komponenten.
• WordPress: siehe die separate WordPress-Anleitung.
• Shopify, Wix, Squarespace, Webflow oder Google Tag Manager: siehe die Anleitung für Website-Baukästen.

Der Code-Schnipsel lädt asynchron und blockiert daher nicht das Rendern Ihrer Seite.

Schritt 6: Testen

Öffnen Sie Ihre Website (am besten in einem privaten Browserfenster). Unten in der Ecke sollte der Chat-Button erscheinen. Senden Sie eine Testnachricht und prüfen Sie, ob sie im Panel unter „Gespräche“ ankommt. Das war's – Ihr Widget ist live.

Empfohlene Einstellungen nach der Installation

Sprache und Design des Widgets an Ihre Website anpassen

Standardmäßig verwendet das Widget die Sprache Ihres Kontos und folgt der Hell-/Dunkel-Einstellung im System des Besuchers. Um es exakt an Ihre Website anzupassen, fügen Sie vor dem eigentlichen Code-Schnipsel Folgendes ein:

<script>
  window.chatwootSettings = {
    locale: 'en',
    darkMode: 'auto',
  };
</script>

• locale ist die Sprache des Widgets – zum Beispiel de auf deutschen und en auf englischen Seiten.
• darkMode kann light, dark oder auto sein.
• Hat Ihre Website einen eigenen Umschalter für Design oder Sprache, rufen Sie beim Wechsel window.$chatwoot.setColorScheme('dark') bzw. window.$chatwoot.setLocale('de') auf, damit das Widget sofort folgt.

Warteschlange und geschätzte Wartezeit anzeigen

Aktivieren Sie im Posteingang im Tab „Einstellungen“ unter „Widget features“ die Optionen „Show estimated wait time“ und „Show live queue position“. Wartende Kunden sehen dann, wie viele Personen vor ihnen warten und wie lange es ungefähr dauert. Die Schätzung erscheint erst, wenn der Posteingang genügend aktuelle Daten für einen aussagekräftigen Wert hat. Diese Hodhod-eigenen Optionen erscheinen im deutschen Panel auf Englisch.

Weitere Einstellungen, die einen Blick wert sind

• Tab „Öffnungszeiten“: Legen Sie die Zeiten Ihres Teams fest, damit Kunden wissen, wann sie außerhalb dieser Zeiten mit einer Antwort rechnen können.
• Tab „Pre-Chat-Formular“: Fragen Sie vor dem Chat nach Name, E-Mail-Adresse oder Telefonnummer, falls Sie diese Angaben brauchen (was Sie fragen sollten).
• Tab „CSAT“: Aktivieren Sie die Zufriedenheitsumfrage nach dem Chat; auf Wunsch ergänzen Sie auch Folgefragen.
• Tab „Konfiguration“ → „Allowed Domains“: Stellen Sie sicher, dass das Widget nur auf Ihren eigenen Domains läuft.
• „E-Mail-Sammelbox aktivieren“ im Tab „Einstellungen“: damit Kunden, die die Seite verlassen, die Antwort trotzdem per E-Mail erhalten.

Wenn das Widget nicht erscheint

1. Leeren Sie den Cache. Caching-Plugins oder ein CDN liefern womöglich noch eine alte Version der Seite aus.
2. Prüfen Sie, wo der Code steht. Er muss in einer Vorlage stehen, die auf jeder Seite geladen wird.
3. Prüfen Sie „Allowed Domains“. Wenn Sie dort eine Liste angelegt haben, muss die Domain Ihrer Website (und bei Bedarf ihre Subdomains) darauf stehen.
4. Sehen Sie in die Browserkonsole. Drücken Sie F12, öffnen Sie die Konsole und suchen Sie nach Fehlern. Wenn Sie einen Werbeblocker nutzen, versuchen Sie es einmal ohne.

Kommen Sie trotzdem nicht weiter? Schreiben Sie uns über das Widget unten auf dieser Seite.

Häufig gestellte Fragen