Chatbot React : ajouter un chatbot IA à votre application React (Vite, CRA, SPA)

Il vous faut deux choses avant de toucher à votre code :

• Un compte Nexoply et la clé de votre chatbot. Inscrivez-vous gratuitement (l’offre gratuite comprend 50 conversations par mois, sans carte bancaire), puis ouvrez Chatbot dans le tableau de bord. Le code d’installation qui s’y trouve contient déjà votre clé. Cette clé est publique : ce n’est pas un secret et elle ne donne aucun accès au compte, vous pouvez donc la mettre dans du code côté client.
• Les informations sur l’entreprise à partir desquelles l’assistant répond : services et prix, FAQ, politiques, horaires d’ouverture et zones d’intervention. Le plus rapide est d’entrer l’adresse du site web et de laisser Nexoply importer les pages publiques, y compris celles construites en JavaScript : un site React fonctionne donc aussi. Rien n’est ajouté avant d’avoir été approuvé.

Créez src/components/Chatbot.tsx. Le composant n’affiche rien lui-même : il ajoute une seule fois le script Nexoply à la page, et c’est le widget qui dessine le bouton et la fenêtre de chat.

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

type ChatbotProps = { chatbotKey: string };

export function Chatbot({ chatbotKey }: ChatbotProps) {
  useEffect(() => {
    // Pas de clé, ou le script est déjà sur la page : rien à faire.
    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;
}

Affichez-le une seule fois, dans le composant qui reste monté pendant toute la visite (en général App). Avec Vite, mettez VITE_NEXOPLY_KEY=YOUR-KEY dans un fichier .env :

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

export default function App() {
  return (
    <>
      {/* votre mise en page et vos routes */}
      <Chatbot chatbotKey={import.meta.env.VITE_NEXOPLY_KEY} />
    </>
  );
}

Le composant fonctionne tel quel dans un projet TypeScript avec Vite ou Create React App. En JavaScript pur, nommez le fichier Chatbot.jsx et supprimez le type ChatbotProps. Create React App ne connaît pas import.meta.env : passez plutôt process.env.REACT_APP_NEXOPLY_KEY. Comme c’est un composant ordinaire, vous pouvez aussi l’afficher sous condition, par exemple {hasConsent && <Chatbot chatbotKey={key} />}, pour ne charger le chat qu’après qu’un visiteur a accepté votre bandeau de cookies.

• Pourquoi il n’y a pas de fonction de nettoyage. Le widget n’a pas d’API pour le retirer une fois chargé, et il vit en dehors de votre arbre React : démonter le composant n’a donc rien à annuler.
• Pourquoi StrictMode ne pose pas de problème. En développement, React StrictMode exécute les effets deux fois. La vérification querySelector ignore la seconde exécution, et même si le script était ajouté deux fois, le widget ne se monte qu’une fois par clé de chatbot. Le rechargement à chaud est sans risque pour la même raison.
• Gardez l’attribut. Le widget lit ses réglages dans sa propre balise script : celle-ci doit donc garder l’attribut data-chatbot et un src contenant widget.js. C’est s.dataset.chatbot qui crée cet attribut.

Si vous n’avez pas besoin de contrôler le chargement depuis le code, passez-vous du composant. Toute SPA React a une page HTML de base : avec Vite, c’est index.html à la racine du projet ; avec Create React App, c’est public/index.html. Collez le code juste avant la balise de fermeture </body> :

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

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

Remplacez YOUR-KEY par la clé de la page Chatbot. Le script se charge de manière asynchrone : il ne bloque jamais le rendu de votre application. Ajoutez data-open="true" à la balise si vous voulez que la fenêtre de chat s’ouvre au chargement. C’est toute l’installation : recompilez, déployez, et le bouton s’affiche sur toutes les routes.

Une recherche « chatbot React » fait apparaître deux types d’outils, qui ne résolvent pas le même problème :

• Une bibliothèque d’interface de chatbot vous fournit des composants React pour le chat lui-même : une liste de messages, un champ de saisie, des bulles, parfois des étapes de conversation scénarisées. Tout ce qui se trouve derrière l’interface reste à construire : des scénarios fixes, ou un backend qui appelle un modèle d’IA avec votre propre clé d’API, ainsi que le contenu à partir duquel il répond, le stockage des conversations et la protection contre les abus. C’est adapté quand le chat fait partie de votre produit, par exemple un assistant qui travaille avec les données de vos propres utilisateurs.
• Un chatbot IA hébergé comme Nexoply fournit l’interface, l’IA et le backend ensemble. Il répond aux questions des visiteurs uniquement à partir des informations sur l’entreprise que vous ajoutez ou importez (services et prix, FAQ, politiques, horaires d’ouverture) et le dit quand il ne sait pas. Pas de clé d’IA, pas de code serveur ; les conversations, les questions sans réponse et la protection contre le spam se gèrent dans le tableau de bord. C’est adapté à un site web destiné aux clients, qui doit répondre aux questions sur l’entreprise.

Si vous voulez un contrôle total sur l’interface et le modèle, partez d’une bibliothèque. Si l’objectif est de répondre aux questions des visiteurs sans construire ni faire tourner de backend, le widget hébergé demande moins de travail. Découvrez comment Nexoply répond à partir des informations sur votre entreprise.

• Il reste en dehors de votre arbre React. Le widget se monte sur document.body, en dehors de votre élément #root : les re-rendus et les changements de route ne le retirent ni ne modifient jamais son style.
• Un Shadow DOM dans les deux sens. Votre CSS (Tailwind, modules CSS, resets globaux) ne déborde pas sur le chat, et le CSS du chat ne déborde pas sur votre application.
• Les changements de route fonctionnent sans effort. Avec React Router ou tout routeur basé sur l’historique, les visiteurs gardent leur conversation pendant qu’ils naviguent, et les règles par page (comme un onglet latéral uniquement sur /pricing) sont revérifiées quand l’URL change. Aucun code supplémentaire.
• Aucun cookie. Il enregistre un identifiant de visiteur anonyme dans localStorage et la conversation en cours dans sessionStorage.

Vous voulez un bouton « Discutez avec nous » dans votre section d’accroche ou sur votre page de tarifs ? Déclenchez l’événement nexoply:open-chat sur window :

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

Aucun import n’est nécessaire : le widget écoute cet événement sur window. Si vous préférez n’afficher que votre propre bouton, réglez le bouton de message sur « Aucun bouton » avec une règle par page dans le tableau de bord.

Avant de déployer, vérifiez ces trois réglages :

• Sites autorisés. Si vous avez rempli Autoriser uniquement sur ces sites web (tableau de bord → Chatbot), ajoutez votre hôte de développement avec son port, par exemple localhost:5173 pour Vite ou localhost:3000 pour Create React App, ou laissez la liste vide pendant vos tests.
• Content-Security-Policy. Si votre application envoie un en-tête ou une balise meta CSP, autorisez https://nexoply.com dans script-src, connect-src et img-src.
• Vérifiez de bout en bout. Lancez l’application, cliquez sur le bouton de chat, posez une vraie question et retrouvez-la sous Conversations dans le tableau de bord.

Si le bouton n’apparaît toujours pas :

• Clé vide. Sans clé, le composant ne charge rien. Affichez import.meta.env.VITE_NEXOPLY_KEY dans la console : Vite n’expose que les variables qui commencent par VITE_, et il faut redémarrer le serveur de développement après avoir modifié .env.
• Requête bloquée. Regardez la console du navigateur et l’onglet Réseau pour repérer des erreurs CSP ou un widget.js bloqué.
• Chatbot désactivé. Vérifiez que l’interrupteur Chatbot activé est allumé.
• Bloqueurs de publicité. Plus rarement, une extension de navigateur bloque les widgets de chat. Essayez une fenêtre de navigation privée sans extensions.

Une fois le script en place, vous n’aurez plus besoin de toucher au code : les modifications faites dans le tableau de bord arrivent sur le site en une minute environ. Sous Chatbot → Personnaliser, vous pouvez styliser le bouton de message (icône ou votre propre image ou SVG, libellé, forme, taille, couleurs, position) ou utiliser à la place un onglet latéral sur le bord de l’écran. Définissez une apparence différente sur mobile et utilisez des règles par page pour la modifier sur certaines routes (par exemple /pricing, ou /services/*). La fenêtre de chat reprend vos polices, vos couleurs et votre logo, et l’écran d’accueil peut proposer des boutons comme Réserver, Appeler ou WhatsApp.

Vous utilisez un autre framework ? Consultez comment ajouter un chatbot à Next.js avec next/script ou le guide du chatbot pour Vue et Nuxt ; pour un site vitrine sous WordPress, voyez le guide WordPress. Pour une vue d’ensemble, découvrez comment l’assistant apprend à connaître votre entreprise ou comparez les offres et les limites de conversations.