# Installare il widget di chat in Next.js e React

> Aggiungi il widget di intoCHAT a un'app Next.js con next/script nel layout principale, o a un'app React con index.html o useEffect, senza bolle duplicate.

Il widget di intoCHAT è un semplice script, non un componente React. Legge l'ID dell'agente dal proprio attributo `data-chatbot-id` e aggiunge la bolla a `document.body`, fuori dall'albero React, quindi i re-render e i cambi di route non la toccano.

## Next.js con App Router

Carica lo script una sola volta nel layout principale con il componente `Script` di `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'attributo data.** Next.js inoltra gli attributi aggiuntivi come `data-chatbot-id` all'elemento script finale, ed è lì che il widget lo cerca.
- **La strategia.** `lazyOnload` carica il widget quando il browser è inattivo, dopo le altre risorse della pagina. `afterInteractive`, il valore predefinito, lo carica prima, quindi la bolla compare prima. Funzionano entrambe.
- **Non `beforeInteractive`.** Questa strategia è pensata per gli script di cui la pagina ha bisogno prima di diventare interattiva. Il widget di chat non è tra questi, e caricarlo così presto toglie solo risorse al tuo codice.
- **Server Component.** Il layout può restare un Server Component, perché questo `Script` non ha gestori di eventi.

Next.js carica lo script una sola volta, anche quando il visitatore passa da una route all'altra. Con il Pages Router, aggiungi lo stesso `Script` in `pages/_app`.

Per mostrare la chat solo sotto alcune route, metti lo `Script` in un layout annidato. Una volta caricata, la bolla resta nella pagina anche dopo la navigazione lato client verso altre route, fino al successivo caricamento completo.

## React con Vite o Create React App

Scegli una delle due opzioni, non entrambe. Lo script di incorporamento ignora una seconda copia per lo stesso agente, quindi usarle entrambe serve solo a caricarlo due volte.

**Opzione 1: index.html.** Incolla il tag script della scheda **Share** subito prima di `</body>` in `index.html`: nella radice del progetto con Vite, in `public/index.html` con Create React App.

**Opzione 2: un componente.** Utile se vuoi decidere nel codice se caricare il widget, per esempio solo in produzione:

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

Renderizza `IntoChatWidget` una sola volta nel componente principale, per esempio `App`. Imposta l'attributo prima di aggiungere l'elemento alla pagina, come sopra.

### StrictMode e bolle duplicate

In sviluppo, React StrictMode esegue gli effect due volte. Il controllo sull'`id` all'inizio dell'effect evita che lo script venga aggiunto due volte. Anche senza di esso non avresti una seconda bolla, perché lo script di incorporamento ne aggiunge una sola per agente e pagina. Non rimuovere lo script in una funzione di cleanup: rimuoverlo non toglie la bolla, che resta in `document.body` fino al successivo caricamento completo.

## Azioni lato client

Durante una chat l'agente può chiamare funzioni della tua app, per esempio per leggere uno stato o aprire un modulo. Le registri con `window.IntoChatActions.register`. Vedi [Azioni lato client](/it/docs/client-actions).

## Content Security Policy

Consenti `https://www.intochat.ai` in `script-src`, `connect-src` e `frame-src`. Se la tua policy usa i nonce, passa il `nonce` al componente `Script`: Next.js lo inoltra come l'attributo data.

## Verifica

Apri una route qualsiasi. La bolla compare nell'angolo in basso e resta durante la navigazione. Due bolle significano che sono caricati due snippet con ID agente diversi. Nessuna bolla e "Chatbot not found." nella console significano che l'ID dell'agente è errato. Altri casi in [Risoluzione dei problemi](/it/docs/troubleshooting), più contesto nelle guide per [Next.js](/it/integrazioni/nextjs) e [React](/it/integrazioni/react).