KI-Agenten für Webflow mit ASDK

Webflow-Websites werden oft von einer Designerin oder einer Agentur gebaut und dann an ein Marketingteam übergeben, das sie aktuell hält. Dazu passt ASDK gut: Es wird einmal als websiteweiter Footer-Code eingebunden, und danach ändern Sie alles an den Agenten, von Farben und Texten bis zur Frage, welche Agenten aktiv sind, im ASDK-Dashboard, ohne das Webflow-Projekt noch einmal anzufassen.

Was ASDK einer Webflow-Website hinzufügt

ASDK baut aus Ihren veröffentlichten Seiten, einschließlich der Seiten Ihrer CMS-Collections, und aus hochgeladenen Dokumenten eine Wissensdatenbank. Jeder Agent, den Sie einschalten, antwortet daraus.

• Chat (Early Access, ab dem Free-Tarif) beantwortet Besucherfragen aus Ihren Inhalten, verlinkt die Seiten, aus denen jede Antwort stammt, und bietet an, Kontaktdaten aufzunehmen, wenn er nicht weiterhelfen kann.
• Sales (Early Access, ab dem Pro-Tarif) stellt die Qualifizierungsfragen, die Sie in einfachen Worten formulieren, und bietet passenden Besuchern einen Termin an.
• Agent-Ready (Early Access, ab dem Free-Tarif) veröffentlicht das Wissen Ihrer Wissensdatenbank in Formaten, die KI-Assistenten gut lesen, etwa als gehostete llms.txt-Datei.
• Search kommt demnächst. Es wird anstelle eines Suchfelds antworten, mit Quellen.

Weil das Widget ein einzelnes Skript ist, ändert es weder Ihr Layout noch Ihre Klassen oder Interaktionen. Es fügt in einer Ecke der Seite einen Chat-Button hinzu, dessen Position und Farbe Sie im Dashboard festlegen.

Ein Beispiel von einer Webflow-Website

Stellen Sie sich ein kleines Designstudio vor, dessen Webflow-Website seine Leistungen, ein paar Fallstudien und eine Seite „Projekt starten“ zeigt. Ein Besucher auf der Leistungsseite fragt: „Migrieren Sie Websites von WordPress, und was kostet das ungefähr?“

Chat findet die Seite zur Migration und den Abschnitt mit den Preisen, antwortet in zwei oder drei Sätzen und verlinkt beide Seiten. Hat das Studio Sales eingeschaltet, stellt der Agent danach eine der eigenen Qualifizierungsfragen des Studios, etwa nach dem Umfang der bestehenden Website oder dem Starttermin, und bietet einen Termin an, wenn die Antworten zu den Regeln des Studios passen.

Steht auf der Website nichts zu Migrationspreisen, sagt der Agent das, statt eine Zahl zu erfinden, und bietet an, die Frage mit der E-Mail-Adresse des Besuchers weiterzugeben. Das Studio erfährt so, dass seine Preisseite eine Lücke hat, und es lohnt sich, sie für alle Besucher zu schließen, nicht nur für die, die chatten.

Der Webflow-Tarif, den Sie brauchen

Laut der Webflow-Hilfe (geprüft im Oktober 2026) läuft eigener Code nur auf Websites mit einem kostenpflichtigen Site-Tarif oder in einem kostenpflichtigen Workspace. Im kostenlosen Starter-Tarif lassen sich die Code-Felder nicht speichern, deshalb kann ASDK dort nicht laden. Wenn die Felder in Ihrem Projekt gesperrt sind, ist das der Grund.

Die Tarife von ASDK sind davon unabhängig: Der Free-Tarif enthält Chat und Agent-Ready, und die Preisseite nennt den Rest.

ASDK in Webflow einrichten

<script async src="https://cdn.asdk.com/v1/asdk.js" data-site-id="SITE_ID"></script>

Hat eine Agentur Ihre Website gebaut, kann die Seite Install ihr das Snippet und die Webflow-Schritte per E-Mail schicken, und Antworten kommen bei Ihnen an.

Was verfügbar ist und was demnächst kommt

ASDK als Ganzes ist im Early Access: Die Agenten funktionieren und Sie können sie nutzen, aber sie können sich ändern, während wir sie verbessern.

Webflow-Details, die Sie kennen sollten

• Websiteweit, nicht pro Seite. Nutzen Sie den Footer-Code in den Site settings, damit jede Seite das Widget erhält. Eigener Code auf Seitenebene bräuchte das Snippet auf jeder einzelnen Seite, und vergessene Seiten hätten kein Widget.
• Staging-Adressen. Der Installations-Check öffnet nur Seiten auf den eigenen Domains Ihrer Website. Um eine webflow.io-Seite zu prüfen, fügen Sie diese Adresse zuerst den erlaubten Domains Ihrer Website in ASDK hinzu, oder prüfen Sie stattdessen die eigene Domain.
• Optionen pro Seite. Das Snippet akzeptiert die Attribute data-position, data-locale und data-open. So könnte etwa eine Preisseite den Chat beim Laden öffnen, der Rest der Website aber nicht. Die HTML-Anleitung listet die Optionen.
• Content Security Policy. Webflow-Websites senden selten eine, aber wenn Ihr Setup über einen Proxy oder ein CDN eine Richtlinie hinzufügt, erlauben Sie https://cdn.asdk.com für Skripte und https://api.asdk.com für Verbindungen. Siehe Content Security Policy.

Bessere Antworten von einer Webflow-Website

Mit Webflow lassen sich leicht Seiten gestalten, auf denen Text in Tabs, Slidern und Hover-Zuständen steckt. Das sieht gut aus, aber ein Agent liest wie eine Suchmaschine, was im HTML der Seite steht. Ein paar Gewohnheiten helfen:

• Wichtige Fakten als echten Text. Preise, Tariflimits, Einsatzgebiete und Lieferzeiten sollten als Text auf der Seite stehen, nicht nur in Bildern oder Lottie-Animationen.
• Wiederkehrende Fakten ins CMS. Eine Collection mit Leistungen oder Standorten, jeweils mit eigener Seite, gibt dem Agenten pro Thema eine klare Quelle.
• Antworten nicht nur hinter Interaktionen verstecken. Inhalte in geschlossenen Tabs stehen meist trotzdem im HTML und sind lesbar; Inhalte, die erst nach einem Klick von einem anderen Dienst nachgeladen werden, möglicherweise nicht.
• Jeder Seite einen klaren Titel und eine klare Überschrift geben. Das hilft dem Agenten, die richtige Seite zu zitieren, und Besuchern, dem Link zu vertrauen.

Unser Leitfaden zum Hinzufügen eines Assistenten zu WordPress, Webflow und Wix vergleicht die Plattformen, und einen Chatbot mit Ihren Website-Inhalten trainieren zeigt, wie Sie Seiten für jeden Assistenten vorbereiten.