An Ihre Webagentur senden

Wird Ihre Website von einer Agentur, einem Freelancer oder Ihrem IT-Team betreut, senden Sie den Einbettungscode mit dieser fertigen Nachricht weiter.

Sie müssen das Widget nicht selbst einbinden. Wenn jemand anderes Ihre Website betreut, senden Sie den Einbettungscode an die zuständige Person oder Firma. Das Einbinden dauert nur wenige Minuten. Auf dieser Seite finden Sie eine Nachricht zum Kopieren und die technischen Angaben, nach denen man Sie fragen könnte.

Schritt 1: Einbettungscode kopieren

Öffnen Sie in botts.ai Agenten, wählen Sie Ihren Agenten, wechseln Sie in den Tab Bereitstellen und öffnen Sie das Website-Deployment. Im Abschnitt Einbinden ganz unten im Editor steht der Code, mit einer Schaltfläche zum Kopieren. Noch kein Website-Deployment? Siehe Deployments.

Der Einbettungscode sieht so aus, mit dem Schlüssel Ihres Deployments anstelle von IHR_API_KEY:

<script async src="https://api.botts.ai/widget/chat-widget.js?key=IHR_API_KEY"></script>

Hinweis

Das Website-Widget braucht den Business-Plan oder höher. Der Personal-Plan enthält nur den internen Chat.

Schritt 2: Diese Nachricht senden

Kopieren Sie die Nachricht, ersetzen Sie die Platzhalter-Zeile durch Ihren Einbettungscode und senden Sie sie an die Person oder Firma, die Ihre Website betreut.

Betreff: Bitte botts.ai Chat-Widget auf der Website einbinden

Guten Tag

Bitte binden Sie unser botts.ai Chat-Widget auf unserer Website ein.
Es ist ein einzelnes Script-Tag, das auf jeder Seite geladen werden
soll, am besten direkt vor dem schliessenden body-Tag (im Head der
Seite funktioniert es auch):

[hier den Einbettungscode einfügen]

Hinweise:
- Bitte fügen Sie den Code unverändert ein. Der Schlüssel darin gehört
  zu unserem Chatbot.
- Das Script lädt asynchron und blockiert den Seitenaufbau nicht.
- Falls die Website ein Consent-Tool, einen Cache oder einen
  Script-Optimierer nutzt, stellen Sie bitte sicher, dass das Script
  nicht blockiert oder verzögert wird.
- Technische Details: https://botts.ai/docs/de/install-web-agency

Vielen Dank!

Schritt 3: Prüfen, sobald es live ist

Sobald die Einbindung bestätigt ist, öffnen Sie Ihre öffentliche Website in einem privaten Fenster und laden sie neu. Das Chat-Symbol erscheint unten rechts oder dort, wo Sie es im Widget-Editor platziert haben. Öffnen Sie es und senden Sie eine Testfrage.

Tipp

Erfolgreich eingebunden, wenn das Widget auf Ihrer öffentlichen Website erscheint, sich öffnen lässt und Ihre Testfrage beantwortet.

Erscheint das Widget nicht, prüfen Sie, ob das Deployment im Tab Bereitstellen eingeschaltet ist, und testen Sie ohne Werbeblocker. Erscheint es danach immer noch nicht, bitten Sie Ihre Agentur, die Hinweise aus der Nachricht zu prüfen.

Farben, Texte und alle anderen Einstellungen des Widgets ändern Sie danach in botts.ai, ohne Ihre Agentur erneut einzubeziehen. Der Code auf der Website muss nur ersetzt werden, wenn sich der Schlüssel des Deployments ändert.

Technische Details für Entwickler

Was es ist: ein externes Script, https://api.botts.ai/widget/chat-widget.js, identifiziert über den Query-Parameter key. Der Schlüssel ist ein öffentlicher Schlüssel für genau dieses Website-Deployment und darf im Quelltext der Seite stehen.
Wo: auf jeder Seite, auf der das Widget erscheinen soll, am besten direkt vor dem schliessenden </body>-Tag. Das Script wartet auf DOMContentLoaded, lädt die Widget-Einstellungen und fügt das Widget dann dem Body hinzu, deshalb funktioniert es auch im Head der Seite. Pro Seite einmal laden.
Darstellung: Das Script fügt dem Body ein Element hinzu, div#bottsai-widget-root. In dessen Shadow Root zeigt es den Launcher (position: fixed, z-index: 9999) und ein iframe, das das Chatfenster von https://api.botts.ai lädt.
Speicher im Browser: Das Widget legt wenige kleine Einträge im localStorage der Website ab: den Zustand offen/geschlossen (bottsai_window_state, bottsai_has_interacted), die ID des aktuellen Gesprächs (botts_conv__ plus Deployment-ID) und ob der Karten-Launcher minimiert wurde (bottsai_launcher_dismissed__ plus Deployment-ID). Das Gespräch selbst speichert botts.ai. Cookies setzt das Script auf der Website keine.
Content Security Policy: Sendet die Website einen CSP-Header, erlauben Sie https://api.botts.ai in script-src, connect-src und frame-src sowie 'unsafe-inline' in style-src. Das Script schreibt seine Styles in den Shadow Root des Widgets und unterstützt keine Nonces. Ohne diese Freigabe verliert der Launcher seine Gestaltung und das Chatfenster erscheint unten im Seiteninhalt. Zeigt der Launcher ein hochgeladenes Logo, erlauben Sie zusätzlich https://s3.pub2.infomaniak.cloud in img-src. Mit require-trusted-types-for 'script' wird das Widget nicht angezeigt.
Sprachfunktion: Ist die KI-Sprachfunktion für das Widget eingeschaltet, nutzt das Chat-iframe das Mikrofon (eingebettet mit allow="microphone"). Sendet die Website einen Permissions-Policy-Header mit microphone=(), ändern Sie ihn zu microphone=(self "https://api.botts.ai"). Sonst funktioniert die Sprachfunktion nicht, der Text-Chat hingegen schon.
Wenn nichts erscheint: Prüfen Sie die Netzwerkanfragen in den Entwicklertools des Browsers. Ein 404 für chat-widget.js bedeutet, dass der Schlüssel zu keinem aktiven Website-Deployment passt: Er wurde beim Einfügen verändert, oder das Deployment ist mit dem Schalter auf seiner Karte im botts.ai Tab Bereitstellen ausgeschaltet.
Anleitungen nach Plattform: WordPress, Wix, Squarespace, Shopify, Webflow, Jimdo, TYPO3, Google Tag Manager.
Entfernen: das Script-Tag löschen. Sonst wird nichts auf der Website installiert.

Zuletzt aktualisiert am 4. Oktober 2026