Skip to main content

Utilizzo

Il chatbot è sviluppato in React ed è compatibile con i principali framework e setup moderni, tra cui:

  • React (CRA o custom)
  • Next.js
  • Vite
  • Altri framework basati su React

1. Integrazione degli stili CSS​

Il chatbot richiede un file CSS dedicato per il corretto funzionamento dell'interfaccia.

Scarica chatbotStyle.css

1.1 Posizionamento del file CSS​

Posiziona il file CSS del chatbot nella cartella in cui gestisci gli stili del progetto.

Esempio Next.js:

  • inserisci il file allo stesso livello di index.css (o globals.css)

1.2 Import del file CSS​

Il file CSS deve essere importato nel punto di ingresso dell'applicazione.

Esempio Next.js (App Router):

Nel file layout.tsx:

import "./chatbot.css";

(assicurati che il path punti correttamente al file CSS inserito)

1.3 Dichiarazione nel CSS globale​

Se il progetto utilizza un file di CSS globale, è necessario aggiungere la seguente riga:

@source "../node_modules/@itlogix/chatbot-itlogix";

Questa direttiva permette a Tailwind (o al sistema di build) di includere correttamente le classi utilizzate dal chatbot.

2. Utilizzo del ChatbotProvider​

Per utilizzare il chatbot è necessario importare e utilizzare il componente ChatbotProvider.

Il provider deve incapsulare l'intera pagina (o sezione dell'applicazione) in cui si desidera rendere disponibile il chatbot.

2.1 Import​

import { ChatbotProvider } from "@itlogix/chatbot-itlogix";
import { chatbotConfig } from "@/app/chatbotConfig";

2.2 Inizializzazione con token (access token)​

<ChatbotProvider
  token={accessToken}
  socketUrl={process.env.NEXT_PUBLIC_CHATBOT_URL ?? ""}
  chatbotConfig={chatbotConfig}
>
  {children}
</ChatbotProvider>

In questo caso il chatbot viene inizializzato utilizzando un access token valido.

2.3 Inizializzazione con userId​

In alternativa, il chatbot può essere inizializzato senza token, passando l'identificativo utente:

<ChatbotProvider
  token={null}
  userId={session?.user.userId}
  socketUrl={process.env.NEXT_PUBLIC_CHATBOT_URL ?? ""}
  chatbotConfig={chatbotConfig}
>
  {children}
</ChatbotProvider>

In questo scenario:

  • token deve essere impostato a null
  • userId deve essere valorizzato

3. Dichiarazione nella DOM​

Nel componente/pagina in cui si vuole visualizzare il chatbot, bisogna dichiarare un div vuoto con un id associato; qui abbiamo due scelte, il chatbot "full page" o il chatbot sticky.

    <div  id="chatbot-fullpage-root"></div>
    <div  id="chatbot-fullpage-root"></div>

4. Note finali​

  • Il ChatbotProvider può essere inserito a livello globale (layout) oppure su singole pagine
  • socketUrl deve puntare all'endpoint corretto del servizio chatbot
  • chatbotConfig permette di personalizzare comportamento e configurazione del chatbot

Una volta configurato il provider, il chatbot sarà disponibile automaticamente all'interno della sezione incapsulata