KI-Chatbot zu Webflow hinzufügen: Schritt-für-Schritt-Anleitung

Webflow-Websites wirken hochwertig, laden schnell und geben Ihnen präzise Kontrolle über das Design. Aber sie bringen keinen integrierten KI-Chat mit. Wenn Sie einen Chatbot wollen, der Ihre Inhalte tatsächlich versteht und echte Gespräche mit Besuchern führen kann, müssen Sie ihn selbst hinzufügen.

Die gute Nachricht: Einen KI-Chatbot zu Webflow hinzuzufügen dauert etwa 20 Minuten und erfordert außer dem Einfügen eines einzigen Script-Tags keinerlei Code. Sie erstellen den Chatbot, trainieren ihn mit den Inhalten Ihrer Website und fügen ihn über die Custom-Code-Einstellungen zu Webflow hinzu. Er funktioniert auf jeder Seite, passt sich Ihrem Design an und beantwortet Besucherfragen sofort.

Diese Anleitung deckt den gesamten Prozess ab: Chatbot erstellen und trainieren, in Webflow einbetten, Erscheinungsbild anpassen und für die besten Ergebnisse konfigurieren.

Webflow-Chatbot-Optionen im Vergleich

Bevor wir in die Einrichtung einsteigen, hier ein Vergleich der wichtigsten Ansätze, um Chat-Funktionen zu Webflow hinzuzufügen.

Wenn Sie ein Chat-Widget brauchen, bei dem ein menschliches Team in Echtzeit antwortet, ist ein Live-Chat-Tool wie Intercom die richtige Wahl. Wenn Sie einen KI-gestützten Assistenten wollen, der Fragen automatisch beantwortet und mit den tatsächlichen Inhalten Ihrer Website trainiert ist, ist ein KI-Chatbot die bessere Wahl. Die meisten Webflow-Website-Betreiber wollen Letzteres – einen Self-Service-Assistenten, der Besucherfragen übernimmt, ohne dass dafür Personal nötig ist.

Schritt 1: Chatbot erstellen

Beginnen Sie damit, einen Chatbot in Agentkit zu erstellen. Sie brauchen ein kostenloses Konto.

1. Gehen Sie zu Agentkit und registrieren Sie sich.
2. Erstellen Sie einen neuen Chatbot und geben Sie ihm einen Namen, der seinen Zweck widerspiegelt (z. B. „Website Assistant“ oder Ihren Markennamen).
3. Wählen Sie ein KI-Modell. GPT-4o ist eine starke Standardwahl. Sie haben eine Reihe von Modellen von OpenAI, Anthropic (Claude) und Google (Gemini) zur Auswahl.

Schritt 2: Mit den Inhalten Ihrer Webflow-Website trainieren

Das ist der Schritt, der den Chatbot wirklich nützlich macht. Sie geben ihm die tatsächlichen Inhalte Ihrer Website, damit er Besucherfragen präzise beantworten kann.

Ihre Website-URL hinzufügen

