So binden Sie einen KI-Chatbot in Webflow ein (in 5 Minuten)

Nexoply ist ein KI-Assistent, den Sie in einem eigenen Dashboard erstellen und mit einem Script-Tag in eine Webflow-Website einbinden. Webflow enthält nur diese Zeile; Wissen, Aussehen und Verhalten des Assistenten verwalten Sie in Nexoply, ohne Code und ohne KI-Schlüssel, denn Nexoply betreibt die KI. Das bedeutet in der Praxis:

• Er kennt das Unternehmen. Hinterlegen Sie Leistungen und Preise, FAQs, Richtlinien, Öffnungszeiten und Einsatzgebiete oder importieren Sie sie von den öffentlichen Seiten der Webflow-Website (15 pro Scan im kostenlosen Tarif). Nichts wird übernommen, bevor Sie es freigeben.
• Er antwortet nur mit diesen Informationen. Er ist angewiesen, zu sagen, wenn er etwas nicht weiß, statt zu raten, und jede Unterhaltung steht zur Prüfung im Dashboard.
• Er passt zum Design. Chat-Button oder Seitenreiter, Farben, Schriften und Logo, fertige Vorlagen, ein eigenes Aussehen auf dem Smartphone, Seitenregeln für ausgewählte Seiten und Buttons für den Startbildschirm wie Buchen, Anrufen oder WhatsApp.
• Er antwortet in 12 Sprachen. Besucher, die in einer anderen unterstützten Sprache schreiben, erhalten Antworten in dieser Sprache.
• Was er nicht ist. Er ist kein Live-Chat-Postfach für menschliche Mitarbeiter und nimmt selbst keine Buchungen oder Zahlungen entgegen; seine Buttons führen Besucher zu einer Buchungsseite, einer Telefonnummer oder WhatsApp.

Der kostenlose Tarif umfasst 50 Unterhaltungen pro Monat; kostenpflichtige Tarife beginnen bei $19 im Monat, siehe Preisseite. Sie erstellen Webflow-Websites für Kunden? Jedes Unternehmen hat ein eigenes Nexoply-Konto und einen Chatbot, richten Sie ihn also mit den Informationen des jeweiligen Kunden ein. Alle Optionen finden Sie unter Chatbot-Funktionen.

Prüfen Sie zuerst diese drei Punkte:

• Ein Nexoply-Konto. Kostenlos registrieren: Der kostenlose Tarif umfasst 50 Unterhaltungen pro Monat, ohne Kreditkarte.
• Die Unternehmensinformationen in Nexoply: Leistungen und Preise, FAQs, Richtlinien, Öffnungszeiten und Einsatzgebiete. Am schnellsten geht es, wenn Sie die Adresse der Webflow-Website eingeben und Nexoply ihre öffentlichen Seiten importieren lassen, auch mit JavaScript erstellte Seiten. Sie prüfen die Vorschläge; nichts wird übernommen, bevor Sie es freigeben.
• Zugriff auf die Einstellungen des Webflow-Projekts und einen Tarif, der eigenen Code erlaubt. Wenn Ihnen die Einstellungen unter Custom code nicht zur Verfügung stehen, prüfen Sie Ihren Tarif oder fragen Sie den Inhaber der Website.

Öffnen Sie in Ihrem Nexoply-Dashboard die Seite Chatbot (klicken Sie auf Chatbot erstellen, falls noch nicht geschehen) und kopieren Sie den Installationscode. Er sieht so aus:

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

An die Stelle von YOUR-KEY tritt der eigene Schlüssel Ihres Chatbots, den die Seite Chatbot für Sie einsetzt. Der Schlüssel ist öffentlich: Er ist kein Passwort und gewährt keinen Zugriff auf Ihr Konto. Möchten Sie den Assistenten sehen, bevor Sie Webflow anfassen? Klicken Sie auf Testseite mit Ihrem Chatbot öffnen, um ihn auf einer Beispielseite auszuprobieren.

1. 1

   Project settings öffnen

   Öffnen Sie in Webflow die Project settings (Projekteinstellungen) des Projekts.

2. 2

   Custom code öffnen

   Öffnen Sie den Bereich Custom code. Code an dieser Stelle gilt für die ganze Website und läuft also auf jeder Seite des Projekts.

