In Webflow einbinden

So binden Sie Ihr botts.ai Chat-Widget über den websiteweiten Custom Code in den Site settings in eine Webflow-Website ein, in sechs Schritten und ohne Ihr Design anzutasten.

Mit dieser Anleitung binden Sie das Chat-Widget eines botts.ai Website-Deployments in eine Webflow-Website ein. Sie nutzen dafür das Feld Footer code in den Site settings (Website-Einstellungen) von Webflow. Damit gelangt das Script des Widgets in einem Schritt auf alle Seiten Ihrer Website, und Ihr Design im Designer bleibt unverändert. Die Bezeichnungen der Webflow-Oberfläche stehen hier auf Englisch.

Das brauchen Sie

• Zugriff auf Ihre Website in Webflow als Owner oder Admin des Workspace oder mit der Rolle Site manager oder Designer. Nur diese Rollen dürfen den Custom Code einer Website bearbeiten. Ausserdem müssen Sie die Website veröffentlichen dürfen.
• Einen Webflow-Plan mit Custom Code: einen kostenpflichtigen Site-Plan (Basic oder höher) für Ihre Website. Ein kostenpflichtiger Workspace-Plan Core, Growth, Freelancer oder Agency schaltet Custom Code ebenfalls frei, allerdings nur auf der webflow.io-Staging-Adresse. Für das Widget auf Ihrer eigenen Domain brauchen Sie ohnehin einen kostenpflichtigen Site-Plan, denn nur Websites mit Site-Plan lassen sich unter einer eigenen Domain veröffentlichen. Sind sowohl Ihre Website als auch Ihr Workspace im kostenlosen Starter-Plan, steht Custom Code nicht zur Verfügung.
• 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>

Schritt 1: «Site settings» öffnen

Melden Sie sich bei Webflow an. Klicken Sie im Dashboard neben dem Namen Ihrer Website, unter ihrer Vorschau, auf das Punkte-Symbol (more options) und wählen Sie Settings. Damit öffnen sich die Site settings dieser Website.

Ist die Website bereits im Designer geöffnet, klicken Sie oben links auf das Webflow-Logo und wählen Site settings.

Schritt 2: «Custom code» öffnen

Klicken Sie im Menü links in den Site settings auf Custom code. Unter der Einstellung Run custom code in Preview enthält der Bereich Custom Code zwei Felder für Code, der auf der ganzen Website gilt: Head code und Footer code.

Der Screenshot zeigt eine Website ohne Site-Plan: Statt der beiden Felder steht im Bereich Custom Code nur der Hinweis «To unlock custom code, add a site plan to this site.» Sehen Sie diesen Hinweis, braucht Ihre Website zuerst einen kostenpflichtigen Site-Plan (siehe «Das brauchen Sie»).

Schritt 3: Code ins Feld «Footer code» einfügen

Fügen Sie den Einbettungscode ins Feld Footer code 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.

Webflow gibt den Footer code auf jeder Seite direkt vor dem schliessenden </body>-Tag aus, und genau dorthin gehört das Script des Widgets.

Schritt 4: Änderungen speichern

Klicken Sie auf Save changes (Änderungen speichern). Der Code ist jetzt in Ihrer Website gespeichert, aber noch nicht live.

Schritt 5: Website veröffentlichen

Webflow bringt Custom Code erst mit dem Veröffentlichen auf Ihre Live-Website. Klicken Sie auf Publish (Veröffentlichen), setzen Sie ein Häkchen bei der Domain, die Besuchende Ihrer Website aufrufen (Ihre eigene Domain und, falls gewünscht, auch die webflow.io-Adresse), und klicken Sie auf Publish to selected domains (auf ausgewählten Domains veröffentlichen).

Schritt 6: Widget auf der Website prüfen

Öffnen Sie Ihre veröffentlichte 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.

Falls das Widget nicht erscheint

1. Prüfen Sie, ob Sie nach dem Speichern veröffentlicht haben, und zwar auf der richtigen Domain. Haben Sie nur die webflow.io-Adresse angehakt, zeigt Ihre eigene Domain noch die Version ohne Widget.
2. Prüfen Sie, ob der vollständige Code im Feld Footer code unter Site settings → Custom code steht und Sie auf Save changes geklickt haben.
3. Testen Sie auf Ihrer veröffentlichten Website, nicht im Webflow-Designer.
4. Prüfen Sie Ihren Plan. Ohne kostenpflichtigen Site-Plan oder kostenpflichtigen Workspace-Plan lässt Webflow den Code nicht zu: Custom code zeigt dann statt der beiden Felder nur «To unlock custom code, add a site plan to this site.»
5. Testen Sie in einem privaten Fenster ohne Werbeblocker. Blockiert Ihr Cookie-Banner oder Ihr Consent-Tool Scripts, prüfen Sie dessen Konfiguration.
6. 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 Webflow etwas ändern oder neu veröffentlichen. 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 code, klicken auf Save changes und veröffentlichen die Website erneut.

Weitere Hilfe

• Webflow Help Center: Custom code in head and body tags (englisch)
• Webflow Help Center: How do I publish or unpublish a Webflow site? (englisch)
• Die allgemeinen Schritte für jede Website: Einbettungscode

Zuletzt aktualisiert am 4. Oktober 2026