Dokumentation

Webflow

Füge das aktuelle Agentkit-Chat-Widget mit Site- oder Page-Custom-Code zu einer Webflow-Site hinzu und teste es dann auf einer veröffentlichten Domain.

Verwende die Seite Kanäle → Website-Einbindung → Chat-Widget deines Agenten, um den vollständigen generierten Einbettungscode zu kopieren. Er enthält das Bootstrap- und Widget-Skript mit deiner Agent-ID und der aktuellen Widget-URL. Verwende keine Skript-URL, die aus einem älteren Beispiel kopiert wurde.

Laut Webflows Anleitung zu Custom Code erfordert Site- oder Page-Custom-Code einen Core-, Growth-, Agency- oder Freelancer-Workspace oder eine Site mit einem aktiven Site-Plan. Ein Site manager oder Designer muss ihn hinzufügen. Prüfe den Plan und die Zugriffsrechte deiner Site, bevor du beginnst.

Das Widget auf der gesamten Site hinzufügen

  1. Aktiviere in Agentkit Chat-Widget unter Kanäle → Website-Einbindung und kopiere beide generierten Script-Tags.
  2. Öffne in Webflow Site settings → Custom code.
  3. Füge den vollständigen Code in Footer code ein, vor dem schließenden </body>-Tag. Füge keine zweite Kopie zu einzelnen Seiten hinzu.
  4. Speichere die Änderungen und veröffentliche dann auf der Domain, die du testen möchtest.
  5. Öffne eine veröffentlichte Seite und stelle eine Frage, deren Antwort du bereits anhand einer freigegebenen Quelle geprüft hast. Bestätige, dass das Widget lädt und die Antwort korrekt ist.

Footer code gilt für die gesamte Site. Webflow erlaubt Skripte auch im Head code, aber die Anleitung empfiehlt, Skripte nach Möglichkeit vor </body> zu platzieren. Verwende den von Agentkit generierten Code, statt dessen URL oder ID zu bearbeiten. Allgemeine Einbettungsprüfungen findest du in der Anleitung zur Website-Einbettung.

Das Widget auf einer einzelnen Seite hinzufügen

Wenn das Widget nur auf einer Seite erscheinen soll, lass es aus den Site settings weg. Öffne im Webflow Designer die Page settings → Custom code → Before </body> tag dieser Seite, füge beide generierten Script-Tags ein, speichere und veröffentliche. Webflow fügt den Seitencode nach dem siteweiten Code ein, sodass dasselbe Widget an beiden Stellen zweimal geladen würde.

Die veröffentlichte Site testen

Laut Webflow kann Custom Code in der Designer-Vorschau ausgeführt werden, aber Änderungen erreichen Besucher erst nach dem Veröffentlichen. Teste zuerst die veröffentlichte *.webflow.io-Staging-Domain, wenn dein Workflow das zulässt, und danach die Custom Domain, die du verwenden möchtest. Wenn du Domain-Beschränkungen hast, erlaube jede Domain, die du tatsächlich testest.

Wenn das Widget fehlt, prüfe, ob Chat-Widget in Agentkit aktiviert ist, ob der vollständige Code im Quelltext der veröffentlichten Seite erscheint, ob die Skript-URL im Browser lädt und ob du die beabsichtigte Webflow-Domain veröffentlicht hast. Wenn das Codefeld nicht verfügbar ist, prüfe deinen Webflow-Workspace oder Site-Plan und deine Rolle anhand von Webflows aktuellen Zugriffsregeln. Wenn das Widget erscheint, aber eine Antwort fehlschlägt, prüfe die Quellen und Domain-Beschränkungen des Agenten.

Für ein Chat-Panel innerhalb eines Seitenabschnitts statt einer schwebenden Blase aktiviere den separaten Iframe-Kanal und folge der Iframe-Anleitung.