3. 3

   In Footer code einfügen

   Fügen Sie Ihren Nexoply-Code in Footer code ein. Footer code wird direkt vor dem Ende jeder Seite eingefügt, und genau dort gehört das Skript hin.

4. 4

   Speichern

   Speichern Sie die Änderungen in den Project settings.

5. 5

   Veröffentlichen

   Veröffentlichen Sie die Website. Eigener Code wird nur der veröffentlichten Website hinzugefügt, erst dieser Schritt lässt den Chat-Button also erscheinen.

Öffnen Sie die veröffentlichte Website in einem neuen privaten Fenster, damit Sie sie so sehen wie ein Besucher. Unten in der Ecke erscheint ein Chat-Button. Stellen Sie eine echte Frage, etwa „Nehmen Sie neue Patienten auf?“ oder „Was soll ich zum ersten Termin mitbringen?“ (weitere Beispiele finden Sie in der Anleitung zum KI-Chatbot für Praxen). Innerhalb von Sekunden erscheint die Unterhaltung in Ihrem Nexoply-Dashboard unter Unterhaltungen. Ab dann erreichen Änderungen, die Sie im Dashboard vornehmen, die Website innerhalb von etwa einer Minute, ohne dass Sie in Webflow erneut veröffentlichen müssen.

• Nicht veröffentlicht. Die Project settings zu speichern reicht nicht: Veröffentlichen Sie die Website und laden Sie sie dann neu.
• Prüfung im Designer. Prüfen Sie die veröffentlichte Website in einem privaten Fenster, nicht im Designer.
• Falsches Feld oder unvollständiger Code. Öffnen Sie Custom code erneut und prüfen Sie, dass der Code in Footer code steht, vollständig und unverändert, von <script bis </script>.
• Tarif oder Berechtigungen. Wenn Sie keinen eigenen Code speichern können, prüfen Sie, ob Ihr Webflow-Tarif ihn erlaubt oder ob Ihre Rolle im Projekt Ihnen erlaubt, die Project settings zu bearbeiten.
• Erlaubte Domains. Wenn Sie auf der Seite Chatbot Nur auf diesen Websites erlauben ausgefüllt haben, tragen Sie jede Adresse ein, unter der die Website veröffentlicht ist (zum Beispiel meinepraxis.de oder *.meinepraxis.de für Subdomains).
• Content-Security-Policy. Wenn die Website eine Content-Security-Policy sendet, erlauben Sie https://nexoply.com in script-src, connect-src und img-src.
• Chatbot ausgeschaltet oder Werbeblocker. Prüfen Sie, dass der Schalter Chatbot aktiviert eingeschaltet ist. In seltenen Fällen blockiert eine Browser-Erweiterung Chat-Widgets; versuchen Sie es mit einem anderen Browser.

Das Design legen Sie in Ihrem Nexoply-Dashboard fest, nicht in Webflow. Unter Chatbot → Anpassen wählen Sie das Symbol des Chat-Buttons (Ihr eigenes Bild oder eingefügten SVG-Code), die Beschriftung, Form, Größe, Farben, Rahmen, Schatten und Position, oder Sie nutzen stattdessen einen Seitenreiter am Bildschirmrand (etwa „Hilfe“). Sie können auf dem Smartphone ein anderes Aussehen festlegen und es mit Seitenregeln auf ausgewählten Seiten ändern (zum Beispiel /services/*). Passen Sie das Chatfenster an die Schriften und Farben der Website an, fügen Sie ein Logo hinzu oder starten Sie mit einer fertigen Vorlage. Ein Startbildschirm kann Ihre eigenen Buttons zeigen, etwa Buchen, Anrufen oder WhatsApp.

Um den Chat über einen Ihrer eigenen Webflow-Buttons zu öffnen, kann ein kurzes Skript window.dispatchEvent(new Event("nexoply:open-chat")) aufrufen; damit er sich gleich beim Laden der Seite öffnet, ergänzen Sie data-open="true" im Script-Tag. Sehen Sie sich danach regelmäßig die Unterhaltungen an: Fragen, die der Assistent nicht beantworten konnte, werden aufgelistet und lassen sich mit einem Klick in FAQs verwandeln. Den vollständigen Überblick finden Sie unter So funktioniert Nexoply; für andere Plattformen lesen Sie, wie Sie einen KI-Chatbot in jede Website einbinden.