Live-Chat in Shopify, Wix, Squarespace und Webflow einbinden

Das Live-Chat-Widget von Hodhod ist ein kurzer JavaScript-Code und funktioniert deshalb mit jedem Website-Baukasten, in den Sie eigenen Code einfügen können. Diese Anleitung zeigt genau, wo Sie ihn in Shopify, Wix, Squarespace und Webflow einfügen, und wie Sie ihn über den Google Tag Manager hinzufügen, wenn Sie den Code der Website lieber gar nicht anfassen möchten.

Nutzen Sie WordPress oder WooCommerce? Beginnen Sie mit der WordPress-Anleitung: Dafür gibt es ein fertiges Plugin.

Bevor Sie beginnen

Sie brauchen den Installationscode Ihres Posteingangs. Haben Sie noch keinen Website-Posteingang angelegt, dauern die Schritte 1 bis 4 der Installationsanleitung für Websites nur wenige Minuten. Den Code können Sie jederzeit erneut kopieren: Öffnen Sie Einstellungen → Posteingänge → Ihr Website-Posteingang und schalten Sie im Tab „Einstellungen“ die Widget-Vorschau auf „Script“ um.

Die Menünamen der Plattformen können abweichen, wenn die Plattform aktualisiert wurde oder auf eine andere Sprache eingestellt ist.

Live-Chat in Shopify einbinden

1. Gehen Sie in Ihrem Shopify-Admin zu Online Store → Themes.
2. Klicken Sie neben dem Theme, das Sie bearbeiten möchten, auf „…“ und wählen Sie „Duplicate“. Mit einer Kopie können Sie gefahrlos testen.
3. Klicken Sie bei der Kopie erneut auf „…“ und wählen Sie „Edit code“.
4. Öffnen Sie im Ordner „Layout“ die Datei theme.liquid.
5. Scrollen Sie ganz nach unten und fügen Sie den Hodhod-Code direkt über dem schließenden </body>-Tag ein.
6. Speichern Sie, sehen Sie sich die Kopie in der Vorschau an und veröffentlichen Sie sie, wenn alles funktioniert.

Hinweise:

• Der Code liegt im Theme. Wechseln Sie das Theme, fügen Sie ihn im neuen erneut ein. Shopify warnt außerdem, dass Änderungen am Theme-Code bei einem Theme-Update verloren gehen können.
• Ein Theme, das Sie nur ausprobieren, lässt sich nicht bearbeiten.
• Der Shopify-Checkout ist vom Theme getrennt, daher erscheint das Widget auf Ihren Shop-Seiten (Startseite, Kollektionen, Produkte, Warenkorb), nicht aber in den Checkout-Schritten selbst.

Live-Chat in Wix einbinden

1. Gehen Sie im Dashboard Ihrer Website zu Settings und öffnen Sie unter „Development & integrations“ den Punkt „Custom Code“.
2. Klicken Sie auf „+ Add Custom Code“ und fügen Sie den Hodhod-Code ein.
3. Geben Sie ihm einen wiedererkennbaren Namen, etwa „Hodhod chat“.
4. Wählen Sie unter „Add Code to Pages“ die Option „All pages“ und unter „Place Code in“ die Option „Body – end“.
5. Entscheiden Sie, ob der Code einmal pro Besuch oder auf jeder Seite geladen wird, und klicken Sie auf „Apply“.

Hinweise:

• Die Website muss veröffentlicht sein und eine verbundene Domain haben, wofür wiederum ein Premium-Tarif nötig ist.
• Code-Snippets sind an die Domain gebunden: Weisen Sie der Website eine andere Domain zu, werden sie gelöscht.
• Wix bietet keinen Support für Code von Drittanbietern. Erscheint das Widget nach dem Veröffentlichen nicht, prüfen Sie die Richtlinien von Wix zu Custom Code auf neue Einschränkungen.

Live-Chat in Squarespace einbinden

