come aggiungere una live chat al tuo sito senza rallentarlo

Una live chat dovrebbe costare quasi niente alla tua pagina finché un visitatore non vuole davvero parlare. Questa guida mostra cosa carica un widget di chat prima del primo clic, cosa controllare prima di sceglierne uno, come installare Spookat in pochi minuti e come dimostrare nei DevTools che la tua pagina è rimasta veloce.

quanto costa un widget di chat prima di qualsiasi clic

La maggior parte dei visitatori non apre mai la chat. Leggono, scorrono, magari comprano e se ne vanno. Tutto quello che il widget carica con la pagina lo paga comunque ognuno di loro, anche chi ha un telefono economico e poco segnale.

Questo costo ha quattro parti:

• Byte. JavaScript, CSS, font, immagini e spesso un iframe con un documento tutto suo. Il JavaScript è la parte cara: il browser lo scarica, lo analizza e lo esegue sul main thread, lo stesso thread che gestisce scroll e tocchi.
• Richieste. Ogni richiesta è un viaggio di andata e ritorno, e le richieste verso domini nuovi pagano in più una risoluzione DNS e un handshake TLS. Un widget che chiama il suo server al caricamento aggiunge tutto questo a ogni pagina vista.
• Storage. Cookie, localStorage e IndexedDB scritti prima di qualsiasi interazione. Nell’UE questo può decidere se ti serve il consenso prima ancora che il widget si carichi.
• Tempo sul main thread. Il codice che gira all’avvio fa concorrenza al tuo. Lighthouse lo riporta come Total Blocking Time, e si vede nel tuo punteggio.

I quattro widget delle nostre pagine di confronto caricavano tra 220 e 509 kb compressi con gzip prima che qualcuno cliccasse. Lo abbiamo misurato il 2026-09-26 caricando ogni widget su una pagina di test vuota e sommando i byte trasferiti; numeri e fonti sono su /vs. Per fare un confronto, il testo di tutto questo articolo pesa meno di 20 kb.

Niente di tutto questo serve per mostrare un pulsante. Un pulsante sono poche centinaia di byte di HTML e CSS. Tutto il resto (il pannello della chat, la connessione a un server, lo storico) serve solo dopo che qualcuno ha cliccato.

cosa controllare prima di scegliere un widget

Puoi valutare qualsiasi widget di chat con un browser e dieci minuti. Ecco cosa guardare, in ordine di impatto sui tuoi visitatori.

il peso prima del clic

Apri la pagina demo del fornitore o il tuo sito di staging, apri i DevTools e ricarica con la cache disattivata. Filtra la scheda Network per i domini del fornitore e somma la dimensione trasferita. Tutto quello che supera qualche kilobyte prima di un clic è codice che i tuoi visitatori scaricano per un pannello che la maggior parte non aprirà mai.

le richieste prima del clic, e verso chi

Conta le richieste e annota i domini. Un widget che parla con la sua API al caricamento invia qualcosa su ogni visitatore, come minimo che esiste e su quale pagina si trova. Alcuni caricano anche analytics o tracciamento degli errori di terze parti.

cookie e storage prima del clic

Guarda la scheda Application dopo un caricamento pulito, senza toccare il widget. I cookie impostati dai domini del widget, o le chiavi di storage che ha scritto, sono quelli che un banner di consenso potrebbe dover coprire. Non siamo i tuoi avvocati e le regole cambiano da paese a paese, quindi chiedi ai tuoi cosa vale per il tuo sito. Il caso più semplice da spiegare è un widget che non salva nulla finché il visitatore non inizia una chat.

dove risponde il tuo team

Una chat vale quanto la sua risposta. Se rispondere vuol dire aprire un’altra dashboard, qualcuno deve tenere quella scheda aperta tutto il giorno. Se le chat arrivano dove il tuo team parla già (Slack, Discord), una risposta è un messaggio in un thread.

quanto costa quando il team cresce

Il prezzo per postazione ti fa pagare ogni persona che potrebbe rispondere. Il prezzo per risoluzione ti fa pagare ogni risposta. Il prezzo per sito ti fa pagare il sito, chiunque risponda e quante volte.

il telefono

