So binden Sie einen KI-Chatbot in Ihre Website ein (jede Plattform, Schritt für Schritt)

Einen KI-Chatbot in eine Website einzubinden besteht aus zwei Teilen: den Assistenten erstellen und ihn auf der Website platzieren. Bei Nexoply erledigen Sie den ersten Teil im Nexoply-Dashboard, ohne Code und ohne KI-Schlüssel, denn Nexoply betreibt die KI. Der zweite Teil ist eine Zeile Code. Sie brauchen:

• Ein Nexoply-Konto. Kostenlos registrieren: Der kostenlose Tarif umfasst 50 Unterhaltungen pro Monat, ohne Kreditkarte. Kostenpflichtige Tarife beginnen bei $19 im Monat, siehe Preisseite.
• Zugriff auf die Stelle, an der Ihre Website eigenen Code annimmt: eine Footer-Code-Einstellung in Ihrem Website-Baukasten, die Dateien Ihres Themes oder Ihre HTML-Vorlagen. Prüfen Sie bei gehosteten Baukästen, ob Ihr Tarif eigenen Code erlaubt.
• Etwa fünf Minuten, dazu die Zeit, um Ihre Unternehmensinformationen zu prüfen.

Ein KI-Chatbot für die Website eines kleinen Unternehmens ist nur so nützlich wie das, was er weiß. In Nexoply hinterlegen Sie Ihre Leistungen und Preise, FAQs, Richtlinien, Öffnungszeiten und Einsatzgebiete. Am schnellsten geht es mit dem Website-Import: Geben Sie die Adresse Ihrer Website ein, und Nexoply liest Ihre öffentlichen Seiten (Kostenlos 15, Starter 40, Business 100, Pro 200 pro Scan), auch mit JavaScript erstellte Seiten, und schlägt Leistungen mit Preisen, FAQs, Richtlinien, Öffnungszeiten und Kontaktdaten vor. Sie prüfen die Vorschläge; nichts wird übernommen, bevor Sie es freigeben.

Ab dann antwortet der Assistent nur mit diesen Informationen. Er ist angewiesen, zu sagen, wenn er etwas nicht weiß, statt zu raten, und jede Unterhaltung steht zur Prüfung in Ihrem Dashboard. Besucher können in jeder der 12 Sprachen schreiben und erhalten Antworten in ihrer Sprache. Nexoply ist kein Live-Chat-Postfach für menschliche Mitarbeiter und nimmt selbst keine Buchungen oder Zahlungen entgegen; seine Buttons können Besucher zu Ihrer Buchungsseite, Ihrer Telefonnummer oder WhatsApp führen. Den vollständigen Überblick finden Sie unter So funktioniert Nexoply.

Öffnen Sie in Ihrem 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; er sagt dem Widget nur, zu welchem Unternehmen es gehört. Um den Assistenten zu sehen, bevor Sie Ihre Website ändern, klicken Sie auf Testseite mit Ihrem Chatbot öffnen.

Wenn Sie Ihre Website als HTML-Dateien bearbeiten, fügen Sie den Code in einer eigenen Zeile direkt über dem schließenden </body>-Tag ein:

    <!-- …Ihr Seiteninhalt… -->
    <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
  </body>
</html>

1. 1

   Den gemeinsamen Footer finden

   Wenn Ihre Seiten eine gemeinsame Footer-Vorlage oder ein Include nutzen (üblich bei PHP-Websites und Static-Site-Generatoren), fügen Sie den Code dort einmal ein. Andernfalls fügen Sie ihn in jede Seite ein, auf der der Chat-Button erscheinen soll.

2. 2

   Einmal pro Seite einfügen

   Eine Kopie pro Seite genügt. Das Skript lädt asynchron, daher erscheint Ihr Inhalt zuerst, wenn es am Ende der Seite steht.

3. 3

   Hochladen oder deployen

   Speichern Sie die Dateien und laden Sie sie hoch oder deployen Sie sie so, wie Sie Ihre Website sonst aktualisieren.

Website-Baukästen und Frameworks haben jeweils eine Stelle für Code, der auf der ganzen Website gilt. Fügen Sie dort dieselbe Zeile ein; die Plattform-Anleitungen führen Sie Schritt für Schritt durch jede einzelne.

