Vai al contenuto
intoCHAT

Integrazione Next.js

Aggiungi un chatbot AI alla tua app Next.js

Carica il widget di intoCHAT una sola volta nel layout principale con next/script. Resta al suo posto durante la navigazione lato client, e l'agente risponde con i contenuti su cui lo addestri.

Crea il tuo agente gratis

Ultimo aggiornamento:

Come funziona intoCHAT in Next.js

Il widget di intoCHAT è un unico script che legge l'ID dell'agente dal suo attributo data-chatbot-id e aggiunge una bolla della chat alla pagina. Next.js passa gli attributi data del componente Script all'elemento script finale, quindi basta il normale componente next/script. Mettilo nel layout principale e Next.js lo carica una sola volta, anche quando i visitatori cambiano route. Colori, posizione e messaggio di benvenuto arrivano da intoCHAT, quindi per cambiarli non serve un nuovo deploy.

Installare intoCHAT in Next.js

  1. Crea e addestra l'agente

    Registrati su intoCHAT, crea un agente e aggiungi il tuo sito nella scheda Knowledge. La scansione esegue il rendering delle pagine basate su JavaScript prima di leggerle, quindi le route renderizzate lato client vengono lette come le vedono i visitatori.

  2. Copia l'ID dell'agente

    Apri la scheda Share. Il codice sotto Bubble Chat contiene l'ID dell'agente nell'attributo data-chatbot-id.

  3. Aggiungi Script al layout principale

    In app/layout.tsx importa Script da next/script e aggiungilo dentro body, dopo children, con l'URL dell'embed, l'ID dell'agente e strategy impostata su lazyOnload.

  4. Fai il deploy e controlla

    Apri una route qualsiasi. La bolla della chat compare nell'angolo in basso e resta lì mentre navighi tra le pagine.

app/layout.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>
  )
}

Next.js passa data-chatbot-id all'elemento script, ed è così che il widget trova il tuo agente. Il layout può restare un Server Component, perché questo Script non ha gestori di eventi.

Cosa può fare l'agente nella tua app Next.js

  • Azioni lato client

    Registra funzioni sulla tua pagina con window.IntoChatActions.register e l'agente può chiamarle durante la chat, ad esempio per leggere lo stato della pagina o aprire un modulo.

  • Azioni API personalizzate

    Fai chiamare all'agente i tuoi endpoint HTTP, con autenticazione bearer, basic, chiave API o header personalizzati. Importa una richiesta da cURL e scegli quali campi della risposta vede il modello.

  • Legge le pagine renderizzate lato client

    La scansione del sito esegue il rendering delle pagine basate su JavaScript prima di leggerle, trova fino a 500 URL da sitemap e link e ti permette di escludere percorsi con dei pattern.

  • Risposte basate sulle fonti

    Ricerca ibrida semantica e per parole chiave sui tuoi contenuti, con regole che tengono le risposte sulle tue fonti, resistono alla prompt injection e dicono quando la risposta non c'è.

  • Raccolta lead

    Chiedi email o numero di telefono in chat, manualmente, con regole o quando lo decide l'AI. I lead ti arrivano via email e si esportano in CSV.

  • Stile gestito dalla dashboard

    Colori, avatar, icona del pulsante, posizione e messaggio di benvenuto si impostano nella scheda Appearance, non nel codice.

Domande frequenti

Il widget rallenta la mia app Next.js?

Con strategy impostata su lazyOnload, Next.js aggiunge lo script nei tempi morti del browser, dopo che le altre risorse della pagina sono state caricate, quindi non blocca né il rendering né l'hydration. La finestra della chat gira in un proprio iframe servito da intoCHAT, separato dal JavaScript della tua app.

Meglio lazyOnload o afterInteractive?

Funzionano entrambe. afterInteractive, l'impostazione predefinita, carica lo script prima, subito dopo una parte dell'hydration, quindi la bolla compare prima, mentre lazyOnload aspetta i tempi morti. In entrambi i casi Next.js crea l'elemento script con il tuo attributo data-chatbot-id, che serve al widget.

Funziona con il Pages Router?

Sì. Aggiungi lo stesso componente Script in pages/_app così si carica su ogni pagina. Next.js passa gli attributi data anche nel Pages Router.

Posso mostrare la chat solo su alcune route?

Puoi mettere lo Script in un layout annidato invece che nel layout principale, e si carica quando si apre una route sotto quel layout. Una volta caricata, la bolla vive sulla pagina stessa, quindi resta visibile anche dopo la navigazione lato client verso altre route, fino al successivo caricamento completo della pagina.

La mia app ha una Content Security Policy. Cosa devo consentire?

Consenti www.intochat.ai in script-src per lo script, in connect-src per caricare le impostazioni dell'agente e in frame-src per la finestra della chat. Se la tua policy usa i nonce, passa il nonce anche al componente Script.

Devo rifare il deploy quando cambio l'agente?

No. Il codice contiene solo l'ID dell'agente. Colori, posizione, messaggio di benvenuto, domande suggerite e conoscenze vengono caricati da intoCHAT a ogni caricamento di pagina, quindi le modifiche compaiono senza un nuovo deploy.

Guardalo rispondere dal tuo sito

Incolla l’indirizzo del tuo sito e chatta con un agente creato dalle tue pagine. Ci vuole circa un minuto.

Crea il tuo agente gratis

Piano gratuito, nessuna carta di credito.