Controlla il launcher su uno schermo largo 375 px. Non deve coprire i tuoi pulsanti e deve essere almeno di 44 px, così un pollice lo prende. Apri il pannello e scrivi: la tastiera non deve nascondere il campo di testo.

passo passo: live chat con spookat

Spookat è costruito attorno ai controlli qui sopra. Lo snippet carica un piccolo launcher dalla nostra CDN, con l’aspetto del tuo sito già dentro. Fa 0 richieste alla nostra API prima di un clic e non imposta cookie. Il tuo team risponde in un thread di Slack o in un post del forum di Discord. Costa 4,99 € al mese per sito con broke af, con membri del team illimitati, e la prova dura 14 giorni senza carta.

1. prendi il tuo snippet

Accedi alla dashboard e aggiungi il tuo sito. La pagina di installazione ti mostra lo snippet con la chiave del sito già inserita e un pulsante per copiarlo. Puoi aprirla direttamente con il tuo dominio nell’indirizzo:

https://app.spookat.com/install?domain=your-domain.com

2. incollalo prima del tag body di chiusura

Un solo tag, in qualsiasi punto della pagina, idealmente subito prima di </body>:

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

async significa che il browser continua a mostrare la tua pagina mentre scarica il file, e lo esegue appena arriva. Il file è il launcher: un pulsante, i suoi stili e l’aspetto che hai pubblicato nella dashboard. La sua build fallisce se supera i 4 kb compressi con gzip. Il 2026-09-27 pesava 2,0 kb.

Se il tuo sito è una single-page app, metti il tag nel template HTML principale, non in un componente che viene ri-renderizzato. Il launcher controlla se esiste già, quindi una seconda copia non fa niente, ma un tag in un solo posto è più facile da capire.

3. scegli un aspetto

Ci sono 8 stili e 12 font ospitati da noi, più il font di sistema del visitatore. Sceglili nella dashboard e pubblica; il launcher prende il nuovo aspetto entro un minuto. Oppure impostalo nella pagina, sopra lo snippet, dove vince sulla dashboard:

<script>
  window.Spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

font: "system" non scarica nessun font. Ogni altro font arriva dalla nostra CDN, solo dopo il clic, mai da Google. accent accetta un colore esadecimale, e il colore del testo sopra viene scelto per il contrasto. L’elenco completo delle chiavi è nella documentazione.

4. collega slack o discord

Nella dashboard, collega un canale. Approvi il collegamento direttamente in Slack o in Discord, poi scegli il canale da un elenco. Non sei admin del workspace? La dashboard ti dà un link monouso per chi lo è, valido 7 giorni, e quella persona non ha bisogno di un account Spookat.

Da quel momento ogni conversazione è un thread in Slack o un post del forum in Discord.

5. rispondi dal thread

Rispondi nel thread e il visitatore lo vede nel widget. Un messaggio che inizia con // resta interno, così puoi chiedere a un collega senza che il visitatore lo legga. I visitatori vedono il tuo nome di Slack o il tuo nickname di Discord; /spookat me lo mostra o lo cambia, sito per sito.

Se il visitatore se n’è andato prima della tua risposta e ha lasciato un’email, cool guy e i piani superiori gli mandano la risposta via email, nella lingua del widget. Con broke af la risposta lo aspetta nel widget alla sua prossima visita.

oppure: lascia fare tutto al tuo agente

Se sviluppi con Claude Code, Cursor o un altro agente di codice, incolla questo e lascia che legga il manuale:

Add Spookat chat to my site. Read https://spookat.com/llms.txt first, then match the chat style to my site.

L’agente trova il tuo template principale, aggiunge lo snippet e sceglie uno stile adatto al tuo sito. Collegare Slack o Discord e pagare restano a te: entrambe le cose le approva una persona.

verificalo nei devtools

Non fidarti della parola di nessun fornitore, nemmeno della nostra. Ecco come controllare la tua pagina in Chrome. Firefox e Safari hanno gli stessi pannelli con nomi leggermente diversi.

la scheda network, prima del clic

1. Apri la tua pagina in una finestra privata, così non entrano in gioco storage o cache vecchi.
2. Apri i DevTools, vai su Network, spunta “Disable cache” e ricarica.
3. Scrivi spookat nel campo del filtro.

