Web Chat auf deiner Website einbetten

Das Web-Chat-Widget ist der schnellste Kanal, um live zu gehen: null Einrichtung, keine Tokens, keine API-Schlüssel. Du aktivierst einen Kanal, kopierst ein Script-Tag aus dem Dashboard, fügst es vor deinem schließenden Body-Tag ein, und ein im Brand-Design gehaltener Launcher erscheint auf deiner Website. Diese Seite geht Klick für Klick vor. Die vollständige Anatomie des Widgets, jede Darstellungseinstellung und das Datenschutzmodell findest du in der Referenz zum Web-Chat-Kanal.

Was du erstellst

Ein aktiver AnyBot-Chat-Launcher auf deiner eigenen Website, verbunden mit einem Agenten, den du bereits getestet hast. Besucher chatten als Gäste, ohne Anmeldung, Antworten werden live gestreamt, und nichts Privates ist je erreichbar. Etwa fünf Minuten, sobald dein Agent existiert.

Bevor du beginnst

• Ein Agent, der bereits gut antwortet. Neu hier? Dein erster Agent in 10 Minuten.
• Zugriff, um das HTML deiner Website zu bearbeiten, du fügst ein <script>-Tag ein.
• Optionale Entscheidungen: ob du einschränkst, welche Domains das Widget laden dürfen, und ob du Besucher vor dem Chatten nach einem Kontakt fragst.

Schritte

1. Den Agenten auswählen oder erstellen

Öffne AI Agents in der Seitenleiste und öffne den Agenten, den du auf deiner Website haben möchtest. Das Widget liefert genau das, was dieser Agent beantwortet, also sollte er einen Test-Chat bereits bestehen. Fängst du bei null an? Erstelle und teste zuerst einen mit Dein erster Agent.

Erwartetes Ergebnis: Der Agent-Editor ist auf seinen Tabs geöffnet.

2. Den Web-Chat-Kanal aktivieren

Gehe zum Tab Integrations des Agenten und aktiviere die Karte Web Chat. Damit wird sowohl die Einbettung betrieben als auch das integrierte Test-Panel Chat with Agent freigeschaltet.

Erwartetes Ergebnis: Die Web-Chat-Karte wird als aktiviert angezeigt, und das Chat-Panel ist neben dem Editor verfügbar (ein Seitenpanel auf breiten Bildschirmen, ein Chat-Button auf kleineren).

3. Im Panel testen, bevor du einbettest

Öffne das Panel Chat with Agent und schalte es in den Test-Modus (standardmäßig öffnet es im Training-Modus), der Test-Modus entfernt den Admin-Kontext, sodass du siehst, was ein echter Website-Besucher sieht. Stelle eine Frage, die dein Wissen abdecken sollte; die Antworten werden Token für Token gestreamt und jeder Tool-Schritt ist sichtbar. Korrigiere jetzt den Ton oder füge Wissen hinzu; siehe Deinen Agenten testen.

Erwartetes Ergebnis: eine fundierte, gestreamte Antwort, die zu deinen Inhalten passt.

4. Das Einbettungs-Snippet kopieren

Klicke auf der Karte Web Chat auf Embed in website und dann auf Copy code. Das Snippet ist ein einzelnes Tag, das die ID deines Agenten enthält; kopiere es wortgetreu, es gibt keinen Schlüssel, den du hinzufügen musst.

Erwartetes Ergebnis: ein einzeiliges Tag in deiner Zwischenablage, wie dieses hier, mit der ID deines Agenten anstelle von BOT_UID:

<script src="https://app.any.bot/widget.js" data-anybot="BOT_UID" async></script>

Wenn deine Website noch das ältere mehrzeilige Snippet enthält (es beginnt mit <!-- AnyBot Chat Widget -->), ersetze den gesamten Block durch dieses Tag: Das alte übernimmt dein Icon und deine Farben nicht mehr. Die Kanal-Referenz beschreibt das Tag im Detail.

