Um einen Agentkit-Chatbot zu Webflow hinzuzufügen, kopieren Sie beide generierten Script-Tags aus Channels → Website embed → Chat widget. Fügen Sie sie in den websiteweiten Footer-Code von Webflow oder in das Feld Before </body> einer einzelnen Seite ein und veröffentlichen Sie dann. Prüfen Sie die veröffentlichte Seite und stellen Sie eine Frage, deren Antwort Sie bereits kennen.
Der aktuelle Code von Agentkit enthält einen kleinen Queue-Bootstrap, gefolgt vom Widget-Loader, mit Ihrer Chatbot-ID und der aktuellen Script-URL. Kopieren Sie ihn als Einheit aus Ihrem eigenen Dashboard.
Prüfen Sie den Zugriff, bevor Sie beginnen
Die Custom-Code-Regeln von Webflow erfordern einen Core-, Growth-, Agency- oder Freelancer-Workspace oder einen aktiven Site-Plan. Ein Site manager oder Designer muss den Code hinzufügen. Wenn Sie keinen benutzerdefinierten Code hinzufügen können, prüfen Sie den Plan und Ihre Rolle, bevor Sie den Chatbot ändern. Webflow garantiert nicht, dass benutzerdefinierter Code von Drittanbietern funktioniert, und bietet dafür keine direkte Fehlerbehebung an.
Sie benötigen außerdem einen Agentkit-Chatbot mit aktiviertem Chat widget. Erstellen Sie einen, fügen Sie eine aktuelle Website-Quelle oder freigegebene Q&A-Antworten hinzu und testen Sie einige Fragen im Playground. Prüfen Sie die Antworten, bevor Sie Besucher einladen.
Wenn Sie eine Webflow-URL als Website-Quelle hinzufügen, prüfen Sie, was Agentkit tatsächlich indexiert hat. Ein Crawl oder eine Sitemap kann mehrere Seiten entdecken, aber ausgeschlossene Pfade, nicht zugängliche Inhalte und Extraktionsfehler können Lücken hinterlassen. Der Leitfaden zu Website-Quellen erklärt, wie Sie den Crawl prüfen und eingrenzen. Fügen Sie eine exakte Q&A-Quelle für eine Richtlinienantwort hinzu, die eine bewusste Formulierung erfordert.
Platzieren Sie den Code an einem einzigen Ort in Webflow
Für ein Widget auf jeder Seite:
- Öffnen Sie in Agentkit die Seite Channels → Website embed → Chat widget Ihres Chatbots. Aktivieren Sie den Kanal und kopieren Sie den gesamten generierten Codeblock, einschließlich beider Script-Tags.
- Öffnen Sie in Webflow Site settings → Custom code. Fügen Sie den Code in Footer code ein, den Webflow vor dem schließenden
</body>-Tag einfügt. - Speichern Sie die Änderungen und veröffentlichen Sie auf der Domain, die Sie testen möchten. Das Speichern des Feldes allein aktualisiert die Besucherseite nicht.
Für ein Widget auf einer Seite lassen Sie die Site settings leer. Öffnen Sie im Webflow Designer die Page settings → Custom code → Before </body> tag der Seite, fügen Sie beide Tags ein, speichern und veröffentlichen Sie. Wiederholen Sie dies nur auf Seiten, die das Widget benötigen. Webflow fügt Seitencode nach dem Site-Code ein. Halten Sie das Snippet daher an einem Ort, um Änderungen und Fehlerbehebung zu erleichtern.
Die Webflow-Installationsanleitung enthält eine kürzere Version dieser Schritte.
Überprüfen Sie die veröffentlichte Seite
Öffnen Sie die veröffentlichte *.webflow.io-Domain oder Ihre benutzerdefinierte Domain in einem neuen Tab. Webflow gibt an, dass benutzerdefinierter Code in der Designer-Vorschau ausgeführt werden kann, Besucher eine gespeicherte Änderung aber erst nach dem Veröffentlichen erhalten. Testen Sie die tatsächliche Domain, die Besucher verwenden.
Verwenden Sie diese Abnahmeprüfung, bevor Sie Traffic einladen:
| Prüfung | Erwartetes Ergebnis |
|---|---|
| Seitenquelltext | Das Queue-Bootstrap-Tag und das Widget-Loader-Tag aus dem generierten Code, an einem Ort installiert |
| Widget | Der Launcher öffnet sich auf den veröffentlichten Desktop- und Mobilseiten, auf denen Sie ihn platziert haben |
| Bekannte Antwort | Eine Frage zu freigegebenen Inhalten liefert die beabsichtigte Antwort |
| Domain | Die Staging- und benutzerdefinierten Domains, die Sie testen, sind erlaubt, falls Sie Domain-Beschränkungen aktiviert haben |
Eine Dienstleistungswebsite könnte zum Beispiel „Bieten Sie Termine am Samstag an?“ gegen eine freigegebene Öffnungszeitenseite testen. Wenn die Antwort fehlt oder falsch ist, korrigieren Sie die Quelle oder fügen Sie eine exakte Q&A-Antwort hinzu und wiederholen Sie den Test. Das Vorhandensein einer Chat-Blase beweist nur, dass das Widget gerendert wurde.
Wenn der Launcher fehlt, prüfen Sie den Quelltext der veröffentlichten Seite auf beide Tags, bestätigen Sie, dass Chat widget aktiviert ist, und prüfen Sie die fehlgeschlagenen Netzwerkanfragen des Browsers. Wenn Sie keinen benutzerdefinierten Code hinzufügen können, kehren Sie zu den Plan- und Rollenanforderungen von Webflow zurück. Wenn Sie das Snippet sowohl in den Site- als auch in den Page settings eingefügt haben, entfernen Sie eine Kopie und veröffentlichen Sie erneut. Wenn der Launcher sich öffnet, aber die Antwort fehlschlägt, prüfen Sie die Quellen und erlaubten Domains des Chatbots, bevor Sie Webflow-Code ändern.
Nach einer erfolgreichen Installation sehen Sie sich die ersten echten Fragen an und korrigieren Sie Quellenlücken. Prüfen Sie erneut, wenn Sie eine Webflow-Seite ändern oder zwischen Staging und Ihrer benutzerdefinierten Domain wechseln. Für ein Panel innerhalb des Seiteninhalts statt eines schwebenden Launchers verwenden Sie den separaten iframe-Kanal von Agentkit.
