Chatbot AI per Next.js: come installarlo

In Next.js il codice va nel layout principale, così compare in tutte le pagine.

Lo trovi già pronto nel pannello, con la tua chiave, e lo copi con un clic. Ha questa forma:

<script src="https://app.interlyo.com/widget/chatbot.js" data-api-key="la-tua-chiave" defer></script>

1App Router (Next.js 13 e successivi)

Apri app/layout.tsx.
Aggiungi il componente Script prima della chiusura del body.

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://app.interlyo.com/widget/chatbot.js"
          data-api-key="la-tua-chiave"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Vanno bene le strategie afterInteractive, lazyOnload e beforeInteractive. Non usare strategy="worker": lo script girerebbe fuori dalla pagina e non troverebbe la chiave. Scrivi l’attributo proprio come data-api-key, con i trattini: dataApiKey non funziona.

2Pages Router (Next.js 12)

Apri pages/_document.js.
Incolla il codice dopo NextScript.

<body>
  <Main />
  <NextScript />
  <script src="https://app.interlyo.com/widget/chatbot.js" data-api-key="la-tua-chiave" defer></script>
</body>

Carica chatbot.js dal nostro indirizzo, come nel codice qui sopra. Non scaricarlo nel progetto, non rinominarlo e non includerlo nel bundle del sito: il widget non troverebbe più la chiave e il nostro server.

Scegli la tua piattaforma

Integrazioni

Gestione dei contenuti

Negozi online

Costruttori di siti

Siti e app su misura

Pronto a installarlo?

Ti iscrivi gratis e il pannello ti dà il codice e le istruzioni per la tua piattaforma.

Prova gratis per 8 giorni Funzioni