# Installer le widget de chat dans Next.js et React

> Ajoutez le widget intoCHAT à une app Next.js avec next/script dans le layout racine, ou à une app React via index.html ou useEffect, sans bulles en double.

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` :

```tsx
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 :

```jsx
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](/fr/docs/client-actions).

## 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](/fr/docs/troubleshooting), plus de contexte dans les guides [Next.js](/fr/integrations/nextjs) et [React](/fr/integrations/react).