Live-Chat auf der Website einbinden: per HTML, Google Tag Manager, Wix und Squarespace

Um einen Live-Chat auf deiner Website einzubinden, kopierst du das Code-Snippet deines Chat-Tools und lädst es auf jeder Seite. Dafür gibt es vier Wege: Du fügst es im gemeinsamen Layout direkt vor dem schließenden </body>-Tag ein, legst im Google Tag Manager ein Tag vom Typ Benutzerdefiniertes HTML mit dem Trigger Alle Seiten an oder nutzt das Code-Feld deines Baukastens (Wix: Custom Code, Position Body - end; Squarespace: Code Injection, Footer). Danach öffnest du die Seite in einem privaten Fenster und schickst dir selbst eine Testnachricht. Ein Chat, der zwar lädt, aber niemanden benachrichtigt, ist schlechter als gar keiner.

Für WordPress, Shopify und ikas gibt es eigene Wege mit wenig oder ganz ohne Code, die findest du am Ende. Die Beispiele nutzen den Shopxare Messenger, das Vorgehen ist aber bei fast jedem Chat-Tool gleich, das dir ein Snippet gibt.

Welcher Weg passt zu deiner Website?

Meine Empfehlung: Wenn du das Template bearbeiten kannst, bau den Code dort ein. Der Tag Manager ist eine gute Ausweichlösung, wenn du nur dort Code hinzufügen darfst, aber er schafft eine Abhängigkeit. Wer den Container verwaltet, kann deinen Chat abschalten, ohne es zu merken, und eine Einwilligungslogik kann ihn vor allen verstecken, die Cookies ablehnen.

Bevor du anfängst: Snippet kopieren

1. Leg dein Shopxare-Konto an und geh zu Einstellungen → Messenger → Installieren.
2. Kopiere das Snippet für beliebige Websites. Mit deiner eigenen App-ID sieht es so aus:

<script>
  window.Shopxare = window.Shopxare || function () { (Shopxare.q = Shopxare.q || []).push(arguments) };
  Shopxare('boot', { app_id: 'YOUR_APP_ID' });
</script>
<script async src="https://app.shopxare.com/widget/v1/loader.js"></script>

3. Sobald der Chat läuft, trägst du unter Einstellungen → Messenger → Sicherheit → Erlaubte Websites deine Domains ein. Ist die Liste leer, lädt der Messenger auf jeder Website. Mit Einträgen funktioniert dein Snippet nur auf deinen eigenen Seiten.

Alle Details stehen in Messenger installieren.

Weg 1: Code ins HTML deiner Website einfügen

1. Such die Datei, die alle Seiten gemeinsam nutzen. Meist ist das ein Layout- oder Footer-Template, zum Beispiel footer.php, layout.html oder ein Footer-Partial. Eine einfache statische Seite mit einzelnen HTML-Dateien hat keine gemeinsame Datei. Dann fügst du das Snippet in jede Datei ein.
2. Füge das Snippet direkt vor dem schließenden </body>-Tag ein.
3. Lade die Änderung hoch und lade die Seite mit geleertem Cache neu.

Hat dein CMS ein Feld wie „Footer-Skripte“ oder „Eigener Code“, erfüllt es denselben Zweck. Nutze dann dieses Feld statt die Dateien zu bearbeiten.

Single-Page-Apps mit React, Vue und Co. brauchen nichts extra. Das Snippet kommt einmal in die index.html; der Messenger erkennt Seitenwechsel selbst, und dein Team sieht weiterhin, auf welcher Seite die Kundin gerade ist.

Weg 2: Live-Chat mit dem Google Tag Manager einbinden

1. Öffne deinen Container auf tagmanager.google.com und geh zu Tags > Neu.
2. Klick auf Tag-Konfiguration und wähl Benutzerdefiniertes HTML. Füge das komplette Snippet mit beiden <script>-Blöcken ein. Google selbst sagt: JavaScript gehört immer in <script>-Tags (Tag Manager-Hilfe).
3. Klick auf Trigger und wähl Alle Seiten.
4. Öffne die erweiterten Einstellungen und dort die Einwilligungseinstellungen (Advanced Settings > Consent Settings). Standardmäßig steht die zusätzliche Einwilligungsprüfung auf Not set. Steuert dein Cookie-Banner Tags über Einwilligungstypen, kannst du Require additional consent for tag to fire wählen und den Typ hinzufügen, den dein Banner für funktionale Cookies nutzt (Tag Manager-Hilfe). Welcher Typ passt, klärst du mit der Person, die euren Cookie-Banner und den Datenschutz verantwortet. Denk an die Folge: Mit Einwilligungspflicht sehen Besucher, die ablehnen, den Chat nicht.
5. Klick auf Vorschau, gib die URL deiner Website ein und klick auf Connect (Tag Manager-Hilfe). Prüf in der Debug-Ansicht, ob dein Chat-Tag ausgelöst wurde, und auf der Website, ob der Chat-Button erscheint.
6. Klick auf Senden und dann auf Veröffentlichen.

