React-Chatbot: einen KI-Chatbot in Ihre React-App einbauen (Vite, CRA, SPA)

Bevor Sie Ihren Code anfassen, brauchen Sie zwei Dinge:

• Ein Nexoply-Konto und Ihren Chatbot-Schlüssel. Registrieren Sie sich kostenlos (der kostenlose Tarif umfasst 50 Unterhaltungen pro Monat, ohne Kreditkarte) und öffnen Sie dann Chatbot im Dashboard. Der Installationscode dort enthält bereits Ihren Schlüssel. Der Schlüssel ist öffentlich: Er ist kein Geheimnis und gewährt keinen Zugriff auf das Konto, darf also im clientseitigen Code stehen.
• Die Unternehmensinformationen, mit denen der Assistent antwortet: Leistungen und Preise, FAQs, Richtlinien, Öffnungszeiten und Einsatzgebiete. Am schnellsten geben Sie die Adresse der Website ein und lassen Nexoply die öffentlichen Seiten importieren, auch Seiten, die mit JavaScript erstellt werden, eine React-Website funktioniert also ebenfalls. Nichts wird übernommen, bevor es freigegeben ist.

Legen Sie src/components/Chatbot.tsx an. Die Komponente rendert selbst nichts: Sie fügt das Nexoply-Script einmal zur Seite hinzu, und das Widget zeichnet den Chat-Button und das Chatfenster.

// src/components/Chatbot.tsx
import { useEffect } from "react";

type ChatbotProps = { chatbotKey: string };

export function Chatbot({ chatbotKey }: ChatbotProps) {
  useEffect(() => {
    // Kein Schlüssel oder das Script ist schon auf der Seite: nichts zu tun.
    if (!chatbotKey || document.querySelector("script[data-chatbot]")) return;
    const s = document.createElement("script");
    s.src = "https://nexoply.com/widget.js";
    s.async = true;
    s.dataset.chatbot = chatbotKey;
    document.body.appendChild(s);
  }, [chatbotKey]);

  return null;
}

Rendern Sie sie einmal, in der Komponente, die während des gesamten Besuchs gemountet bleibt (meist App). Bei Vite tragen Sie VITE_NEXOPLY_KEY=YOUR-KEY in eine .env-Datei ein:

// src/App.tsx
import { Chatbot } from "./components/Chatbot";

export default function App() {
  return (
    <>
      {/* Ihr Layout und Ihre Routen */}
      <Chatbot chatbotKey={import.meta.env.VITE_NEXOPLY_KEY} />
    </>
  );
}

Die Komponente funktioniert unverändert in einem TypeScript-Projekt mit Vite oder Create React App. Für reines JavaScript nennen Sie die Datei Chatbot.jsx und entfernen den Typ ChatbotProps. Create React App kennt kein import.meta.env: Übergeben Sie stattdessen process.env.REACT_APP_NEXOPLY_KEY. Da es eine gewöhnliche Komponente ist, können Sie sie auch bedingt rendern, etwa {hasConsent && <Chatbot chatbotKey={key} />}, um den Chat erst zu laden, wenn ein Besucher Ihr Cookie-Banner akzeptiert hat.

• Warum es keine Cleanup-Funktion gibt. Das Widget hat keine API, um es nach dem Laden wieder zu entfernen, und es liegt außerhalb Ihres React-Baums. Beim Unmounten der Komponente muss also nichts rückgängig gemacht werden.
• Warum StrictMode kein Problem ist. In der Entwicklung führt React StrictMode Effects zweimal aus. Die Prüfung mit querySelector überspringt den zweiten Durchlauf, und selbst wenn das Script zweimal hinzugefügt würde, wird das Widget pro Chatbot-Schlüssel nur einmal gemountet. Aus demselben Grund ist Hot Reload unproblematisch.
• Behalten Sie das Attribut. Das Widget liest seine Einstellungen aus dem eigenen Script-Tag. Der Tag muss deshalb das Attribut data-chatbot behalten und ein src mit widget.js haben. s.dataset.chatbot erzeugt dieses Attribut.

Wenn Sie das Laden nicht aus dem Code steuern müssen, brauchen Sie die Komponente nicht. Jede React-SPA hat eine HTML-Hülle: Bei Vite ist das die index.html im Projektstamm, bei Create React App public/index.html. Fügen Sie den Code direkt vor dem schließenden </body>-Tag ein:

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>

  <!-- KI-Chatbot von Nexoply -->
  <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
</body>

Ersetzen Sie YOUR-KEY durch den Schlüssel von der Seite Chatbot. Das Script wird asynchron geladen und blockiert das Rendern Ihrer App daher nie. Ergänzen Sie data-open="true" im Tag, wenn sich das Chatfenster beim Laden öffnen soll. Das ist die ganze Installation: neu bauen, deployen, und der Button erscheint auf jeder Route.

Wer nach einem React-Chatbot sucht, findet zwei Arten von Werkzeugen, und sie lösen unterschiedliche Probleme:

