Chatbot Next.js : ajouter un chatbot IA avec next/script (App Router et Pages Router)

• Un compte Nexoply. Inscrivez-vous gratuitement : l’offre gratuite comprend 50 conversations par mois, sans carte bancaire.
• Les informations de l’entreprise dans Nexoply : 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 rendues en JavaScript) ; vous examinez les suggestions et rien n’est ajouté avant que vous ne l’approuviez.
• La clé de votre chatbot. Dans le tableau de bord, ouvrez Chatbot (cliquez sur Créer le chatbot si ce n’est pas encore fait). Le code d’installation qui s’y trouve contient la clé dans son attribut data-chatbot.

Pour un site en HTML simple, il suffirait de coller le code d’installation avant </body> :

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

Avec Next.js, vous ne modifiez pas le HTML directement : vous ajoutez donc le même script avec le composant intégré next/script. La clé est publique : elle indique seulement au widget à quelle entreprise il appartient.

Le layout racine enveloppe toutes les pages : y ajouter le script place donc le chat sur tout le site. Importez Script depuis next/script et placez-le dans <body>, après {children} :

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* Widget de chat Nexoply : se charge dans le navigateur après l’hydratation */}
        <Script
          src="https://nexoply.com/widget.js"
          data-chatbot={process.env.NEXT_PUBLIC_NEXOPLY_KEY}
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Mettez ensuite la clé dans une variable d’environnement. Le préfixe NEXT_PUBLIC_ indique à Next.js de l’inclure dans le bundle du navigateur, ce qui ne pose pas de problème ici puisque la clé n’est pas un secret :

# .env.local (non versionné dans git)
NEXT_PUBLIC_NEXOPLY_KEY=YOUR-KEY

Avec le Pages Router, pages/_app.tsx enveloppe toutes les pages : le même <Script> va donc là, à côté de <Component {...pageProps} />. Utilisez la même variable de .env.local :

// pages/_app.tsx
import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://nexoply.com/widget.js"
        data-chatbot={process.env.NEXT_PUBLIC_NEXOPLY_KEY}
        strategy="afterInteractive"
      />
    </>
  );
}

Si votre projet combine les deux routeurs, ajoutez le script à la fois dans app/layout.tsx et dans pages/_app.tsx. Le charger deux fois est sans conséquence : le widget ne se monte qu’une fois par clé de chatbot.

Vous préférez un composant <Chatbot />, comme dans le guide du composant chatbot React ? Déplacez le Script dans son propre fichier. next/script fonctionne dans les Server Components tant que vous ne lui passez pas de gestionnaires d’événements comme onLoad : ce fichier n’a donc pas besoin de "use client" :

// components/Chatbot.tsx
import Script from "next/script";

export function Chatbot() {
  return (
    <Script
      src="https://nexoply.com/widget.js"
      data-chatbot={process.env.NEXT_PUBLIC_NEXOPLY_KEY}
      strategy="afterInteractive"
    />
  );
}

Affichez ensuite <Chatbot /> dans <body> de app/layout.tsx, après {children}, ou à côté de <Component {...pageProps} /> dans pages/_app.tsx. Placez-le dans le layout, et non dans une seule page, pour qu’il se charge sur toutes les routes.

strategy="afterInteractive" charge le widget juste après que la page devient interactive : le bouton de chat apparaît rapidement. strategy="lazyOnload" attend que le navigateur soit inactif et que tout le reste soit chargé ; choisissez-la si vous voulez un premier chargement aussi léger que possible et qu’un bouton qui apparaît un instant plus tard ne vous gêne pas. Les deux gardent le script hors du chemin de rendu critique. Consultez la documentation de next/script pour plus de détails.

• Navigation côté client. Le widget garde la conversation ouverte pendant que les visiteurs passent d’une page à l’autre avec <Link> ou le routeur, et revérifie vos règles par page quand l’URL change, sans code supplémentaire.
• Sans risque pour le SSR et l’hydratation. Il s’exécute uniquement dans le navigateur et se monte sur document.body, en dehors du balisage que React hydrate : il ne provoque donc jamais d’erreur d’hydratation.
• Shadow DOM. Votre Tailwind ou votre CSS global ne déborde pas sur le chat, et ses styles ne débordent pas sur votre application. Les re-rendus ne le retirent jamais.
• StrictMode et Fast Refresh. Des effets exécutés deux fois en développement ou des rechargements à chaud ne peuvent pas créer un second chat : il se monte une fois par clé.
• Stockage. Il ne dépose aucun cookie ; il utilise localStorage pour un identifiant de visiteur anonyme et sessionStorage pour la conversation en cours.