Der Tag Manager minimiert benutzerdefinierten HTML-Code und kann dabei einfache in doppelte Anführungszeichen umwandeln. Das stört dieses Snippet nicht. Wundere dich also nicht, wenn die gespeicherte Version etwas anders aussieht.

Wann du den Tag Manager lieber nicht nutzt

• Du willst eingeloggte Kunden erkennen. Die Identitätsprüfung braucht einen user_hash, den dein Server mit einem geheimen Schlüssel berechnet, und dieser Schlüssel muss auf dem Server bleiben. Der Tag Manager kann den Hash nicht berechnen, dein Template muss ihn also ohnehin ausgeben. Dann gehört der Boot-Code direkt ins Template, mit user_id, user_hash, email und name (JavaScript-API).
• Deine Seite läuft auf Wix. Laut Wix funktionieren Tracking-Tools wie der Google Tag Manager nicht über die Custom-Code-Funktion (Wix Hilfe-Center). Füg das Chat-Snippet dort direkt ein (Weg 3).
• Das Snippet steckt schon in deinem Theme. Lade es nur an einer Stelle. Zwei Kopien machen die Fehlersuche mühsam, und später weißt du nicht mehr, welche du ändern musst.

Weg 3: Live-Chat bei Wix einbinden

Wix verlangt vorher zwei Dinge: Die Seite muss veröffentlicht sein und eine verbundene Domain haben (Wix Hilfe-Center).

1. Geh in der Verwaltung deiner Website zu Settings (Einstellungen).
2. Klick unter Development & integrations auf Custom Code.
3. Klick auf + Add Custom Code, füg das Snippet ein und gib ihm einen Namen wie „Live-Chat“.
4. Wähl unter Add Code to Pages die Option All pages.
5. Wähl unter Place Code in die Position Body - end.
6. Klick auf Apply und öffne deine Live-Seite.

Zwei Wix-Details, über die viele stolpern. Eigener Code hängt an deiner Domain: Weist du eine andere Hauptdomain zu, löscht Wix deine Snippets, und du musst sie neu anlegen. Außerdem schreibt Wix, dass seit Dezember 2025 Sicherheitsmaßnahmen im Frontend manche Drittanbieter-Snippets blockieren können, bis der Anbieter sie anpasst. Erscheint der Chat-Button nicht, wende dich an deinen Chat-Anbieter; Wix leistet für fremden Code keinen Support.

Weg 4: Live-Chat bei Squarespace einbinden

Code Injection gibt es in den Tarifen Core, Plus und Advanced sowie in einigen älteren Tarifen (Squarespace Hilfe-Center).

1. Öffne das Panel Code Injection. Der Hilfeartikel oben verlinkt direkt dorthin.
2. Füg das Snippet ins Feld Footer ein. Squarespace setzt diesen Code auf jeder Seite direkt vor das schließende </body>-Tag.
3. Klick auf Save und lade deine Seite neu.

Die Checkout-Seiten von Squarespace unterstützen keinen eigenen Code, dort erscheint der Chat also nicht. Beantworte Fragen zu Zahlung und Versand deshalb auf Warenkorb- und Produktseiten, wo der Chat lädt.

WordPress, WooCommerce, Shopify und ikas

Für diese Plattformen gibt es einen besseren Weg als das nackte Snippet, weil die Integration auch Kunden- und Warenkorbdaten in deine Inbox bringt. Das WooCommerce-Plugin und das Shopify-Snippet senden Shop-Daten wie Bestellanzahl und Warenkorbwert automatisch; sie erscheinen als Shop-Karte neben dem Gespräch.

• WordPress und WooCommerce: Plugin installieren. Schritt für Schritt in WordPress Live-Chat einbinden und in der WordPress-Doku.
• Shopify: Theme-Snippet in theme.liquid einfügen. Siehe Shopify Live-Chat einbinden.
• ikas: App in einem Schritt installieren, ohne Code (ikas-Doku).

In fünf Minuten testen

