Das Chat-Widget ist die Sprechblase unten rechts auf deiner Website. Es braucht eine Zeile Code, kennt deine Wissensbasis und die Seite, auf der der Besucher gerade steht – und dein KI-Mitarbeiter antwortet darin sofort, statt dass jemand ein Formular ausfüllt und einen Tag später eine Mail bekommt.
In zwei Schritten live
Chat-Kanal anlegen. Einstellungen → Workspace → Kanäle → Neuer Kanal → Website-Chat. Titel, Begrüßung und Farbe kannst du sofort setzen oder später ändern.
Die Zeile einbauen. Direkt nach dem Anlegen zeigt dir inbrix das fertige Snippet mit deiner Kanal-Kennung. Kopieren, in deine Website einbauen, fertig:
<script src="https://app.inbrix.ai/widget.js" data-halo-key="DEINE-KANAL-ID" async></script>Das Snippet gehört unmittelbar vor das schließende
</body>und auf jede Seite, auf der der Chat erreichbar sein soll – also am besten in das gemeinsame Footer-Template. Durchasyncblockiert es den Seitenaufbau nicht.
Du findest das Snippet jederzeit wieder unter Einstellungen → Workspace → Kanäle beim jeweiligen Chat-Kanal. Die Kanal-Kennung darin ist nicht geheim – sie steht ohnehin im Quelltext deiner Website.
Wo genau die Zeile hingehört
- Eigenes Template / statische Seite: vor
</body>in das Layout, das alle Seiten verwenden. - WordPress: über ein Snippet-Plugin für den Footer-Bereich oder in der
footer.phpdes Child-Themes. - Shopware: im eigenen Theme den Storefront-Block am Ende des
base.html.twigüberschreiben. - Tag-Manager: als benutzerdefiniertes HTML-Tag auf allen Seiten. Achte darauf, dass es nicht an eine Cookie-Einwilligung gebunden ist, die das Widget dauerhaft blockiert – das Widget setzt keine Marketing-Cookies.
Optionale Attribute
| Attribut | Wirkung |
|---|---|
data-halo-position="left" | Launcher unten links statt unten rechts. Wird automatisch mitgegeben, wenn du im Kanal „Unten links" wählst. |
data-halo-name / data-halo-email | Name und Adresse eines bei dir eingeloggten Kunden vorbelegen, damit er sie nicht tippen muss. Bequemlichkeit, keine Verifizierung – für als bestätigt geltende Chats gibt es einen separaten, serverseitig eingelösten Token. |
Wie du siehst, dass es läuft
Sobald die erste echte Seite mit dem Snippet aufgerufen wird, meldet sich das Widget bei uns. In der Einrichtungs-Checkliste hakt der Punkt „Widget auf deiner Website einbauen" sich daraufhin von selbst ab – solange dort „noch nicht erkannt" steht, hat uns noch kein Aufruf erreicht.
Die Einstellungen des Kanals
Aussehen und Ansprache
| Einstellung | Bedeutung |
|---|---|
| Kanalname (intern) | Nur für euch, zur Unterscheidung mehrerer Widgets. |
| Widget-Titel / Untertitel | Die Kopfzeile im Chatfenster, z.B. „Support" und „Wir antworten so schnell wie möglich". |
| Begrüßung | Die erste Nachricht, die der Besucher beim Öffnen sieht. |
| Akzentfarbe | Farbe von Launcher und Kopfzeile. Ist im Workspace ein Widget-Branding hinterlegt (Einstellungen → Workspace → Portal & CI), hat dessen Primärfarbe Vorrang. |
| Position | Unten rechts oder unten links. |
| Quick-Reply-Buttons | Bis zu sechs Startfragen, eine pro Zeile – z.B. „Rechnung / Lizenz". Senkt die Hemmschwelle spürbar. |
| Ton bei neuer Antwort | Kurzer Hinweiston, wenn eine Antwort eintrifft. |
| Proaktiver Teaser | Eine kleine Karte am Launcher nach X Sekunden („👋 Brauchst du Hilfe?"). Sie verschwindet von allein und tritt nie vor eine echte, ungelesene Antwort. |
Wer antwortet
Unter Standard-Zuweisung (neue Chats) entscheidest du, wer neue Gespräche bekommt. Trägst du dort einen KI-Mitarbeiter ein, antwortet er sofort; ein Mensch kann jederzeit übernehmen. Bleibt das Feld leer, landen die Chats unzugewiesen im Posteingang und warten auf einen Menschen – im Live-Chat fällt das schnell auf.
Die Verzögerung des „tippt …"-Indikators steuert nur, wann die Punkte erscheinen, gerechnet ab der Nachricht des Besuchers. Die Antwort selbst wird nie verzögert. Wer das Ticket offen hat, kann in dieser Zeit eingreifen.
Onboarding: Formular oder AI-first
- AI-first (anonym, Standard): Besucher schreiben sofort los. Name und E-Mail werden erst erfragt, wenn sie wirklich gebraucht werden. Das bringt deutlich mehr Gespräche.
- Formular (Name/E-Mail): Vor der ersten Nachricht werden Name und Adresse abgefragt; beide Felder lassen sich einzeln als Pflichtfeld setzen. Sinnvoll, wenn ihr grundsätzlich jeden Kontakt zuordnen müsst.
E-Mail-Continuity: wenn der Besucher weg ist
Ein Chat endet oft damit, dass jemand den Tab schließt. Zwei Schalter fangen das auf:
- Offline-Fallback: Ist der Besucher nach der eingestellten Zahl an Minuten inaktiv, geht die Antwort per Mail hinterher.
- Transcript per Mail bei Abschluss: Der Gesprächsverlauf wird zum Nachlesen zugeschickt.
Beides greift nur, wenn eine echte E-Mail-Adresse des Besuchers vorliegt, und versendet über den E-Mail-Kanal des Workspaces – dieser muss also eingerichtet sein. Siehe E-Mail-Kanal einrichten.
Widget im eigenen Help-Center
Betreibst du zusätzlich ein öffentliches Help-Center unter deiner Domain, brauchst du dort kein Snippet: Unter Einstellungen → Workspace → Portal & CI schaltest du Chatbot anzeigen ein und wählst den Chat-Kanal aus. Auf deiner eigenen Website bleibt das Snippet der Weg.
Wenn etwas nicht klappt
| Symptom | Was zu tun ist |
|---|---|
| Kein Launcher zu sehen | Steht die Zeile wirklich im ausgelieferten HTML (Quelltext ansehen, nach widget.js suchen)? Stimmt die Kanal-Kennung? Blockt ein Consent-Banner das Skript? |
| Launcher erscheint kurz und verschwindet wieder | Dein Paket enthält das Chat-Widget nicht. In dem Fall entfernt sich das Widget bewusst selbst, statt einen toten Knopf stehen zu lassen. |
| Falsche Farbe | Das Workspace-Branding sticht die Kanal-Akzentfarbe. Farbe entweder dort ändern oder das Branding leeren. |
| Nichts passiert nach dem Absenden | Prüfe in der Browser-Konsole, ob Anfragen an inbrix von einer Content-Security-Policy geblockt werden. Dann app.inbrix.ai für script-src, connect-src und frame-src erlauben. |
| Antworten kommen nur sehr langsam | Ist ein KI-Mitarbeiter als Standard-Zuweisung gesetzt? Ohne ihn wartet der Chat auf einen Menschen. |
Wie es weitergeht
- KI-Mitarbeiter konfigurieren – wer im Chat antwortet und wie eigenständig
- Wissensbasis füllen – woher die Antworten kommen