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 InboxSolve das fertige Snippet mit deiner Kanal-Kennung. Kopieren, in deine Website einbauen, fertig:
<script src="https://app.inboxsolve.com/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.
Dein Snippet zeigt noch auf app.inbrix.ai? Das funktioniert unverändert weiter, du musst nichts tun. Wenn du die Zeile ohnehin anfasst, tausche die Adresse gegen app.inboxsolve.com.
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 InboxSolve von einer Content-Security-Policy geblockt werden. Dann app.inboxsolve.com (bei älteren Snippets 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