Das Web-Chat-Widget ist eine Chat-Sprechblase, die Sie mit einem einzigen <script>-Tag auf jeder Webseite einbinden. Besucher chatten mit Ihrer KI; übernimmt ein Mensch, erscheinen dessen Antworten in derselben Sprechblase — live.
wk_…), der jeden Chat an Ihren desk leitet. Nutzen Sie dort Copy snippet (Snippet kopieren) und Preview widget (Widget-Vorschau), um es anzusehen, bevor es in die Nähe Ihrer Website kommt. Siehe Settings.Einbinden auf Ihrer Website
Fügen Sie das Snippet direkt vor Ihrem schließenden </body>-Tag ein:
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here"></script>Das Widget lädt in einem eigenen Frame und kommt deshalb weder den Styles noch den Skripten Ihrer Website in die Quere.
Optionen
| Attribut | Wofür es steht |
|---|---|
data-key |
Erforderlich. Der Widget-Key Ihres desk, aus den Settings. |
data-position |
right (Standard) oder left — in welcher Ecke die Sprechblase sitzt. |
data-offset |
Abstand zur Ecke in Pixeln (Standard 20). |
data-lang |
Legt die Sprache des Widgets fest, z. B. ja. Lassen Sie es weg, sieht jeder Besucher seine eigene Browsersprache. |
Zeigt Ihre Seite in derselben Ecke ein reCAPTCHA-Abzeichen, rückt das Widget automatisch darüber, sodass sich beides nicht überlappt.
Welche Sprache das Widget spricht
Ohne weitere Angabe folgt das Widget der Browsersprache des jeweiligen Besuchers. Ein japanischer Besucher einer englischen Website bekommt die japanische Sprechblase; dafür ist nichts einzurichten, und verschiedene Besucher derselben Seite können verschiedene Sprachen sehen.
Um stattdessen eine Sprache festzulegen — bei einer Website, die einen einzigen Markt bedient, ganz gleich wer sie liest —, ergänzen Sie data-lang:
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here" data-lang="ja"></script>In 11 Sprachen übersetzt: Englisch, Japanisch, Koreanisch, Chinesisch (vereinfacht und traditionell), Spanisch, Französisch, Deutsch, Portugiesisch, Arabisch und Russisch. Arabisch wird von rechts nach links dargestellt, und Chinesisch richtet sich nach der Schrift des Besuchers — traditionell für Taiwan, Hongkong und Macau, sonst vereinfacht. Jede andere Sprache fällt auf Englisch zurück, statt eine halb übersetzte Sprechblase zu zeigen — data-lang="it" liefert Ihnen also Englisch.
data-lang. Die Antwort der KI richtet sich nach der Sprache, in der der Kunde schreibt. Und die KI kann nur aus Artikeln der Wissensdatenbank antworten, die in dieser Sprache verfasst sind — ein englischer Artikel beantwortet keine japanische Frage. Wenn Sie Kunden in zwei Sprachen betreuen, schreiben Sie Ihre Artikel in beiden. Siehe Ihre Wissensdatenbank.Dasselbe gilt für das gehostete Webformular: Ergänzen Sie ?lang=ja in seiner Adresse, um die Sprache festzulegen, oder lassen Sie es weg, damit es dem Besucher folgt.
Ihre Markenfarbe
Solange Sie keine wählen, erscheint der Chat in unserem Türkis. Wählen Sie Ihre eigene Farbe, wird sie für den Kopfbereich des Chats, seine Schaltflächen und die Nachrichten Ihres Kunden verwendet, für die Schließen-Schaltfläche (✕) am Launcher, solange der Chat geöffnet ist, und für Ihr gehostetes Webformular.
- Öffnen Sie die Settings Ihres desk. Suchen Sie im Abschnitt Web chat (Web-Chat) nach Brand colour (Markenfarbe), direkt unter Chat bubble icon (Sprechblasen-Icon).
- Wählen Sie eine Farbe und klicken Sie auf Save colour (Farbe speichern).
- Anders überlegt? Reset to default (auf Standard zurücksetzen) holt unser Türkis zurück.
Ihre Farbe erscheint innerhalb von etwa 5 Minuten auf Ihrer Website, und Sie müssen nichts neu einfügen. Wie beim Icon können nur desk-Administratoren und der Eigentümer sie ändern.
Ein eigenes Sprechblasen-Icon verwenden
Standardmäßig ist der Launcher auf Ihrer Website unsere türkisfarbene Sprechblase mit einem Sprechblasen-Symbol (💬). Sie können sie durch Ihr eigenes PNG ersetzen, damit das Widget zu Ihrer Website passt. Das Bild, das Sie hochladen, wird zur gesamten Schaltfläche: Es füllt den kompletten 56-Pixel-Launcher aus, und wir zeichnen unseren türkisfarbenen Kreis nicht mehr dahinter.
- Öffnen Sie die Settings Ihres desk. Gehen Sie in den Abschnitt Web chat (Web-Chat) und suchen Sie Chat bubble icon (Sprechblasen-Icon).
- Klicken Sie auf Upload PNG (PNG hochladen) und wählen Sie Ihre Datei. Die Vorschau-Sprechblase neben der Schaltfläche zeigt genau, wie der Launcher aussehen wird.
- Anders überlegt? Reset to default (auf Standard zurücksetzen) holt unser Sprechblasen-Symbol zurück.
| Bild | Was funktioniert |
|---|---|
| Format | PNG |
| Empfohlene Größe | Quadratisch, mindestens 112×112 Pixel |
| Angezeigte Größe | Füllt den gesamten Launcher, 56×56 Pixel |
| Form | Vom Bild selbst bestimmt — ein transparenter Hintergrund wird dringend empfohlen |
| Dateigröße | Maximal 256 KB |
Der Launcher wird mit 56×56 Pixeln gezeichnet; eine Quelldatei mit 112×112 Pixeln (oder mehr) hält Ihr Zeichen deshalb auch auf hochauflösenden Bildschirmen scharf. Einen dezenten Schatten fügen wir hinzu, und er folgt der Kontur Ihrer Grafik — Sie müssen also keinen in das PNG einbauen.
Das Launcher-Icon ist ein Bild, daher färbt Ihre Markenfarbe es nicht um — Besucher sehen genau das Icon, das Sie hochladen. Weil unser Kreis nicht mehr hinter Ihrem Bild gezeichnet wird, ist bei einem transparenten PNG die Farbe, die Besucher sehen, die Farbe Ihrer eigenen Grafik.
Was der Besucher sieht
- Er öffnet die Sprechblase und hinterlässt Namen, E-Mail-Adresse und eine erste Nachricht.
- Die KI antwortet aus Ihrem Wissen, mit Quellenangaben, direkt im Chat — ohne auf jemanden aus Ihrem Team zu warten.
- Ein Mensch kann übernehmen — seine Antwort erscheint innerhalb weniger Sekunden im selben Chat.
Über die hinterlassene E-Mail-Adresse wird der Besucher beim nächsten Mal wiedererkannt — siehe Ihre Kundendatenbank.
data-key überall dort, wo das Snippet eingefügt ist, und überall dort, wo Ihr Formular ihn sendet.Der Web-Chat ist einer von fünf Wegen zu Ihnen — siehe wie Kunden Sie erreichen und wie ein Ticket funktioniert, sobald ein Chat beginnt.