Chatbot IA pour Next.js : comment l’installer

Dans Next.js, le code va dans le layout principal, pour apparaître sur toutes les pages.

Vous le trouvez tout prêt dans le panneau, avec votre clé, et vous le copiez en un clic. Il se présente ainsi :

<script src="https://app.interlyo.com/widget/chatbot.js" data-api-key="votre-cle" defer></script>

1App Router (Next.js 13 et suivants)

Ouvrez app/layout.tsx.
Ajoutez le composant Script avant la fermeture du body.

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://app.interlyo.com/widget/chatbot.js"
          data-api-key="votre-cle"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Les stratégies afterInteractive, lazyOnload et beforeInteractive conviennent. N’utilisez pas strategy="worker" : le script tournerait hors de la page et ne trouverait pas la clé. Écrivez l’attribut exactement data-api-key, avec les tirets : dataApiKey ne fonctionne pas.

2Pages Router (Next.js 12)

Ouvrez pages/_document.js.
Collez le code après NextScript.

<body>
  <Main />
  <NextScript />
  <script src="https://app.interlyo.com/widget/chatbot.js" data-api-key="votre-cle" defer></script>
</body>

Chargez chatbot.js depuis notre adresse, comme dans le code ci-dessus. Ne le téléchargez pas dans le projet, ne le renommez pas et ne l’incluez pas dans le bundle du site : le widget ne trouverait plus la clé ni notre serveur.

Choisissez votre plateforme

Intégrations

Gestion de contenu

Boutiques en ligne

Créateurs de sites

Sites et applis sur mesure

Prêt à l’installer ?

Vous vous inscrivez gratuitement et le panneau vous donne le code et les instructions pour votre plateforme.

Essai gratuit de 8 jours Fonctionnalités