1. Gehen Sie im Agentkit-Dashboard zur Seite Quellen Ihres Chatbots.
2. Klicken Sie auf Quelle hinzufügen und wählen Sie Website.
3. Geben Sie die URL Ihrer Webflow-Website ein (z. B. https://yoursite.webflow.io oder Ihre eigene Domain https://yoursite.com).
4. Der Crawler folgt den Links von Ihrer Haupt-URL aus und indexiert alle erreichbaren Seiten: Ihre Startseite, die Über-uns-Seite, Serviceseiten, Portfolio, Blogbeiträge, FAQ, Preise und alle anderen verlinkten Inhalte.

Bei Webflow-Websites mit Interaktionen, Animationen oder dynamisch geladenen Inhalten nutzt der Agentkit-Crawler Firecrawl, um JavaScript vor der Indexierung zu rendern. So wird sichergestellt, dass über Webflow-Interaktionen geladene Inhalte präzise erfasst werden.

Q&A-Paare für wichtige Themen hinzufügen

Während der Website-Crawl Ihre allgemeinen Inhalte erfasst, geben Ihnen Q&A-Paare präzise Kontrolle über bestimmte Antworten. Erstellen Sie Paare für Ihre wichtigsten Besucherfragen:

Q&A-Paare haben Vorrang vor gecrawltem Inhalt – damit stellen Sie sicher, dass der Chatbot bei kritischen Themen genau das sagt, was Sie wollen.

Dokumente hochladen (optional)

Wenn Sie Ressourcen haben, die nicht auf Ihrer Webflow-Website veröffentlicht sind – Fallstudien im PDF-Format, Leistungsbeschreibungen, Preislisten –, laden Sie diese als Dokumentenquellen hoch. Der Chatbot nutzt diese Inhalte neben Ihren Website-Daten, um Fragen zu beantworten.

Im Playground testen

Bevor Sie den Chatbot zu Ihrer Live-Website hinzufügen, testen Sie ihn im Agentkit-Playground.

Stellen Sie die Fragen, die Ihre Besucher typischerweise stellen:

• „Welche Leistungen bieten Sie an?“
• „Was kostet das?“
• „Wie fange ich an?“
• „Arbeiten Sie mit Unternehmen in [Branche]?“
• „Wie lautet Ihre Rückerstattungsrichtlinie?“

Wenn eine Antwort falsch, unvollständig oder schlecht formuliert ist, passen Sie Ihre Trainingsdaten an. Fügen Sie Q&A-Paare hinzu oder aktualisieren Sie sie, ergänzen Sie weitere Textausschnitte, oder verfeinern Sie Ihre Website-Quelle um bestimmte Seiten, die Sie möglicherweise übersehen haben.

Schritt 3: Erscheinungsbild des Widgets anpassen

Konfigurieren Sie das Chatbot-Widget vor dem Einbetten passend zum Design Ihrer Webflow-Website.

Gehen Sie im Agentkit-Dashboard zu den Einstellungen Ihres Chatbots:

Farbschema. Legen Sie die Primärfarbe passend zu Ihrer Marke fest. Verwenden Sie den exakten Hex-Code aus Ihrem Webflow-Styleguide. Chat-Blase, Header und Sende-Schaltfläche verwenden alle diese Farbe.

Position. Wählen Sie unten rechts (Standard und am häufigsten) oder unten links. Wählen Sie die Seite, die nicht mit anderen schwebenden Elementen auf Ihrer Webflow-Website in Konflikt gerät.

Willkommensnachricht. Schreiben Sie eine Nachricht, die zu Ihrer Markenstimme passt und klare Erwartungen setzt:

• Für ein Dienstleistungsunternehmen: „Hallo, ich kann Fragen zu unseren Leistungen, Preisen und unserem Ablauf beantworten. Womit kann ich Ihnen helfen?“
• Für ein SaaS-Produkt: „Willkommen! Fragen Sie mich alles zu unserem Produkt, den Funktionen oder den Preisen.“
• Für eine Portfolio-Website: „Hallo. Ich kann Ihnen von unserer Arbeit, unseren Fähigkeiten und der Zusammenarbeit mit Kunden erzählen.“

Vorgeschlagene Nachrichten. Fügen Sie drei bis fünf vorgeschlagene Nachrichten hinzu, die Besucher zu Ihren wertvollsten Gesprächen führen:

• „Welche Leistungen bieten Sie an?“
• „Was kostet das?“
• „Kann ich Beispiele Ihrer Arbeit sehen?“
• „Wie fange ich an?“

Avatar. Laden Sie Ihr Logo oder ein Marken-Icon als Chatbot-Avatar hoch, für ein stimmiges Erscheinungsbild.

Schritt 4: In Webflow einbetten

Hier folgt die eigentliche Installation. In Webflow haben Sie zwei Optionen: website-weit (jede Seite) oder seitenspezifisch.

Option A: Website-weite Installation (empfohlen)

Dadurch wird der Chatbot zu jeder Seite Ihrer Webflow-Website hinzugefügt.

1. Gehen Sie im Agentkit-Dashboard zu den Einstellungen Ihres Chatbots und dann zu Veröffentlichen.
2. Kopieren Sie das Script-Tag:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

3. Öffnen Sie in Webflow Ihre Project Settings (das Zahnrad-Symbol in der linken Seitenleiste des Designers oder über das Projekt-Dashboard).
4. Gehen Sie zum Tab Custom Code.
5. Fügen Sie das Script-Tag im Bereich Footer Code ein (das Feld mit der Bezeichnung „Before </body> tag“).
6. Klicken Sie auf Save Changes.
7. Veröffentlichen Sie Ihre Website, damit die Änderungen wirksam werden.

Der Chatbot erscheint jetzt auf jeder Seite Ihrer veröffentlichten Webflow-Website.

Option B: Seitenspezifische Installation

Wenn Sie den Chatbot nur auf bestimmten Seiten haben möchten (zum Beispiel auf Ihrer Preis- und Kontaktseite, aber nicht auf Ihrem Blog):

1. Öffnen Sie im Webflow-Designer die Seite, auf der der Chatbot erscheinen soll.
2. Öffnen Sie die Page Settings (Zahnrad-Symbol neben dem Seitennamen im Pages-Panel).
3. Scrollen Sie zum Bereich Custom Code.
4. Fügen Sie das Script-Tag im Feld Before </body> tag ein.
5. Klicken Sie auf Save und dann auf Publish.

Wiederholen Sie dies für jede Seite, auf der der Chatbot erscheinen soll. Seiten ohne das Skript zeigen den Chatbot nicht an.

Installation überprüfen

Nach der Veröffentlichung:

1. Öffnen Sie Ihre Webflow-Website in einem neuen Browser-Tab (oder einem Inkognito-Fenster, um Caching zu vermeiden).
2. Suchen Sie nach der Chat-Blase in der unteren Ecke.
3. Klicken Sie auf die Blase und senden Sie eine Testnachricht.
4. Prüfen Sie, ob die Antwort korrekt ist und das Styling richtig aussieht.
5. Testen Sie auf Mobilgeräten, um sicherzustellen, dass das Widget auf kleineren Bildschirmen korrekt angezeigt wird.

Wenn der Chatbot nach der Veröffentlichung nicht sofort erscheint, laden Sie die Seite mit einem harten Reload neu (Strg+Umschalt+R oder Cmd+Umschalt+R). Webflows CDN kann eine Minute brauchen, um den aktualisierten Code zu verteilen.

Schritt 5: Domain-Beschränkungen konfigurieren

Sobald Ihr Chatbot live ist, beschränken Sie ihn auf Ihre Domain, damit er nicht auf unbefugten Websites eingebettet werden kann.

1. Gehen Sie im Agentkit-Dashboard zu den Einstellungen Ihres Chatbots.
2. Fügen Sie unter Domain-Beschränkungen Ihre Webflow-Domain hinzu (z. B. yoursite.com).
3. Wenn Sie auch die Standard-Webflow-Domain (yoursite.webflow.io) nutzen, fügen Sie diese ebenfalls hinzu.

Der Chatbot lädt nur auf den angegebenen Domains. Das verhindert, dass jemand Ihren Embed-Code kopiert und Ihren Chatbot (und Ihr Nachrichtenkontingent) auf seiner eigenen Website nutzt.

Webflow-spezifische Tipps

Umgang mit Webflow-Interaktionen

Wenn Ihre Webflow-Website stark auf Interaktionen und Animationen setzt, lädt das Chatbot-Widget unabhängig davon und beeinträchtigt sie nicht. Das Widget nutzt ein fest positioniertes Overlay und liegt so über Ihrem Seiteninhalt, ohne von Webflow-Transforms oder scrollausgelösten Animationen beeinflusst zu werden.

CMS-Collection-Seiten

Wenn Sie einen Webflow-CMS-Blog oder ein CMS-Portfolio haben, erscheint der (website-weit installierte) Chatbot auf jeder CMS-Collection-Seite. Trainieren Sie den Chatbot mit der gesamten Website-URL, damit er Fragen zu jedem Inhalt beantworten kann, einschließlich CMS-Seiten.

Wenn sich Ihre CMS-Inhalte häufig ändern, ziehen Sie den Standard-Plan ($119.99/Monat) in Betracht, der automatisches Retraining enthält. Der Chatbot crawlt Ihre Website regelmäßig erneut und übernimmt neue CMS-Einträge automatisch.

Webflow Ecommerce

Trainieren Sie den Chatbot bei Webflow-Ecommerce-Websites mit Ihren Produktseiten, der Versandrichtlinie, der Rückgaberichtlinie und den FAQ. Der Chatbot kann Produktfragen beantworten, Versandoptionen erklären und Rückgabeanfragen bearbeiten. Detaillierte Einrichtungstipps finden Sie in unserem Leitfaden für Ecommerce-Chatbots.

Staging vs. Produktion

Wenn Sie Webflows Staging-Umgebung (yoursite.webflow.io) zum Testen nutzen, bevor Sie auf Ihrer eigenen Domain veröffentlichen, können Sie das Chatbot-Skript zu beiden hinzufügen. Nutzen Sie die Domain-Beschränkung, um zu steuern, auf welcher Domain der Chatbot aktiv ist. Erlauben Sie während des Testens beide Domains. In der Produktion beschränken Sie ihn nur auf Ihre eigene Domain.

Auswirkung auf die Performance

Das Agentkit-Widget lädt asynchron (beachten Sie das async-Attribut im Script-Tag). Das bedeutet, es blockiert das Laden Ihrer Seite nicht. Es lädt im Hintergrund, nachdem der Inhalt Ihrer Seite bereit ist. Es gibt keine messbare Auswirkung auf die Ladezeit Ihrer Webflow-Website oder Ihren Lighthouse-Score.

Lead-Erfassung auf Webflow

Ein Chatbot auf Ihrer Webflow-Website ist neben einem Support-Tool auch ein Lead-Erfassungs-Tool. Besucher, die mit dem Chatbot interagieren, haben bereits Interesse gezeigt. Ihre E-Mail-Adresse zum richtigen Zeitpunkt zu erfassen, verwandelt einen beiläufigen Besucher in eine Follow-up-Gelegenheit.

Lead-Erfassung einrichten

1. Gehen Sie im Agentkit-Dashboard zu den Aktionen Ihres Chatbots.
2. Aktivieren Sie Leads erfassen mit Name und E-Mail als Pflichtfeldern.
3. Konfigurieren Sie in den Anweisungen Ihres Chatbots, wann das Formular erscheint: „Bieten Sie nach der Beantwortung einer Frage zu Leistungen oder Preisen an, weitere Details zu senden, und nutzen Sie das Lead-Erfassungsformular, um die E-Mail-Adresse zu erfassen.“

Leads mit Ihren Tools verbinden

Zapier, Webhooks und REST-API-Zugriff sind alle ab dem Hobby-Plan ($29.99/Monat) verfügbar.

Einen tieferen Einblick in Lead-Erfassungsstrategien finden Sie unter So nutzen Sie Chatbots zur Lead-Generierung.

An Ihr Webflow-Design anpassen

Ihre Webflow-Website hat eine eigene Designsprache. So sorgen Sie dafür, dass sich der Chatbot nativ anfühlt statt aufgesetzt.

Markenfarbe. Kopieren Sie den exakten Hex-Wert Ihrer primären Markenfarbe aus dem Webflow-Style-Panel und verwenden Sie ihn als Farbe für das Chatbot-Widget. So fügen sich Chat-Blase und Header nahtlos in Ihre Website ein.

Schriftkonsistenz. Das Chatbot-Widget verwendet einen klaren System-Font-Stack, der gut zu den meisten Webflow-Typografien passt. Der Text des Widgets ist bewusst neutral gehalten, damit er nicht mit individuellen Schriftarten kollidiert.

Abstand und Position. Wenn Ihre Webflow-Website eine fixierte Fußzeile, einen schwebenden CTA-Button oder ein Cookie-Banner hat, positionieren Sie den Chatbot auf der gegenüberliegenden Seite, um Überschneidungen zu vermeiden. In den Chatbot-Einstellungen können Sie zwischen unten links und unten rechts wählen.

Tonfall der Willkommensnachricht. Schreiben Sie Willkommensnachricht und vorgeschlagene Nachrichten in derselben Stimme wie die Texte Ihrer Webflow-Website. Wenn Ihre Website locker und freundlich ist, sollte der Chatbot das widerspiegeln. Wenn Ihre Website professionell und formell ist, sollte der Chatbot dem entsprechen.

Chatbot-Performance auf Ihrer Webflow-Website messen

Nachdem der Chatbot einige Wochen gelaufen ist, überprüfen Sie seine Leistung im Agentkit-Dashboard.

Prüfen Sie die Chat-Protokolle im ersten Monat wöchentlich. Hier finden Sie die schnellen Erfolge: Fragen, die der Chatbot schlecht beantwortet und die sich mit einem Q&A-Paar leicht beheben lassen, sowie Fragen, die er richtig beantwortet und mit denen Sie Ihren Trainingsansatz validieren können.

Agentkit-Pläne für Webflow-Websites

Die jährliche Abrechnung spart bei allen kostenpflichtigen Plänen etwa 20 %. Die meisten Webflow-Websites starten zum Testen mit dem Free-Plan und wechseln zu Hobby, sobald der Chatbot echte Besucherfragen bearbeitet.

Häufige Probleme beheben

Chatbot erscheint nach der Veröffentlichung nicht. Webflows CDN kann einige Minuten brauchen, um die Änderung zu verteilen. Laden Sie die Seite mit einem harten Reload neu. Erscheint der Chatbot immer noch nicht, prüfen Sie, ob sich das Skript im richtigen Custom-Code-Feld befindet (Footer Code in den Project Settings oder Before </body> tag in den Page Settings).

Chatbot erscheint im Designer, aber nicht auf der veröffentlichten Website (oder umgekehrt). Die Designer-Vorschau führt keine benutzerdefinierten Skripte aus. Sie sehen den Chatbot nur auf der veröffentlichten Website. Das ist normales Webflow-Verhalten.

Chatbot überschneidet sich mit einem Webflow-Element. Ändern Sie die Position des Chatbots (unten links vs. unten rechts) in den Agentkit-Einstellungen, oder passen Sie den z-index Ihres Webflow-Elements an, wenn es über dem Chatbot erscheinen soll.

Chatbot gibt falsche Antworten. Prüfen Sie die konkrete Frage in Ihren Chat-Protokollen und fügen Sie dann ein Q&A-Paar mit der korrekten Antwort hinzu oder aktualisieren Sie es. Q&A-Paare haben bei passenden Fragen Vorrang vor gecrawltem Inhalt.

Chatbot lädt auf bestimmten Seiten nicht. Wenn Sie die seitenspezifische Installation verwendet haben, prüfen Sie, ob das Skript in den Custom-Code-Einstellungen dieser Seite vorhanden ist. Wenn Sie die website-weite Installation verwendet haben, prüfen Sie, ob kein widersprüchliches Skript oder Sicherheits-Header es blockiert.

Erste Schritte

Einen KI-Chatbot zu Ihrer Webflow-Website hinzuzufügen, ist eine der wirkungsvollsten Änderungen, die Sie mit dem geringsten Aufwand vornehmen können. Ein einziges Script-Tag gibt Ihnen einen Assistenten, der rund um die Uhr Besucherfragen beantwortet, Leads erfasst und das Erlebnis für jeden Besucher Ihrer Website verbessert.

1. Registrieren Sie sich bei Agentkit (kostenlos).
2. Erstellen Sie einen Chatbot und trainieren Sie ihn mit der URL Ihrer Webflow-Website.
3. Fügen Sie Q&A-Paare für Ihre wichtigsten Besucherfragen hinzu.
4. Passen Sie das Widget an Ihre Marke an.
5. Fügen Sie den Embed-Code in Webflows Custom-Code-Einstellungen ein.
6. Veröffentlichen und testen.

Der gesamte Prozess dauert etwa 20 Minuten. Ihr Chatbot beantwortet sofort echte Besucherfragen.

Erstellen Sie Ihren Chatbot kostenlos →

Keine Kreditkarte erforderlich.