React-chatbot: voeg een AI-chatbot toe aan je React-app (Vite, CRA, SPA)

Je hebt twee dingen nodig voordat je aan je code begint:

• Een Nexoply-account en de sleutel van je chatbot. Meld je gratis aan (het Gratis-abonnement bevat 50 gesprekken per maand, zonder creditcard) en open daarna Chatbot in het dashboard. De installatiecode daar bevat je sleutel al. De sleutel is openbaar: hij is geen geheim en geeft geen toegang tot het account, dus hij mag gewoon in client-side code staan.
• De bedrijfsinformatie waarmee de assistent antwoordt: diensten en prijzen, veelgestelde vragen, voorwaarden, openingstijden en werkgebieden. Het snelst gaat het als je het adres van je website invult en Nexoply de openbare pagina's laat importeren, ook pagina's die met JavaScript zijn gebouwd, dus een React-site werkt ook. Er wordt niets toegevoegd zonder akkoord.

Maak src/components/Chatbot.tsx aan. Het component rendert zelf niets: het voegt het Nexoply-script één keer aan de pagina toe, en de widget tekent de chatknop en het chatvenster.

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

type ChatbotProps = { chatbotKey: string };

export function Chatbot({ chatbotKey }: ChatbotProps) {
  useEffect(() => {
    // Geen sleutel, of het script staat al op de pagina: niets te doen.
    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;
}

Render het één keer, in het component dat tijdens het hele bezoek gekoppeld blijft (meestal App). Zet in Vite VITE_NEXOPLY_KEY=YOUR-KEY in een .env-bestand:

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

export default function App() {
  return (
    <>
      {/* je layout en routes */}
      <Chatbot chatbotKey={import.meta.env.VITE_NEXOPLY_KEY} />
    </>
  );
}

Het component werkt zonder aanpassingen in een TypeScript-project met Vite of Create React App. Voor gewoon JavaScript noem je het bestand Chatbot.jsx en verwijder je het type ChatbotProps. Create React App kent geen import.meta.env: geef in plaats daarvan process.env.REACT_APP_NEXOPLY_KEY door. Omdat het een gewoon component is, kun je het ook voorwaardelijk renderen, bijvoorbeeld {hasConsent && <Chatbot chatbotKey={key} />}, zodat de chat pas laadt nadat een bezoeker je cookiebanner heeft geaccepteerd.

• Waarom er geen cleanupfunctie is. De widget heeft geen API om hem na het laden te verwijderen, en hij staat buiten je React-boom, dus bij het unmounten van het component hoeft niets ongedaan te worden gemaakt.
• Waarom StrictMode geen probleem is. In development voert React StrictMode effects twee keer uit. De controle met querySelector slaat de tweede keer over, en zelfs als het script twee keer zou worden toegevoegd, wordt de widget maar één keer per chatbotsleutel gekoppeld. Om dezelfde reden is hot reload veilig.
• Laat het attribuut staan. De widget leest zijn instellingen uit zijn eigen scripttag, dus de tag moet het attribuut data-chatbot houden en een src die widget.js bevat. Door s.dataset.chatbot in te stellen ontstaat dat attribuut.

Hoef je het laden niet vanuit code te sturen, sla het component dan over. Elke React-SPA heeft een HTML-basispagina: in Vite is dat index.html in de hoofdmap van het project, in Create React App public/index.html. Plak de code vlak voor de afsluitende </body>-tag:

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

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

Vervang YOUR-KEY door de sleutel van de pagina Chatbot. Het script laadt asynchroon, dus het blokkeert het renderen van je app nooit. Voeg data-open="true" aan de tag toe als het chatvenster bij het laden moet openen. Dat is de hele installatie: opnieuw bouwen, deployen, en de knop staat op elke route.

Wie naar een React-chatbot zoekt, vindt twee soorten tools, en die lossen verschillende problemen op:

• Een chat-UI-bibliotheek geeft je React-componenten voor de chat zelf: een berichtenlijst, een invoerveld, tekstballonnen en soms vooraf geschreven gespreksstappen. Alles achter de interface bouw je zelf: vaste scripts, of een backend die een AI-model aanroept met je eigen API-sleutel, plus de inhoud waarmee hij antwoordt, de opslag van gesprekken en bescherming tegen misbruik. Dat past als chat onderdeel is van je product, bijvoorbeeld een assistent die met de eigen gegevens van je gebruikers werkt.
• Een gehoste AI-chatbot zoals Nexoply levert de interface, de AI en de backend samen. Hij beantwoordt vragen van bezoekers alleen met de bedrijfsinformatie die je toevoegt of importeert (diensten en prijzen, veelgestelde vragen, voorwaarden, openingstijden) en zegt het als hij iets niet weet. Er is geen AI-sleutel en geen servercode; gesprekken, onbeantwoorde vragen en spambescherming regel je in het dashboard. Dat past bij een website voor klanten die vragen over het bedrijf moet beantwoorden.

Wil je volledige controle over de interface en het model, begin dan met een bibliotheek. Is het doel vragen van bezoekers beantwoorden zonder een backend te bouwen of te beheren, dan is de gehoste widget minder werk. Zie hoe Nexoply antwoordt met je bedrijfsinformatie.

• Hij blijft buiten je React-boom. De widget wordt aan document.body gekoppeld, buiten je #root-element, dus re-renders en routewijzigingen verwijderen hem nooit en veranderen zijn opmaak niet.
• Shadow DOM in beide richtingen. Je CSS (Tailwind, CSS modules, globale resets) lekt niet in de chat, en zijn CSS lekt niet in je app.
• Routewijzigingen werken gewoon. Met React Router of een andere router op basis van de history-API houden bezoekers hun gesprek terwijl ze navigeren, en paginaregels (zoals een zijtab alleen op /pricing) worden opnieuw gecontroleerd als de URL verandert. Zonder extra code.
• Geen cookies. Hij bewaart een anonieme bezoekers-id in localStorage en het huidige gesprek in sessionStorage.

Wil je een knop "Chat met ons" in je hero-sectie of op je prijspagina? Verstuur het event nexoply:open-chat op window:

export function ChatButton() {
  return (
    <button onClick={() => window.dispatchEvent(new Event("nexoply:open-chat"))}>
      Chat met ons
    </button>
  );
}

Er is geen import nodig: de widget luistert op window naar dit event. Wil je alleen je eigen knop tonen, stel de berichtknop dan via een paginaregel in het dashboard in op "Geen knop".

Controleer deze drie dingen voordat je deployt:

• Toegestane websites. Heb je Alleen toestaan op deze websites ingevuld (dashboard → Chatbot), voeg dan je ontwikkelhost met poort toe, zoals localhost:5173 voor Vite of localhost:3000 voor Create React App, of laat de lijst leeg zolang je test.
• Content-Security-Policy. Stuurt je app een CSP-header of -metatag mee, sta dan https://nexoply.com toe in script-src, connect-src en img-src.
• Test het van begin tot eind. Start de app, klik op de chatknop, stel een echte vraag en zoek die op onder Gesprekken in het dashboard.

Verschijnt de knop nog steeds niet?

• Lege sleutel. Zonder sleutel laadt het component niets. Log import.meta.env.VITE_NEXOPLY_KEY: Vite stelt alleen variabelen beschikbaar die met VITE_ beginnen, en na het bewerken van .env moet je de dev-server opnieuw starten.
• Geblokkeerd verzoek. Kijk in de console en het tabblad Network van je browser naar CSP-fouten of een geblokkeerde widget.js.
• Chatbot uitgeschakeld. Controleer of de schakelaar Chatbot ingeschakeld aan staat.
• Adblockers. Heel soms blokkeert een browserextensie chatwidgets. Probeer een privévenster zonder extensies.

Staat het script er eenmaal in, dan hoef je de code niet meer aan te raken: wijzigingen in het dashboard staan binnen ongeveer een minuut op de site. Onder Chatbot → Aanpassen geef je de berichtknop vorm (icoon of je eigen afbeelding of SVG, tekstlabel, vorm, grootte, kleuren, positie) of gebruik je in plaats daarvan een zijtab aan de rand van het scherm. Stel een andere look in voor telefoons en gebruik paginaregels om hem op bepaalde routes te veranderen (bijvoorbeeld /pricing of /services/*). Het chatvenster neemt je lettertypen, kleuren en logo over, en het startscherm kan knoppen bieden zoals Boeken, Bellen of WhatsApp.

Gebruik je een ander framework? Lees hoe je een chatbot toevoegt aan Next.js met next/script of de chatbothandleiding voor Vue en Nuxt; voor een marketingsite op WordPress is er de WordPress-handleiding. Voor het volledige beeld lees je hoe de assistent je bedrijf leert kennen of vergelijk je de abonnementen en gesprekslimieten.