Installare il widget di chat in Next.js e React

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:

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:

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.

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, più contesto nelle guide per Next.js e React.