Dokumentation

Webflow

Fügen Sie Ihren Agenten über Custom Code in den Project Settings zu einer Webflow-Website hinzu.

Fügen Sie Ihren KI-Agenten zu einer beliebigen Webflow-Website hinzu, indem Sie den Einbettungscode unter Project Settings → Custom Code einfügen. Das Snippet wird automatisch auf jeder Seite geladen.

Holen Sie sich zuerst Ihren Einbettungscode über Chatbot > Veröffentlichen im Dashboard.

Schnelleinrichtung

  1. Öffnen Sie Ihr Projekt im Webflow Designer.
  2. Klicken Sie in der linken Seitenleiste auf das Zahnradsymbol (Project Settings).
  3. Wechseln Sie zum Tab Custom Code.
  4. Scrollen Sie zu Footer Code (das Feld mit der Bezeichnung Before </body> tag).
  5. Fügen Sie Ihren Einbettungscode ein.
  6. Klicken Sie auf Save Changes.
  7. Klicken Sie oben rechts auf Publish, um die Website live zu schalten.

Beispielformat (verwenden Sie die tatsächlichen Werte aus Chatbot > Veröffentlichen):

<script
  src="YOUR_WIDGET_URL"
  data-chatbot="YOUR_CHATBOT_ID"
  async
></script>

Das Widget-Skript ist so konzipiert, dass es lädt, nachdem die Seite interaktiv ist. Wird es in Footer Code eingefügt, blockiert es das anfängliche Rendern nicht und passt zum Verhalten des async-Attributs.

Tarifanforderungen

Die Verfügbarkeit von Custom Code hängt von Ihrer Site-Plan-Stufe ab. Webflow hat website-weiten Custom Code im kostenlosen Starter-Tarif historisch eingeschränkt, und die Verfügbarkeit hat sich zwischen den Tarifüberarbeitungen verschoben.

Die aktuellen Regeln finden Sie im Tarifvergleich von Webflow unter https://webflow.com/pricing. Zeigt der Tab Custom Code ein Schloss-Symbol an oder ist das Feld Footer Code deaktiviert, führen Sie ein Upgrade des Site-Plans durch.

Installation für einzelne Seiten

Um das Widget nur auf bestimmten Seiten zu laden:

  1. Öffnen Sie die Seite im Designer.
  2. Klicken Sie auf dieser Seite auf das Zahnradsymbol Page Settings.
  3. Scrollen Sie zu Custom Code → Before </body> tag.
  4. Fügen Sie Ihren Einbettungscode dort statt im projektweiten Feld ein.

Code auf Seitenebene ergänzt den Code auf Projektebene für diese Seite und kann ihn überschreiben.

Nach der Veröffentlichung

Custom Code läuft nur auf der veröffentlichten Website, nicht in der Designer-Vorschau. Klicken Sie nach dem Speichern auf Publish und wählen Sie Ihre Domains aus:

  • *.webflow.io — die Staging-Domain
  • Ihre verbundene eigene Domain (falls vorhanden)

Veröffentlichen Sie auf der Domain, die Sie tatsächlich testen möchten.

Fehlerbehebung

Widget erscheint nicht in der Designer-Vorschau.

  • Erwartetes Verhalten. Custom Code läuft nur auf der veröffentlichten Website. Öffnen Sie die Live-URL.

Widget erscheint auch nicht auf der Live-Website.

  • Prüfen Sie, ob Sie sowohl auf Save Changes als auch auf Publish geklickt haben.
  • Prüfen Sie, ob Ihre Domain unter Chatbot > Veröffentlichen > Sicherheit zugelassen ist.
  • Erzwingen Sie ein Neuladen (⌘+Shift+R), um den CDN-Cache zu umgehen.

Das Feld Custom Code ist deaktiviert.

  • Ihre Site-Plan-Stufe enthält kein Custom Code. Führen Sie ein Upgrade unter https://webflow.com/pricing durch.

Testen

  1. Öffnen Sie die veröffentlichte Website in einem Inkognito-Fenster.
  2. Achten Sie auf die Chat-Blase.
  3. Klicken Sie, um sie zu öffnen, und senden Sie eine Testnachricht.

Nächste Schritte