botts.aiDocs

In WordPress einbinden

So binden Sie Ihr botts.ai Chat-Widget mit dem kostenlosen Plugin WPCode in eine WordPress-Website ein, in sechs Schritten und ohne Theme-Dateien zu bearbeiten.

Mit dieser Anleitung binden Sie das Chat-Widget eines botts.ai Website-Deployments in eine WordPress-Website ein. Sie nutzen dafür das kostenlose Plugin WPCode. Es gibt das Script des Widgets auf jeder Seite aus und behält es, auch wenn Sie Ihr Theme wechseln oder aktualisieren.

Das brauchen Sie

  • Administratorrechte für Ihre WordPress-Website. Nur damit lassen sich Plugins installieren.
  • Eine Website, auf der Plugins erlaubt sind. Bei selbst gehostetem WordPress ist das immer der Fall; auf WordPress.com mit jedem kostenpflichtigen Tarif, nicht aber mit dem kostenlosen.
  • Den Einbettungscode Ihres Website-Deployments. Ö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 1: In WordPress anmelden

Öffnen Sie ihre-domain.ch/wp-admin und melden Sie sich an. Ersetzen Sie ihre-domain.ch durch die Adresse Ihrer Website.

Schritt 2: WPCode installieren und aktivieren

Öffnen Sie Plugins → Plugin hinzufügen (englisch Add Plugin) und suchen Sie nach WPCode. Wählen Sie WPCode – Insert Headers and Footers + Custom Code Snippets, nicht das Plugin Search & Replace desselben Anbieters daneben. Klicken Sie auf Jetzt installieren und danach auf Aktivieren.

Die Seite «Plugins hinzufügen» in WordPress mit «WPCode» im Suchfeld. Das erste Ergebnis, WPCode – Insert Headers and Footers + Custom Code Snippets, ist markiert.

Im Screenshot ist WPCode bereits installiert und ein Update steht bereit, deshalb steht auf der Schaltfläche Update now. Bei einer neuen Installation steht dort Jetzt installieren.

Auf WordPress.com kann die Ansicht anders aussehen: Klicken Sie im linken Menü auf Plugins, suchen Sie nach WPCode, öffnen Sie das Plugin und klicken Sie auf Installieren und aktivieren.

Schritt 3: «Header & Footer» öffnen

Wählen Sie im linken Menü Code Snippets → Header & Footer. Die Seite heisst Global Header and Footer und hat drei Felder: Header, Body und Footer.

Die Seite Global Header and Footer von WPCode, geöffnet über Code Snippets → Header & Footer im WordPress-Menü.

Fehlt das Menü Code Snippets, läuft WPCode im vereinfachten Headers & Footers mode. Öffnen Sie dann Einstellungen → Header & Footer.

Scrollen Sie zum Feld Footer und fügen Sie den Einbettungscode ein. Steht dort bereits Code, setzen Sie den botts.ai Code in eine neue Zeile darunter und lassen den Rest unverändert. Übernehmen Sie den Code genau so, wie Sie ihn kopiert haben: Adresse und Schlüssel dürfen sich nicht ändern.

Das Feld Footer in WPCode mit dem botts.ai Einbettungscode in Zeile 1 und dem Platzhalter YOUR_API_KEY als Schlüssel. Der Hinweis darunter besagt, dass die Scripts vor dem schliessenden body-Tag ausgegeben werden.

WPCode gibt das Feld Footer direkt vor dem schliessenden </body>-Tag aus, und genau dorthin gehört das Script des Widgets.

Schritt 5: Änderungen speichern

Scrollen Sie nach oben und klicken Sie oben rechts auf Save Changes (Änderungen speichern). Damit ist der Code auf Ihrer Website eingebunden. WPCode muss aktiviert bleiben: Deaktivieren Sie das Plugin, verschwindet auch das Widget.

Die Schaltfläche Save Changes oben rechts auf der Seite Global Header and Footer von WPCode.

Schritt 6: Widget auf der Website prüfen

Öffnen Sie Ihre öffentliche Website in einem privaten Fenster, laden Sie die Seite neu und warten Sie einen Moment. Das Chat-Symbol erscheint unten rechts oder dort, wo Sie es im Widget-Editor platziert haben. Öffnen Sie das Widget und senden Sie eine Testfrage. Prüfen Sie auch eine Unterseite und die Ansicht auf dem Smartphone.

Tipp

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

Falls das Widget nicht erscheint

  1. Prüfen Sie, ob der vollständige Code im Feld Footer steht und gespeichert ist.
  2. Prüfen Sie unter Plugins → Installierte Plugins, ob WPCode aktiviert ist.
  3. Leeren Sie den Cache. Ein Cache-Plugin oder der Cache Ihres Hosters kann die Seite noch ohne Widget ausliefern. Auch Performance-Plugins, die JavaScript verzögern oder zusammenfassen, können das Laden des Widgets behindern; schliessen Sie chat-widget.js in deren Einstellungen aus.
  4. Testen Sie in einem privaten Fenster ohne Werbeblocker. Blockiert Ihr Cookie-Banner oder Ihr Consent-Tool Scripts, prüfen Sie dessen Konfiguration.
  5. Prüfen Sie, ob der Schlüssel zum richtigen Deployment gehört und ob das Deployment im Tab Bereitstellen eingeschaltet ist.

Widget ändern oder entfernen

Farben, Texte, den Launcher und alle anderen Einstellungen des Widgets ändern Sie im botts.ai Editor. Ihre Website übernimmt sie, ohne dass Sie in WordPress etwas ändern. Ersetzen müssen Sie den Code nur, wenn sich der Schlüssel des Deployments ändert.

Um das Widget zu entfernen, löschen Sie nur die botts.ai Script-Zeile aus dem Feld Footer und speichern erneut.

Hinweis

Die Screenshots zeigen WordPress auf Englisch. Je nach Sprache und Version heissen Menüs und Schaltflächen etwas anders.

Weitere Hilfe

Andere Plattformen

Anleitungen für andere Plattformen: Wix, Squarespace, Shopify, Webflow, Jimdo, TYPO3 und Google Tag Manager. Der Einbettungscode funktioniert auf jeder Website, auf der Sie Code vor dem schliessenden </body>-Tag einfügen können; siehe Einbettungscode. Betreut jemand anderes Ihre Website, senden Sie den Code an Ihre Webagentur.

Zuletzt aktualisiert am 4. Oktober 2026