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

Mit einem Live-Chat können Besucher ihre Frage genau dann stellen, wenn sie sie haben – auf der Preisseite, im Checkout, mitten in deiner Dokumentation. Der Einbau ist weniger Arbeit, als viele denken: Bei fast jeder Website läuft es auf ein Script-Tag im Seiten-Header hinaus.

Diese Anleitung zeigt den ganzen Weg am Beispiel von asktrix: Widget einbauen, an deinen Auftritt anpassen, festlegen, wann es erscheint, und was du einrichten solltest, damit niemand auf eine Antwort wartet.

Was du brauchst

• Zugriff auf den Code deiner Website oder ein Feld für „Header-Code“ (WordPress, Shopify, Webflow und die meisten Baukästen haben eins).
• Einen kostenlosen asktrix-Workspace. Der Free-Plan enthält Chat-Widget, gemeinsames Postfach und Kontakte für zwei Teammitglieder.

Mehr nicht – kein Server, kein Plugin, das du aktuell halten musst.

Schritt 1: Widget-Snippet kopieren

Öffne nach dem Anlegen deines Workspace Einstellungen → Kanäle → Installation. Dort findest du ein Snippet wie dieses, schon mit deiner Workspace-ID:

<script async src="https://asktrix.org/widget.js"
        data-workspace="YOUR_WORKSPACE_ID"></script>

Das Attribut async sorgt dafür, dass das Skript im Hintergrund lädt und deine Seite nicht aufhält.

Schritt 2: Vor </head> einfügen

Das Snippet gehört in den <head> jeder Seite, direkt vor das schließende </head>. Wo genau das ist, hängt von deiner Plattform ab:

Plattform	Wo das Snippet hinkommt
Eigenes HTML	Das Template bzw. die Datei, die auf jeder Seite geladen wird, vor </head>
WordPress / WooCommerce	Design → Theme-Datei-Editor → header.php oder ein Header-Code-Plugin wie „WPCode“
Shopify	Onlineshop → Themes → … → Code bearbeiten → layout/theme.liquid
Webflow	Site Settings → Custom Code → „Head Code“, danach neu veröffentlichen
Next.js	app/layout.tsx mit next/script

Ausführliche Anleitungen gibt es für WordPress und Shopify. Für React und Next.js zeigt die Installationsseite in der App eine fertige Komponente zum Kopieren.

Schritt 3: Prüfen, ob es läuft

Speichern, den Cache leeren (falls du ein Caching-Plugin oder CDN nutzt) und deine Website öffnen. Unten rechts erscheint der Chat-Button. Schick dir selbst eine Testnachricht – sie landet sofort im asktrix-Postfach.

Tipp: Öffne vor dem Einbau auf deiner echten Website die Demo-Seite aus den Installationseinstellungen. Dort siehst du dein Widget auf einer Beispielseite und kannst Farben und Texte vorher ausprobieren.

Schritt 4: Aussehen und Ton anpassen

Ein Chat-Widget, das wie ein fremdes Add-on aussieht, bekommt weniger Nachrichten. Nimm dir hier fünf Minuten:

• Farbe und Stil: Markenfarbe, helle, farbige oder dunkle Kopfzeile und helles, dunkles oder automatisches Design.
• Kopfzeile und Begrüßung: das Erste, was Besucher lesen. Halte die Kopfzeile kurz (Platz für 60 Zeichen) und sag in der Willkommensnachricht (bis 280 Zeichen), wobei du helfen kannst. Vorlagen findest du in unserem Beitrag zu Begrüßungstexten.
• Sprache: Das Widget gibt es in acht Sprachen, es wählt automatisch die Browsersprache – oder du legst eine fest. Jeder Text lässt sich pro Sprache anpassen.
• Position: links oder rechts, mit zusätzlichem Abstand, falls ein Cookie-Banner oder ein anderer Button in der Ecke sitzt.

Schritt 5: Festlegen, wann der Chat erscheint

Live-Chat fühlt sich nur „live“ an, wenn jemand antwortet. Entscheide, was passiert, wenn dein Team nicht da ist:

• Ausblenden, wenn alle abwesend sind – das Widget erscheint nur, solange mindestens ein Teammitglied online ist.
• Sichtbar bleiben und Nachrichten sammeln – Besucher hinterlassen Frage und E-Mail-Adresse, du antwortest später aus dem Postfach. Schalte E-Mail-Adresse abfragen ein, damit du sie erreichst.
• Den KI-Agenten antworten lassen – ab dem Start-Plan beantwortet der KI-Agent Trix Fragen rund um die Uhr aus deinen Hilfe-Artikeln und übergibt bei Bedarf an dein Team. Trix läuft mit deinem eigenen API-Schlüssel, die KI zahlst du direkt beim Anbieter.

Im Team-Plan legst du außerdem fest, auf welchen Seiten das Widget erscheint, und sperrst bei Bedarf Länder, Sprachen oder IP-Adressen.

Schritt 6: Team einladen

Lade Kolleginnen und Kollegen per Link aus den Team-Einstellungen ein. Chats und – ab dem Start-Plan – E-Mails landen in einem gemeinsamen Postfach. Dort weist ihr Gespräche zu, schreibt interne Notizen und nutzt gespeicherte Antworten. Installiere die Web-App auf deinem Handy, dann bekommst du Push-Benachrichtigungen für neue Nachrichten.

Optional: Dem Chat sagen, wer deine Besucher sind

Wenn sich Menschen auf deiner Website anmelden, übergib ihre Daten mit der JavaScript-API an den Chat (ab Start). Dein Team sieht dann, mit wem es spricht:

window.asktrixReady = window.asktrixReady || [];
asktrixReady.push((trix) => {
  trix.identify({ email: "[email protected]", name: "Jana Beispiel" });
  trix.setData({ plan: "pro" });
  trix.addLabels("vip");
});

Die Warteschlange funktioniert unabhängig davon, ob das Widget schon geladen ist. Danach steht window.asktrix auch direkt zur Verfügung.

Außerdem kannst du das Widget über einen eigenen Button öffnen (asktrix.open()), auf bestimmten Seiten ausblenden (asktrix.hide()) oder Ereignisse erfassen (asktrix.track("signup")).

Häufige Probleme

Der Chat-Button erscheint nicht. Leere den Cache von Caching-Plugin, CDN und Browser. Prüfe dann den Seitenquelltext: Das Snippet muss auf jeder Seite im <head> stehen.

Er erscheint nur auf manchen Seiten. Manche Themes nutzen für verschiedene Templates verschiedene Header. Achte darauf, dass das Snippet in allen steckt, oder nutze ein Header-Code-Plugin, das für die ganze Website gilt.

Abends ist er weg. Wahrscheinlich ist „Ausblenden, wenn alle abwesend sind“ aktiv. Das ist so gewollt – oder du schaltest es ab und lässt Besucher eine Nachricht hinterlassen.

Zusammenfassung

1. Snippet unter Einstellungen → Kanäle → Installation kopieren.
2. Auf jeder Seite vor </head> einfügen.
3. Prüfen, dann Farben, Begrüßung und Sprache anpassen.
4. Festlegen, was passiert, wenn niemand online ist.
5. Team einladen.

Bereit? Leg kostenlos einen Workspace an – und dein Live-Chat ist online, bevor dein Kaffee kalt ist.