WebChatAgent Logo

KI-Chatbot zu Webflow hinzufügen

Webflow

Fügen Sie Ihrer Webflow-Website mithilfe der Custom-Code-Funktion von Webflow in wenigen Minuten einen KI-Chatbot hinzu. Sie fügen das kurze Snippet einmal ein, veröffentlichen die Website, und die Chat-Blase erscheint auf Ihrer Live-Website. Verwenden Sie die website-weite Methode, um jede Seite abzudecken; verwenden Sie die seitenbezogene Methode, wenn Sie ihn nur auf einer einzelnen Seite wünschen.

Methode 1: Website-weit (Alle Seiten)

  1. Site Settings öffnen: Klicken Sie im Webflow Designer auf das Zahnrad-Symbol oder gehen Sie zu Site Settings > Custom Code.
  2. In Footer Code einfügen: Fügen Sie im Bereich Footer Code Folgendes ein:
<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>
  1. Ersetzen Sie YOUR_ID durch Ihre tatsächliche Chatbot-ID aus dem WebChatAgent-Dashboard.
  2. Speichern und Veröffentlichen: Klicken Sie auf Speichern und veröffentlichen Sie anschließend Ihre Website. Das Chat-Widget erscheint auf jeder Seite.

Methode 2: Nur auf einer einzelnen Seite

  1. Wählen Sie im Webflow Designer die Seite aus, auf der Sie den Chatbot wünschen.
  2. Öffnen Sie die Page Settings (Zahnrad-Symbol neben dem Seitennamen).
  3. Scrollen Sie nach unten zu Custom Code > Before </body> tag.
  4. Fügen Sie dasselbe Code-Snippet wie oben ein.
  5. Speichern und Veröffentlichen.

Methode 3: Embed-Element

Für mehr Kontrolle über die Platzierung:

  1. Ziehen Sie ein Embed-Element aus dem Komponenten-Panel auf Ihre Seite.
  2. Fügen Sie das Code-Snippet in den Embed-Editor ein.
  3. Das Widget wird als schwebende Chat-Blase gerendert, unabhängig davon, wo das Embed-Element platziert ist.

Ihre Chatbot-ID finden

Melden Sie sich in Ihrem WebChatAgent-Dashboard an, öffnen Sie Ihren Assistenten und gehen Sie zu Kanäle → Chat-Widget. Klappen Sie Installationsdetails anzeigen auf und klicken Sie auf Code kopieren. Das Snippet enthält bereits Ihre Chatbot-ID, fügen Sie also einfach den gesamten Code ein, anstatt die ID manuell einzugeben.

Fehlerbehebung

  • Widget wird im Designer nicht angezeigt?: Benutzerdefinierter Code wird nur auf der veröffentlichten Website ausgeführt, nicht in der Vorschau des Webflow Designers. Veröffentlichen Sie Ihre Website und rufen Sie die Live-Ansicht auf.
  • Widget erscheint nicht auf allen Seiten?: Stellen Sie sicher, dass Sie Site Settings > Custom Code (Methode 1) verwendet haben und nicht den Code auf Seitenebene.
  • Webflow-Hosting erforderlich?: Benutzerdefinierter Code funktioniert sowohl auf von Webflow gehosteten Websites als auch in exportiertem Code. Wenn Sie Ihre Website exportieren, wird der Code in den Export übernommen.