1. Öffnen Sie das Panel Ihrer Website und gehen Sie zu Website Tools → Code Injection. (Squarespace hat Menüs zwischen den Versionen umbenannt und verschoben; suchen Sie daher nach „Code Injection“, falls der Pfad abweicht.)
2. Fügen Sie den Hodhod-Code in das Feld „Footer“ ein.
3. Klicken Sie auf „Save“.

Hinweise:

• Code Injection gibt es in den Tarifen Core, Plus und Advanced (und einigen älteren Tarifen), nicht im Tarif Basic.
• Footer-Code wird auf jeder Seite vor dem schließenden </body>-Tag eingefügt.
• Squarespace führt eingefügte Skripte unter Umständen nicht aus, solange Sie angemeldet sind. Prüfen Sie das Ergebnis daher in einem privaten Browserfenster auf Ihrer veröffentlichten Website.

Live-Chat in Webflow einbinden

1. Öffnen Sie die Site settings Ihres Projekts und wechseln Sie zum Tab „Custom code“.
2. Fügen Sie den Hodhod-Code in „Footer code“ ein, damit er direkt vor dem schließenden </body>-Tag geladen wird, und klicken Sie auf „Save changes“.
3. Veröffentlichen Sie Ihre Website. Eigener Code wird in der Vorschau angezeigt, geht aber erst nach dem Veröffentlichen live.

Hinweise:

• Um das Widget nur auf einer einzelnen Seite einzubinden, nutzen Sie die Einstellungen dieser Seite im Feld „Before </body> tag“.
• Finden Sie die Einstellung nicht, prüfen Sie in der Webflow-Hilfe, was Ihr Tarif und Ihre Rolle erlauben.

Jede Website: Live-Chat über den Google Tag Manager einbinden

Ist der Google Tag Manager bereits auf Ihrer Website eingerichtet, können Sie das Widget hinzufügen, ohne die Website selbst zu bearbeiten:

1. Gehen Sie im Tag Manager zu Tags und klicken Sie auf „New“.
2. Wählen Sie den Tag-Typ „Custom HTML“ und fügen Sie den Hodhod-Code ein.
3. Wählen Sie unter Triggering die Option „All Pages“.
4. Speichern Sie, klicken Sie dann auf „Submit“ und „Publish“, um den Container zu veröffentlichen.

Das Widget legt ein kleines Cookie im Browser des Besuchers ab, damit ein Gespräch von Seite zu Seite weiterlaufen kann. Fragt Ihre Website nach einer Cookie-Einwilligung, nutzen Sie den Trigger Ihres Consent-Tools, damit der Tag erst nach der Einwilligung ausgelöst wird.

Die Einbindung testen

Öffnen Sie Ihre veröffentlichte Website in einem privaten Browserfenster. Der Chat-Button sollte unten in der Ecke erscheinen; senden Sie eine Testnachricht und prüfen Sie, ob sie in Hodhod unter „Gespräche“ ankommt.

Haben Sie im Tab „Konfiguration“ des Posteingangs „Allowed Domains“ festgelegt, tragen Sie jede Domain ein, auf der das Widget läuft, durch Kommas getrennt: Ihre Live-Domain und auch jede Vorschau- oder Standarddomain, auf der Sie testen (zum Beispiel your-store.myshopify.com, yoursite.wixsite.com oder yourproject.webflow.io). Sonst bleibt das Widget auf den fehlenden Domains unsichtbar.

Wenn das Widget nicht erscheint

1. Prüfen Sie, ob Sie veröffentlicht haben. Wix und Webflow führen eigenen Code nur auf der veröffentlichten Website aus.
2. Prüfen Sie die Platzierung. Der Code muss im Footer oder im Bereich „Body – end“ stehen, der auf jeder Seite geladen wird.
3. Prüfen Sie „Allowed Domains“. Die Domain, auf der Sie testen, muss in der Liste stehen.
4. Suchen Sie nach einer zweiten Kopie. Sehen Sie zwei Chat-Buttons, wurde der Code doppelt eingefügt, zum Beispiel im Theme und in einem Tag Manager. Behalten Sie nur einen.
5. Testen Sie ohne Werbeblocker und prüfen Sie die Browser-Konsole (F12) auf Fehlermeldungen.

Häufig gestellte Fragen