Installer le widget de chat dans Next.js et React

Le widget intoCHAT est un simple script, pas un composant React. Il lit l'identifiant de votre agent dans son attribut data-chatbot-id et ajoute la bulle à document.body, en dehors de votre arbre React : les re-rendus et les changements de route ne la touchent pas.

Next.js avec l'App Router

Chargez le script une seule fois dans le layout racine avec le composant Script de next/script :

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://www.intochat.ai/api/embed.js"
          data-chatbot-id="YOUR_AGENT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

• L'attribut data. Next.js transmet les attributs supplémentaires comme data-chatbot-id à l'élément script final, là où le widget le cherche.
• La stratégie. lazyOnload charge le widget quand le navigateur est inactif, après les autres ressources de la page. afterInteractive, la valeur par défaut, le charge plus tôt : la bulle apparaît plus vite. Les deux fonctionnent.
• Pas beforeInteractive. Cette stratégie sert aux scripts dont la page a besoin avant de devenir interactive. Le widget de chat n'en fait pas partie, et le charger aussi tôt ne fait que concurrencer votre propre code.
• Server Components. Le layout peut rester un Server Component, car ce Script n'a pas de gestionnaire d'événements.

Next.js ne charge le script qu'une fois, même quand le visiteur passe d'une route à l'autre. Avec le Pages Router, ajoutez le même Script dans pages/_app.

Pour n'afficher le chat que sous certaines routes, placez le Script dans un layout imbriqué. Une fois chargée, la bulle reste sur la page après une navigation côté client vers d'autres routes, jusqu'au prochain chargement complet.

React avec Vite ou Create React App

Choisissez l'une des deux options, pas les deux. Le script d'intégration ignore une seconde copie pour le même agent : utiliser les deux ne fait que le charger deux fois.

Option 1 : index.html. Collez la balise script de l'onglet Share juste avant </body> dans index.html : à la racine du projet avec Vite, dans public/index.html avec Create React App.

Option 2 : un composant. Utile si vous voulez décider dans le code si le widget se charge, par exemple uniquement en production :

import { useEffect } from 'react'

export default function IntoChatWidget() {
  useEffect(() => {
    // Load the widget only once, even when StrictMode runs effects twice
    if (document.getElementById('intochat-embed')) return

    const script = document.createElement('script')
    script.id = 'intochat-embed'
    script.src = 'https://www.intochat.ai/api/embed.js'
    script.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID')
    document.body.appendChild(script)
  }, [])

  return null
}

Affichez IntoChatWidget une seule fois, dans votre composant racine comme App. Définissez l'attribut avant d'ajouter l'élément à la page, comme ci-dessus.

StrictMode et bulles en double

En développement, le StrictMode de React exécute les effets deux fois. La vérification de l'id en début d'effet évite que le script soit ajouté deux fois. Même sans elle, vous n'auriez pas de seconde bulle, car le script d'intégration n'en ajoute qu'une par agent et par page. Ne retirez pas le script dans une fonction de nettoyage : cela ne retire pas la bulle, qui reste dans document.body jusqu'au prochain chargement complet.

Actions côté client

L'agent peut appeler des fonctions de votre application pendant une conversation, par exemple pour lire un état ou ouvrir un formulaire. Enregistrez-les avec window.IntoChatActions.register. Voir Actions côté client.

Content Security Policy

Autorisez https://www.intochat.ai dans script-src, connect-src et frame-src. Si votre politique utilise des nonces, passez le nonce au composant Script : Next.js le transmet comme l'attribut data.

Vérifier

Ouvrez n'importe quelle route. La bulle apparaît dans le coin inférieur et reste pendant la navigation. Deux bulles signifient que deux snippets avec des identifiants d'agent différents sont chargés. Pas de bulle et « Chatbot not found. » dans la console signifient que l'identifiant de l'agent est incorrect. D'autres cas dans Dépannage, plus de contexte dans les guides Next.js et React.