1. Öffne die Seite in einem privaten Fenster, am Rechner und am Handy. Der Chat-Button sollte in der Ecke erscheinen. Prüf am Handy, ob er den „In den Warenkorb“-Button oder deinen Cookie-Banner verdeckt. Die Position änderst du unter Messenger anpassen.
2. Schick dir eine Testnachricht und antworte vom Handy aus. Shopxare Mobile ist in jedem Tarif kostenlos (Mobil- und Desktop-Apps). Kommt keine Benachrichtigung an, behebe das, bevor du den Chat ankündigst.
3. Wechsle mitten im Gespräch auf eine andere Seite. Das Gespräch sollte noch da sein.
4. Lehne im Cookie-Banner alle Cookies ab und lade neu. Siehst du den Chat noch? Beide Antworten können richtig sein, es sollte aber eine Entscheidung sein und keine Überraschung.
5. Prüf, dass das Snippet nur einmal lädt. Schau in den Seitenquelltext oder in den Tag Assistant. Eine Kopie im Template und eine zweite im Tag Manager ist ein Fehler, der schnell passiert.

Beispiel: eine kleine Online-Rösterei

Eine erfundene Kaffeerösterei verkauft Bohnen über eine selbst gebaute Website, auf der der Google Tag Manager schon läuft. Die Inhaberin legt den Messenger an einem Dienstagmorgen als benutzerdefiniertes HTML-Tag an und testet ihn mit dem Handy. Um 14:10 Uhr schreibt jemand auf einer Produktseite:

„Ist der Kaffee ganze Bohne oder gemahlen?“

Sie antwortet aus der App:

„Standardmäßig ganze Bohne. Wenn du ihn gemahlen möchtest, wähl im Mahlgrad-Menü über dem Warenkorb-Button ‚Gemahlen für Filter‘, dann mahlen wir ihn am Versandtag.“

Zwei Monate später führt sie Kundenkonten ein. In dem Moment zieht sie das Snippet aus dem Tag Manager ins Seiten-Template um, damit der Server user_id und user_hash mitgeben kann und Stammkunden in der Inbox erkannt werden.

Wenn der Chat live ist

• Leg Servicezeiten und eine Abwesenheitsnachricht fest, damit abendliche Besucher wissen, wann sie eine Antwort bekommen. Kopier dir eine unserer Abwesenheitsnachricht-Vorlagen.
• Speichere Antworten auf die fünf häufigsten Fragen und füg sie mit „/“ ein (gespeicherte Antworten). Unsere Textbausteine für den Kundenservice liefern dir ein Startset.
• Wenn nachts niemand antworten kann, antwortet Are AI aus deinen eigenen Hilfeartikeln und Seiten und übergibt das Gespräch an dein Team, wenn es nötig ist.

Shopxare hat heute einen einzigen Tarif, und der ist kostenlos, ohne Kreditkarte. Du kannst ein Konto anlegen und den Messenger in der Zeit einbinden, die du brauchst, um deine Footer-Datei zu finden.

FAQ

Wie kann ich kostenlos einen Live-Chat auf meiner Website einbinden?

Meld dich bei einem kostenlosen Live-Chat-Tool an, kopier das Snippet und füg es im gemeinsamen Layout direkt vor </body> ein, oder nutze den Google Tag Manager bzw. das Code-Feld deines Baukastens. Danach schickst du dir eine Testnachricht.

Kann ich einen Live-Chat über den Google Tag Manager einbinden?

Ja. Leg ein Tag vom Typ Benutzerdefiniertes HTML an, füg das komplette Snippet ein, setz den Trigger auf Alle Seiten, prüf es in der Vorschau und klick dann auf Senden und Veröffentlichen. Lass den Tag Manager weg, wenn du eingeloggte Kunden erkennen willst oder deine Seite auf Wix läuft.

Wo füge ich den Live-Chat-Code ein?

Direkt vor dem schließenden </body>-Tag, in einer Datei oder einem Feld, das jede Seite nutzt: Footer-Template, Feld für Footer-Skripte, bei Wix Custom Code (Body - end) oder bei Squarespace Code Injection (Footer).

Warum wird mein Chat-Widget nicht angezeigt?

Typische Ursachen: eine nicht veröffentlichte Änderung (Tag-Manager-Container oder Baukasten), eine Einwilligungseinstellung, die das Tag bis zur Cookie-Zustimmung blockiert, eine fehlende Domain in der Liste der erlaubten Websites oder eine Seite aus dem Cache. Prüf es mit geleertem Cache in einem privaten Fenster.

Macht ein Live-Chat meine Website langsamer?

Jedes zusätzliche Skript bedeutet etwas Ladearbeit. Der Loader des Messengers wird mit async geladen, der Browser wartet also nicht auf ihn, bevor er die Seite anzeigt. Wenn dir Tempo wichtig ist, miss eine Produktseite vor und nach der Installation.