• Eine Chatbot-UI-Bibliothek liefert React-Komponenten für den Chat selbst: eine Nachrichtenliste, ein Eingabefeld, Sprechblasen, manchmal vorgegebene Gesprächsschritte. Alles hinter der Oberfläche bauen Sie selbst: feste Skripte oder ein Backend, das ein KI-Modell mit Ihrem eigenen API-Schlüssel aufruft, dazu die Inhalte, aus denen es antwortet, die Speicherung der Unterhaltungen und den Schutz vor Missbrauch. Das passt, wenn der Chat Teil Ihres Produkts ist, etwa ein Assistent, der mit den eigenen Daten Ihrer Nutzer arbeitet.
• Ein gehosteter KI-Chatbot wie Nexoply liefert Oberfläche, KI und Backend zusammen. Er beantwortet die Fragen der Besucher nur mit den Unternehmensinformationen, die Sie hinzufügen oder importieren (Leistungen und Preise, FAQs, Richtlinien, Öffnungszeiten), und sagt es, wenn er etwas nicht weiß. Es gibt keinen KI-Schlüssel und keinen Servercode; Unterhaltungen, unbeantwortete Fragen und Spamschutz verwalten Sie im Dashboard. Das passt zu einer Website für Kunden, die Fragen zum Unternehmen beantworten soll.

Wenn Sie volle Kontrolle über Oberfläche und Modell wollen, beginnen Sie mit einer Bibliothek. Wenn es darum geht, Fragen von Besuchern zu beantworten, ohne ein Backend zu bauen oder zu betreiben, macht das gehostete Widget weniger Arbeit. Lesen Sie, wie Nexoply mit Ihren Unternehmensinformationen antwortet.

• Es bleibt außerhalb Ihres React-Baums. Das Widget wird an document.body angehängt, außerhalb Ihres #root-Elements, sodass Re-Renders und Routenwechsel es nie entfernen oder umgestalten.
• Shadow DOM in beide Richtungen. Ihr CSS (Tailwind, CSS Modules, globale Resets) wirkt nicht in den Chat hinein, und sein CSS wirkt nicht in Ihre App hinein.
• Routenwechsel funktionieren einfach. Mit React Router oder jedem anderen History-basierten Router behalten Besucher beim Navigieren ihre Unterhaltung, und Seitenregeln (etwa ein Seitenreiter nur auf /pricing) werden bei einer URL-Änderung neu geprüft. Ohne zusätzlichen Code.
• Keine Cookies. Es speichert eine anonyme Besucher-ID in localStorage und die aktuelle Unterhaltung in sessionStorage.

Sie möchten einen Button „Chatten Sie mit uns“ im Hero-Bereich oder auf der Preisseite? Lösen Sie das Event nexoply:open-chat auf window aus:

export function ChatButton() {
  return (
    <button onClick={() => window.dispatchEvent(new Event("nexoply:open-chat"))}>
      Chatten Sie mit uns
    </button>
  );
}

Ein Import ist nicht nötig: Das Widget lauscht auf window auf dieses Event. Wenn Sie nur Ihren eigenen Button zeigen möchten, stellen Sie den Chat-Button im Dashboard mit einer Seitenregel auf „Kein Button“.

Prüfen Sie vor dem Deployment diese drei Einstellungen:

• Erlaubte Websites. Wenn Sie Nur auf diesen Websites erlauben ausgefüllt haben (Dashboard → Chatbot), tragen Sie Ihren Entwicklungshost mit Port ein, etwa localhost:5173 für Vite oder localhost:3000 für Create React App, oder lassen Sie die Liste beim Testen leer.
• Content-Security-Policy. Wenn Ihre App einen CSP-Header oder ein CSP-Meta-Tag sendet, erlauben Sie https://nexoply.com in script-src, connect-src und img-src.
• Von Anfang bis Ende prüfen. Starten Sie die App, klicken Sie auf den Chat-Button, stellen Sie eine echte Frage und suchen Sie sie im Dashboard unter Unterhaltungen.

Wenn der Button trotzdem nicht erscheint:

• Leerer Schlüssel. Ohne Schlüssel lädt die Komponente nichts. Geben Sie import.meta.env.VITE_NEXOPLY_KEY in der Konsole aus: Vite stellt nur Variablen bereit, die mit VITE_ beginnen, und nach einer Änderung an .env müssen Sie den Dev-Server neu starten.
• Blockierte Anfrage. Suchen Sie in der Browser-Konsole und im Netzwerk-Tab nach CSP-Fehlern oder einer blockierten widget.js.
• Chatbot ausgeschaltet. Prüfen Sie, ob der Schalter Chatbot aktiviert eingeschaltet ist.
• Werbeblocker. In seltenen Fällen blockiert eine Browser-Erweiterung Chat-Widgets. Versuchen Sie es in einem privaten Fenster ohne Erweiterungen.

Ist das Script einmal eingebunden, müssen Sie den Code nicht mehr anfassen: Änderungen im Dashboard erscheinen innerhalb von etwa einer Minute auf der Website. Unter Chatbot → Anpassen gestalten Sie den Chat-Button (Symbol oder eigenes Bild bzw. SVG, Textbeschriftung, Form, Größe, Farben, Position) oder verwenden stattdessen einen Seitenreiter am Bildschirmrand. Legen Sie ein eigenes Aussehen für Smartphones fest und ändern Sie es mit Seitenregeln auf ausgewählten Routen (zum Beispiel /pricing oder /services/*). Das Chatfenster übernimmt Ihre Schriften, Farben und Ihr Logo, und der Startbildschirm kann Buttons wie Buchen, Anrufen oder WhatsApp anbieten.

Sie nutzen ein anderes Framework? Lesen Sie, wie Sie Next.js mit next/script einen Chatbot hinzufügen, oder die Anleitung für Vue und Nuxt; für eine Marketing-Website mit WordPress gibt es die WordPress-Anleitung. Für das Gesamtbild lesen Sie, wie der Assistent Ihr Unternehmen kennenlernt, oder vergleichen Sie Tarife und Unterhaltungslimits.