• Kein npm-Paket nötig. Das Widget ist immer dasselbe Script-Tag. Es funktioniert auch, wenn das Tag per Code hinzugefügt wird, solange es das Attribut data-chatbot und eine src mit widget.js behält.
• Single-Page-Apps. Es wird einmal auf der Seite eingebunden, außerhalb des Root-Elements Ihrer App, behält die Unterhaltung, während Besucher navigieren, und prüft Seitenregeln erneut, wenn sich die URL ändert. Doppeltes Laden schadet nicht.
• Serverseitiges Rendering. Es läuft nur im Browser und greift nicht in das Markup Ihres Frameworks ein, daher gibt es keine Hydration-Probleme.
• Content-Security-Policy. Wenn Ihre Website eine sendet, erlauben Sie https://nexoply.com in script-src, connect-src und img-src.
• Lokal testen. Wenn Sie Nur auf diesen Websites erlauben ausfüllen, tragen Sie Ihren lokalen Entwicklungshost mit Port ein (zum Beispiel localhost:3000) oder lassen Sie die Liste beim Testen leer.

Öffnen Sie Ihre Live-Website in einem neuen privaten Fenster. Unten in der Ecke erscheint ein Chat-Button. Stellen Sie eine echte Frage, etwa „Haben Sie am Wochenende einen Notdienst?“ oder „In welchen Gebieten sind Sie tätig?“ (weitere Beispiele finden Sie in der Anleitung zum KI-Chatbot für Installateure). Innerhalb von Sekunden erscheint die Unterhaltung in Ihrem Nexoply-Dashboard unter Unterhaltungen. Ab dann erreichen Änderungen, die Sie im Dashboard vornehmen, Ihre Website innerhalb von etwa einer Minute, ohne dass Sie den Code erneut bearbeiten.

• Code noch nicht live. Stellen Sie sicher, dass die Änderung gespeichert und veröffentlicht oder deployt ist, und laden Sie die Live-Website dann in einem privaten Fenster neu. Die Vorschau im Editor von Website-Baukästen führt eigenen Code nicht immer aus.
• Code verändert oder unvollständig. Prüfen Sie, dass die Zeile vollständig ist, von <script bis </script>, und dass data-chatbot und Ihr Schlüssel unverändert sind.
• Eigener Code nicht erlaubt. Bei gehosteten Baukästen kann eigener Code vom Tarif abhängen (Wix etwa verlangt einen Premium-Tarif mit verbundener Domain, Squarespace den Business-Tarif oder höher).
• Erlaubte Domains. Wenn Sie auf der Seite Chatbot Nur auf diesen Websites erlauben ausgefüllt haben, stellen Sie sicher, dass jede Adresse Ihrer Website exakt eingetragen ist (zum Beispiel meinbetrieb.de oder *.meinbetrieb.de für Subdomains).
• Content-Security-Policy. Eine strenge Richtlinie blockiert das Skript, bis https://nexoply.com in script-src, connect-src und img-src erlaubt ist.
• 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, nie im Code Ihrer Website. Unter Chatbot → Anpassen wählen Sie das Symbol des Chat-Buttons (oder Ihr eigenes Bild bzw. SVG), 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 mit Seitenregeln den Button auf ausgewählten Seiten ändern oder ausblenden (zum Beispiel /services/*). Passen Sie das Chatfenster an Ihre Schriften und Farben an, fügen Sie Ihr Logo hinzu oder starten Sie mit einer fertigen Vorlage. Ein Startbildschirm kann Ihre eigenen Buttons zeigen, etwa Buchen, Anrufen oder WhatsApp. Das Widget nutzt ein Shadow DOM, sodass das CSS Ihrer Website es nicht beeinflusst.

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, und die Auswertungen zeigen Themen, die gefragtesten Zeiten und die Seiten, auf denen der Chat geöffnet wurde. Alle Optionen finden Sie unter Chatbot-Funktionen; wenn Sie erst Tools vergleichen möchten, lesen Sie die besten KI-Chatbots für kleine Unternehmen.