Dovresti vedere una sola richiesta: il launcher da cdn.spookat.com, circa 2 kb trasferiti. Niente va verso api.spookat.com. Se vedi di più, l’ha caricato qualcos’altro nella pagina (per esempio un secondo snippet in un tag manager).

la scheda application, prima del clic

Apri Application, poi Cookies e Local storage del tuo dominio. Spookat non scrive niente qui al caricamento della pagina. Non imposta nessun cookie, mai. L’unica chiave di storage che usa, spookat: seguita dalla chiave del tuo sito, viene scritta solo dopo che il visitatore ha inviato il primo messaggio: conserva la sua chat su quel dispositivo.

dopo il clic

Svuota il log di Network e clicca sul launcher. Ora il pannello si carica dalla CDN: il suo script (16,6 kb compressi il 2026-09-27) e il foglio di stile del tuo stile (circa 2 kb). Arriva anche un font, se ne hai scelto uno. Poi il pannello apre una connessione verso la nostra API e il visitatore può scrivere.

Tutto il trucco è qui: la parte costosa passa dietro il clic, e la scaricano solo i visitatori che vogliono chattare.

lighthouse

Esegui Lighthouse in modalità mobile sulla pagina senza lo snippet e con lo snippet, qualche volta ciascuna, e confronta le mediane. Sulla stessa pagina i singoli run variano di diversi punti, quindi un run da solo non dimostra niente in nessuna direzione. Con un launcher da 2 kb e nessun lavoro prima del clic, la differenza dovrebbe restare dentro quel rumore.

quattro modi per rendere di nuovo pesante un widget leggero

Un launcher piccolo resta piccolo solo se la pagina intorno glielo permette. Questi sono gli errori che vediamo più spesso, e ognuno annulla in silenzio il lavoro fatto sopra.

Aprire la chat da sola. Un pannello che si apre dopo dieci secondi carica tutta la chat per ogni visitatore, anche per chi stava per comprare. Sul telefono copre pure la pagina. Se vuoi iniziare tu la conversazione, scrivi un saluto; compare quando aprono la chat.

Precaricare il pannello “per renderlo più veloce”. Un <link rel="preload"> o un prefetch per lo script del pannello riporta il suo download prima del clic, per tutti. Dopo il clic sono due richieste brevi verso una CDN vicina al visitatore. Lasciale aspettare il clic.

Metterlo dentro un tag manager. Un tag manager è uno script che carica altri script. Se esiste solo per contenere lo snippet della chat, costa più della chat. Metti il tag direttamente nel tuo template.

Due snippet. Un tema ne aggiunge uno, un plugin un altro, qualcuno ne incolla un terzo nel footer. Il launcher ignora i propri duplicati, ma altri widget spesso no, e ti ritrovi con due chat che si contendono lo stesso angolo. Cerca cdn.spookat.com (o il dominio del tuo vecchio fornitore) nei tuoi template e tienine uno.

cosa succede ai dati

Quando un visitatore invia un messaggio, prima viene salvato, poi pubblicato nel tuo thread di Slack o nel tuo post di Discord. Non salviamo mai un indirizzo IP. Il paese del visitatore viene ricavato da un database offline al momento del messaggio e l’indirizzo non viene conservato. Lo storico delle chat resta 30 giorni con broke af, 90 con cool guy e 365 con vc money, poi viene cancellato. I dettagli, compresi i sub-responsabili, sono nella pagina privacy.

una checklist da riusare

Per qualsiasi widget di chat, non solo il nostro:

• Lo snippet si carica con async o defer e non blocca il rendering.
• Prima di un clic: pochi kilobyte, una richiesta, nessuna richiesta all’API del fornitore.
• Nessun cookie e nessuno storage prima che il visitatore inizi una chat.
• Il launcher non copre i tuoi pulsanti su uno schermo da 375 px.
• Il pannello e i suoi font si caricano solo dopo il clic.
• Il tuo team risponde dove lavora già, senza un’altra scheda da tenere d’occhio.
• Il prezzo non ti punisce se aggiungi qualcuno al team.
• L’hai misurato tu, con la cache disattivata, in una finestra privata.

Provalo sul tuo sito: la prova dura 14 giorni e non serve la carta.