aggiungi una live chat a un sito fatto con lovable, bolt o v0

28 ottobre 2026 · di kuba · 7 min di lettura

Hai costruito il sito descrivendolo, quindi aggiungi la chat allo stesso modo. Questa guida ti dà un prompt per Lovable, Bolt o v0, mostra dove dovrebbe finire lo snippet nel codice che generano e come controllare sul sito pubblicato che non si carichi niente prima di un clic.

cosa generano questi strumenti

Dalla finestra di chat i tre strumenti si somigliano, ma scrivono tipi di progetto diversi, ed è questo a decidere dove va un tag script:

Lovable genera un’app Vite con React. C’è un index.html nella radice del progetto; è la pagina in cui viene renderizzata ogni route.
Bolt genera quello che gli hai chiesto. La maggior parte dei progetti sono app Vite con un index.html; alcuni sono Next.js, Astro o HTML puro (per quest’ultimo c’è la guida per HTML puro).
v0 genera Next.js con l’app router. La pagina condivisa è app/layout.tsx.

La chat ha bisogno di un tag in ogni pagina. In una single-page app significa index.html. In Next.js, il layout principale. Da nessun’altra parte.

prima di iniziare: il dominio

Spookat lega un sito al suo dominio. La chat si connette solo da quel dominio e dai suoi sottodomini, ed è uno dei motivi per cui nessuno può copiare il tuo snippet sul proprio sito.

Con questi strumenti conta, perché il tuo progetto vive a più indirizzi:

l’anteprima dentro lo strumento, sul dominio dello strumento stesso
l’indirizzo pubblicato che ti dà lo strumento, di solito un suo sottodominio
il tuo dominio personalizzato, se ne hai collegato uno

Registra il sito con l’indirizzo che useranno i visitatori. Se è un dominio personalizzato, usa quello; il suo www e gli altri sottodomini sono inclusi. Se pubblichi sul sottodominio dello strumento, registra quel sottodominio completo, non il dominio principale dello strumento. Nell’anteprima dello strumento il launcher compare, ma la chat non si connette. Fai le prove sul sito pubblicato.

il prompt

Prima ti serve la chiave del sito. Nella dashboard di Spookat aggiungi il sito con il dominio giusto; la pagina di installazione mostra lo snippet. Poi incolla questo nella chat dello strumento, con la tua chiave al posto di YOUR_SITE_KEY:

Add this live chat script to every page of the site. It must be exactly one tag, loaded once, right before the closing </body> tag of the shared HTML (index.html in a Vite app, the root layout in Next.js). Keep the async attribute. Do not wrap it in a React component, do not add it to individual pages, do not preload anything.

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

Il prompt è così preciso di proposito. Questi strumenti amano rendersi utili, e “aggiungi un widget di chat” può diventare un nuovo componente React, un pulsante flottante tutto loro o il tag incollato in cinque pagine. Un tag in un solo punto è tutto quello che serve a Spookat: il launcher disegna il suo pulsante da solo.

l’aspetto, nello stesso prompt

L’aspetto del widget si imposta nella dashboard di Spookat e viaggia dentro il launcher, quindi lo strumento non ha bisogno di saperne nulla. Se preferisci tenerlo nel codice, aggiungi una seconda riga al prompt:

Above that script, add: <script>window.Spookat = { style: "clean", accent: "#2F6FEB", side: "right" };</script>

Ci sono 8 stili. accent è il colore del tuo brand in esadecimale; il colore del testo sopra viene scelto per il contrasto. La documentazione elenca tutte le chiavi.

dove dovrebbe finire

Apri la vista del codice e controlla. In un’app Vite (Lovable, la maggior parte dei progetti Bolt), index.html dovrebbe finire così:

    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
  </body>
</html>

In Next.js (v0, alcuni progetti Bolt), app/layout.tsx riceve il tag dentro <body>, dopo {children}:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
      </body>
    </html>
  );
}

Se lo strumento ha usato invece next/script, va bene lo stesso, con strategy="afterInteractive" o "lazyOnload". Quello che non vuoi vedere:

il tag dentro un componente di pagina, come Home.tsx o app/page.tsx: la chat esisterebbe solo su quella pagina
un useEffect che crea l’elemento script: funziona, ma è più codice per lo stesso tag
un pulsante o un pannello di chat disegnato dallo strumento: cancellalo, Spookat porta il suo

Se qualcosa è andato storto, dillo in una frase: “Remove the chat code you added and put only the script tag in index.html.” Questi strumenti sistemano bene queste cose quando l’istruzione è concreta.

pubblica, poi controlla

Pubblica il sito e apri l’indirizzo pubblicato in una finestra privata. Apri i DevTools:

