KI-Chatbot in Webflow einbinden — Schritt für Schritt in 5 Minuten
↑ Teil von KI-Chatbot für Website
Kurzfassung: Sie erstellen bei BotChata einen KI-Agenten, lassen ihn Ihre Website indexieren und fügen ein einziges Script-Tag in den Custom Code (Footer) von Webflow ein. Danach beantwortet der Chatbot Besucherfragen rund um die Uhr — nur auf Basis Ihrer eigenen Inhalte, in über 40 Sprachen. Keine Programmierkenntnisse nötig. DSGVO-konform, Hosting in Deutschland.
→ Kostenlos starten — ohne Kreditkarte · In 5 Minuten live · Für immer kostenloser Tarif
Was Sie brauchen (Voraussetzungen)
- Ein Webflow-Projekt mit bezahltem Site-Plan und verbundener Domain.
- Ein BotChata-Konto — der Gratis-Start genügt (Anmeldung mit E-Mail, ohne Kreditkarte).
- 5 Minuten Zeit. Kein Code, kein Entwickler.
⚠️ Wichtig — Webflow-Tarife: Seitenweiter Custom Code in den Projekteinstellungen wird in einem bezahlten Site-Plan veröffentlicht. Auf der kostenlosen
*.webflow.io-Staging-Domain ist Custom Code eingeschränkt und läuft evtl. nicht. Custom Code pro Seite erfordert den CMS-Plan oder höher. Für ein seitenweites Chat-Widget ist ein bezahlter Site-Plan der richtige Weg.
Teil 1 — BotChata einrichten (ca. 3 Minuten)
Schritt 1: Konto erstellen und Agenten anlegen
Registrieren Sie sich auf botchata.net und öffnen Sie das Dashboard. Gehen Sie zu „AI-Agenten“ → „Neuer Agent“, vergeben Sie einen Namen (z. B. Ihren Kunden- oder Firmennamen) und bestätigen Sie.
Für den Gratis-Start brauchen Sie keine Kreditkarte — nur Ihre E-Mail. (Den 7-tägigen Test der Premium-Funktionen aktivieren Sie später optional mit Karte; für diese Anleitung nicht nötig.)
Schritt 2: Website indexieren lassen
Öffnen Sie beim Agenten den Reiter „Links / Quellen“ und klicken Sie auf „Quelle hinzufügen“. Geben Sie Ihre Website-URL ein und wählen Sie „Gesamte Website hinzufügen“.
BotChata liest jede erreichbare Unterseite und macht daraus die Wissensbasis. Für ~50 Seiten dauert das 1–3 Minuten. Der Status wechselt von „Indexierung“ zu „Bereit“.
Warum das wichtig ist: Der Bot antwortet ausschließlich aus Ihren indexierten Inhalten. Steht eine Antwort nicht auf Ihrer Website, sagt er das ehrlich — statt etwas zu erfinden. Das schützt Ihre Glaubwürdigkeit.
Schritt 3: Kurz testen
Wechseln Sie zum Reiter „Übersicht“ und stellen Sie dem Bot im Live-Vorschaufenster ein paar typische Kundenfragen. Stimmen die Antworten, geht es ans Einbinden.
Schritt 4: Einbettungs-Code kopieren
Öffnen Sie die Installations-/Einbetten-Ansicht des Agenten und kopieren Sie das Script-Tag. Es sieht so aus:
<script
src="https://botchata.net/api/widget.js"
data-api-key="IHR_SCHLÜSSEL"
data-api-url="https://botchata.net/api"
defer
></script>
Das
defer-Attribut sorgt dafür, dass das Widget asynchron lädt und Ihre Ladezeit (Core Web Vitals) nicht ausbremst. Das Widget läuft in einem isolierten Shadow-DOM — es kann Ihr Webflow-Design nicht stören.
Teil 2 — Code in Webflow einfügen (ca. 2 Minuten)
Sie haben zwei Wege. Methode A bringt das Widget auf jede Seite und ist für die meisten Projekte die beste.
✅ Methode A (empfohlen): seitenweiter Footer-Code
- Im Webflow-Designer die Projekteinstellungen (bzw. Site-Einstellungen) öffnen.
- Zum Reiter „Custom Code“ (Benutzerdefinierter Code) gehen.
- Das BotChata-Script in das Feld „Footer Code“ einfügen (vor
</body>). - Änderungen speichern.
- Die Site veröffentlichen (Custom Code wird erst beim Veröffentlichen live).
Nutzen Sie Footer Code, nicht Head Code — das Script gehört vor
</body>, damit die Seite zuerst rendert und das Widget danach lädt.
Methode B: eine einzelne Seite (Seiteneinstellungen-Custom-Code)
Wenn Sie den Chat nur auf einer Seite möchten (CMS-Plan oder höher):
- Die Seite öffnen → Seiteneinstellungen (Zahnrad neben dem Seitennamen).
- Zu „Custom Code“ → „Before
</body>tag“ scrollen und das Script einfügen. - Speichern und Veröffentlichen.
Methode B wirkt nur auf dieser Seite. Für ein seitenweites schwebendes Widget nutzen Sie Methode A.
Schritt 3 — Prüfen, ob es funktioniert (Verifizierung)
- Die Site veröffentlichen, dann Ihre Live-Domain in einem neuen, privaten Browserfenster (Inkognito) öffnen — nicht die Designer-Vorschau.
- Unten rechts erscheint die BotChata-Sprechblase.
- Klicken Sie darauf und stellen Sie eine echte Frage zu Ihrem Angebot.
- Der Bot sollte in wenigen Sekunden mit Inhalten von Ihrer Website antworten.
Sehen Sie das Widget? Dann sind Sie live. 🎉
DSGVO-Hinweis für deutsche Websites
- Hosting in Deutschland: BotChata läuft bei Hetzner in Deutschland; Daten verlassen die EU nicht ohne Einwilligung, und es findet kein KI-Training mit Ihren Daten statt.
- Auftragsverarbeitung: Schließen Sie den AVV mit BotChata ab (Vorlage im Konto verfügbar) und nennen Sie das Tool in Ihrer Datenschutzerklärung.
- Consent / Cookie-Banner: Wenn Sie Webflows Consent-Funktionen oder ein Tool wie Cookiebot nutzen, ordnen Sie das BotChata-Script so zu, dass es erst nach Einwilligung lädt.
- EU-AI-Act-konform: Besucher erkennen vor dem ersten Chat, dass sie mit einer KI sprechen — die Transparenzpflicht nach Art. 50 (ab August 2026) ist standardmäßig erfüllt.
Häufige Probleme (Troubleshooting)
| Problem | Lösung |
|---|---|
| Das Widget erscheint nicht. | Haben Sie nach dem Speichern veröffentlicht? Custom Code wird erst beim Veröffentlichen live. Prüfen Sie die Live-Domain (nicht die Designer-Vorschau) und ob Sie einen bezahlten Site-Plan haben. |
| Code-Feld fehlt / ist ausgegraut. | Seitenweiter Custom Code braucht einen bezahlten Site-Plan; Code pro Seite braucht den CMS-Plan oder höher. |
| Der Bot antwortet „Das weiß ich nicht“. | Die betreffende Seite ist evtl. nicht indexiert. In BotChata unter „Quellen“ prüfen und neu indexieren (ein Klick). |
| Das Widget kollidiert mit dem Design. | Sollte durch das Shadow-DOM nicht passieren. Tritt es doch auf: Position/Z-Index im Widget-Builder (ab Business) anpassen. |
| Antwortet in der falschen Sprache. | BotChata erkennt die Sprache des Besuchers automatisch (40+ Sprachen). Mit einer deutschen Frage in einem frischen Fenster testen. |
Häufige Fragen (FAQ)
Braucht BotChata eine Webflow-App oder Integration? Nein. Ein einziges Script-Tag in Projekteinstellungen → Custom Code → Footer genügt — keine App, kein Connector.
Kann ich es im kostenlosen Webflow-Plan nutzen?
Nicht zuverlässig. Custom Code wird in einem bezahlten Site-Plan veröffentlicht; auf der kostenlosen *.webflow.io-Domain ist er eingeschränkt und läuft evtl. nicht. Für ein Live-Widget einen bezahlten Site-Plan nutzen.
Ist das gut für Agenturen und Kunden-Sites? Ja — das ist ein typisches Einsatzfeld. Sie binden es in Minuten in die Webflow-Site eines Kunden ein; im Gratis-Tarif erscheint „Powered by BotChata“ im Footer, das Sie in einem bezahlten Tarif für einen White-Label-Eindruck entfernen.
Ist das DSGVO-konform? Ja. Hosting in Deutschland (Hetzner), AVV inklusive, kein KI-Training mit Ihren Daten, über Ihr Consent-Tool steuerbar. Details oben.
Erfindet der Bot Antworten? Nein. Er antwortet nur aus Ihren indexierten Website-Inhalten. Fehlt eine Information, sagt er das ehrlich, statt zu raten.
Was kostet das? Der BotChata-Gratis-Start kostet 0 € (100 Nachrichten/Monat, ohne Kreditkarte). Bezahlte Tarife beginnen bei 29 €/Monat — fester Preis pro Tarif, keine Credits pro Nachricht. (Ihr Webflow-Plan wird separat von Webflow abgerechnet.)
Verlangsamt das Widget meine Website?
Nein. Es lädt asynchron (defer) in einem isolierten Shadow-DOM und blockiert das Rendern nicht.
Jetzt starten
Fügen Sie Ihrer Webflow-Site in 5 Minuten einen KI-Chatbot hinzu, der Ihre Inhalte kennt.
→ Kostenlos starten — ohne Kreditkarte
In 5 Minuten eingerichtet. 100 Nachrichten/Monat gratis. DSGVO-konform, Hosting in Deutschland.