5. Auf deiner Website einfügen

Füge das Tag direkt vor dem schließenden </body>-Tag auf jeder Seite ein, auf der das Widget erscheinen soll, und veröffentliche dann. Beim Laden rendert es einen schwebenden Launcher; ein Klick darauf öffnet den Chat.

Erwartetes Ergebnis: ein Launcher-Button erscheint in der Ecke deiner Live-Seite.

6. (Optional) Den Chat über deinen eigenen Button öffnen

Füge data-anybot-open zu einem beliebigen Button oder Link auf deiner Seite hinzu, zum Beispiel zu einem „Mit uns chatten“-Button in deinem Header, und ein Klick darauf öffnet den Chat:

<button type="button" data-anybot-open>Mit uns chatten</button>

Erwartetes Ergebnis: Ein Klick auf deinen Button öffnet dasselbe Chat-Panel wie der Launcher.

7. (Optional) Absichern und Kontakte erfassen

Zurück in den Einstellungen des Web-Chat-Kanals:

• Allowed domains, liste die Sites auf, die das Widget laden dürfen. Jede andere Herkunft wird serverseitig mit einem 403 abgewiesen, sie lässt sich also nicht durch Bearbeiten des Snippets umgehen. Eine leere Liste bedeutet unbeschränkt, und die Herkunft deines eigenen Dashboards ist immer erlaubt.
• Pre-chat capture, frage vor der ersten Nachricht nach Name, E-Mail oder Telefon; die Werte befüllen den Kontakt. Es ist einer der bewussten public-safe Schreibvorgänge.

Beide werden wirksam, ohne das Tag erneut einzufügen.

8. Das Live-Widget testen

Öffne deine veröffentlichte Seite in einem frischen Browser (oder einem Inkognito-Fenster), sodass du ein anonymer Besucher bist, klicke auf den Launcher und sende eine Nachricht.

Erwartetes Ergebnis: das Panel öffnet sich, deine Nachricht wird gesendet und der Agent streamt eine Antwort, als Gast, ohne Anmeldung.

Überprüfen, ob es funktioniert

• Der Web-Chat-Kanal ist beim Agenten aktiviert.
• Der Launcher-Button erscheint auf deiner Live-Seite.
• Ein Klick darauf öffnet den Chat und eine Testnachricht erhält eine gestreamte Antwort.
• Wenn du erlaubte Domains festgelegt hast, lädt das Widget auf diesen und wird anderswo abgewiesen.

Fehlerbehebung

• Launcher erscheint nicht, stelle sicher, dass das <script> vor </body> steht und dass der Web-Chat-Kanal für diesen Agenten aktiviert ist.
• 403 beim Laden des Widgets, die Domain der Seite steht nicht in der Liste der erlaubten Domains; füge sie hinzu oder leere die Liste, um sie unbeschränkt zu machen.
• Launcher zeigt die Standardfarbe und das Standard-Icon, die Seite enthält noch das ältere mehrzeilige Snippet; ersetze es durch das einzeilige Tag aus Copy code.
• Änderungen an Stil oder Begrüßung werden nicht angezeigt, das Widget liest die Einstellungen bei jedem Laden; lade die Seite hart neu. Du musst das Tag nicht erneut einfügen, außer nachdem du das Theme geändert hast.
• Besucher hängen an einem Formular fest, die Pre-chat capture ist aktiviert; jedes aufgeführte Feld ist erforderlich, bevor der Chat startet.

Wie es weitergeht

• Referenz zum Web-Chat-Kanal, das Einbettungs-Tag, das Öffnen des Chats über deine eigenen Buttons, jede Darstellungseinstellung und das public-safe Datenschutzmodell.
• Kanal-Einstellungen, Begrüßung, Geschäftszeiten und außerhalb der Geschäftszeiten.
• Weitere Kanäle verbinden, bring denselben Agenten auf WhatsApp, Slack, SMS und die übrigen der 8 Kanäle.