Next.js permet de construire facilement votre propre chatbot, et c’est parfois le bon choix. Les deux approches répondent à des besoins différents :

• Le construire vous-même avec une bibliothèque d’interface de chat ou vos propres composants, plus un route handler ou une route d’API qui appelle un modèle d’IA avec votre propre clé d’API. Le contenu à partir duquel il répond, le stockage des conversations et la protection contre les abus sont aussi à votre charge. 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, et rien ne s’exécute sur votre 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, construisez-le. Si l’objectif est de répondre aux questions des visiteurs sans faire tourner de backend, le widget hébergé demande moins de travail. Découvrez comment Nexoply répond à partir des informations sur votre entreprise.

Vous voulez un bouton « Discutez avec nous » dans votre section d’accroche ou de tarifs ? Déclenchez l’événement nexoply:open-chat sur window. Comme il utilise onClick, ce doit être un composant client :

"use client";
// components/ChatButton.tsx

export function ChatButton() {
  return (
    <button
      type="button"
      // ouvre la fenêtre de chat Nexoply
      onClick={() => window.dispatchEvent(new Event("nexoply:open-chat"))}
    >
      Discutez avec nous
    </button>
  );
}

Utilisez <ChatButton /> dans n’importe quelle page ou n’importe quel composant serveur. Il n’existe pas d’API pour retirer le widget une fois chargé : pour masquer le bouton de message sur certaines pages (par exemple /checkout), ajoutez une règle par page avec « Aucun bouton » sous Chatbot → Personnaliser → Bouton de message → Différent sur certaines pages.

Lancez next dev, ouvrez http://localhost:3000 et un bouton de chat apparaît dans le coin. Posez une vraie question, comme « Travaillez-vous le week-end ? » ; en quelques secondes, la conversation apparaît sous Conversations dans votre tableau de bord. Les modifications faites dans le tableau de bord arrivent sur le site en une minute environ, sans redéploiement.

Si votre application envoie un en-tête Content-Security-Policy (par exemple depuis un middleware ou next.config), autorisez Nexoply dans :

• script-src https://nexoply.com : pour charger widget.js.
• connect-src https://nexoply.com : pour les requêtes du chat.
• img-src https://nexoply.com : pour les images comme le logo et l’icône du bouton.

• Pas de bouton, et data-chatbot est vide dans le code source de la page. La variable d’environnement n’a pas été lue : vérifiez le préfixe NEXT_PUBLIC_, redémarrez next dev, puis ajoutez la variable chez votre hébergeur et redéployez.
• Le script est dans une seule page au lieu du layout. Placez-le dans app/layout.tsx ou pages/_app.tsx pour qu’il se charge sur toutes les routes.
• La balise a été modifiée. Elle doit garder l’attribut data-chatbot et un src contenant widget.js.
• Bloqué par la CSP ou les sites autorisés. Cherchez des erreurs dans la console du navigateur et vérifiez les deux sections ci-dessus.
• Chatbot désactivé. Vérifiez que l’interrupteur Chatbot activé est allumé.
• Bloqueurs de publicité. Plus rarement, une extension bloque les widgets de chat. Essayez une fenêtre de navigation privée sans extensions.

Une fois que tout fonctionne, adaptez-le au site sous Chatbot → Personnaliser : icône du bouton, libellé, couleurs et position, ou un onglet latéral sur le bord de l’écran (comme « Aide ») ; une apparence différente sur mobile ; et des règles par page pour certaines pages (par exemple un onglet latéral uniquement sur /pricing). Découvrez toutes les options de personnalisation et comment l’assistant apprend à connaître votre entreprise, comparez les offres et les limites de conversations, ou lisez le guide du composant chatbot React et le guide du chatbot pour Vue et Nuxt.