Network, spunta “Disable cache”, ricarica e scrivi spookat nel filtro. Dovresti vedere una richiesta: il launcher da cdn.spookat.com, circa 2 kb. Due, entrambe da cdn.spookat.com, se il tuo codice imposta in window.Spookat uno stile diverso da quello che hai pubblicato. Niente verso api.spookat.com.
Application, cookie e local storage: niente da Spookat.
Clicca sul launcher. Il pannello si carica dalla CDN. Scrivi un messaggio di prova. Con Slack o Discord collegato, compare lì; rispondi e guardalo arrivare nel widget.

Se il launcher non compare proprio, il tag non è arrivato nella build pubblicata. Ricontrolla la vista del codice. Se il launcher compare ma la chat non si connette, il dominio nella dashboard non corrisponde all’indirizzo in cui ti trovi.

La guida principale spiega ognuno di questi controlli più nel dettaglio.

collega le risposte

La chat dovrebbe raggiungerti dove sei già. Collega Slack o Discord nella dashboard, scegli un canale, e ogni visitatore avrà il suo thread. La guida Slack e la guida Discord entrano nei dettagli.

perché non far fare una chat allo strumento

Potresti chiederglielo. Lo strumento ti farà in pochi minuti un bel pannello con un campo di testo. Poi arrivano le domande: dove vanno i messaggi, chi riceve la notifica, come arriva la risposta a un visitatore che ha chiuso la scheda, cosa succede con lo spam, chi lo tiene in piedi. Sono un server, un database, un’integrazione con Slack e un sistema di email, e niente di tutto questo è il prodotto che stavi costruendo.

Spookat è un tag, costa 4,99 € al mese per sito con starter, e la prova dura 14 giorni senza carta.

se usi claude code o cursor

Esporta il progetto in un repository e lascia che un agente di codice lo faccia con il server MCP di Spookat. Può anche adattare il widget ai colori del tuo sito e configurare tutto senza che tu copi chiavi. La guida Claude Code ti accompagna.

adatta l’aspetto a un sito generato

Questi strumenti tendono a produrre uno stile riconoscibile: un sans-serif pulito, ombre morbide, card arrotondate, un colore d’accento. Il widget dovrebbe sembrare parte del sito, non un adesivo arrivato da un altro.

Stile. Per l’aspetto generato tipico, parti da clean o soft. Se il tuo sito è più scuro e tecnico, prova terminal. Se gli hai dato un look deciso e piatto, brutal o swiss. Puoi cambiare nella dashboard e vedere ognuno in anteprima dal vivo prima di pubblicare.
Accento. Usa lo stesso esadecimale dei tuoi pulsanti. Lo strumento di solito lo ha nella config di Tailwind o in una variabile CSS; chiedigli “what is the primary color’s hex?”
Font. system non scarica niente e somiglia abbastanza alla maggior parte dei siti generati. Se il tuo sito usa un font preciso e noi lo ospitiamo, sceglilo; si carica solo dopo il clic.
Lato. Se lo strumento ha messo un suo pulsante flottante in basso a destra (una freccia per tornare su, un’icona delle impostazioni cookie), metti il launcher a sinistra.

cosa vedono i tuoi visitatori

Un piccolo pulsante nell’angolo, con i tuoi colori. Non succede nient’altro finché non cliccano. Poi il pannello si apre con il tuo saluto e una riga che dice che risponde una persona. Scrivono, e il messaggio arriva nel tuo thread di Slack o Discord, o nella nostra inbox e la sua app per telefono. Se se ne vanno prima della tua risposta, possono lasciare un’email; con pro la risposta li raggiunge lì. Il widget parla la lingua del loro browser, una tra 12, a meno che tu non ne imposti una.

dopo che lo strumento rigenera

Questi strumenti riscrivono i file. Una modifica grossa al layout (“trasformalo in una dashboard”, “passa alla modalità scura”) può far sparire in silenzio il tag da index.html o dal layout principale. Dopo una rigenerazione importante, apri il sito pubblicato e controlla che il launcher ci sia ancora. Se è sparito, lo stesso prompt lo rimette.

più di un progetto

Con questi strumenti avviare un secondo e un terzo sito costa poco. In Spookat ognuno è un sito a sé, con la sua chiave, il suo dominio, il suo aspetto e il suo canale, quindi una chat non finisce mai nel thread del progetto sbagliato. Il primo sito di un account paga il prezzo pieno; ogni altro sito nello stesso account che paghi tramite Spookat ha uno sconto del 30%, su ogni piano. Più siti possono condividere un canale Slack o Discord se rispondono le stesse persone, ma la scheda mostra solo il percorso della pagina, non da quale sito arriva la chat. Dai a ogni sito il suo canale se devi distinguerli.

checklist

Il sito è registrato con l’indirizzo che usano i visitatori.
Un tag, async, in index.html o nel layout principale.
Nessun pulsante o componente di chat creato dallo strumento.
Provato sul sito pubblicato, non nell’anteprima.
Una richiesta prima di un clic (due, entrambe da cdn.spookat.com, se il tuo codice imposta uno stile che non hai pubblicato), nessun cookie.
Slack o Discord collegato.

Descrivilo, pubblicalo, controllalo. Poi rispondi alla prima domanda da un thread.