aggiungi una live chat a un sito in html puro

30 settembre 2026 · di kuba · 7 min di lettura

A un sito in HTML puro serve esattamente una riga per avere una live chat: un tag script prima di </body>. Questa guida mostra dove va quella riga nelle pagine scritte a mano e nei siti costruiti con un generatore statico, tutte le opzioni che puoi impostare accanto e come controllare nel browser che non si carichi niente prima di un clic.

la riga

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

La chiave del tuo sito è nella pagina di installazione della dashboard, già inserita nello snippet, con un pulsante per copiarla. Inizia con site_live_ ed è pubblica: compare comunque nel sorgente della tua pagina, e funziona solo sul dominio che hai registrato.

Il file che carica è il launcher: un pulsante, i suoi stili e l’aspetto che hai pubblicato nella dashboard. Pesa meno di 4 kb compressi con gzip (sopra quella soglia la build fallisce). Fa 0 richieste alla nostra API e non imposta cookie. Il pannello della chat e la connessione al nostro server si caricano solo quando un visitatore clicca.

Sei alle prime armi con l’argomento? La guida principale spiega quanto costa un widget di chat a una pagina e cosa guardare.

dove va

Subito prima del tag di chiusura </body>:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My site</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <p>Everything else on your page.</p>

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

Perché lì, e perché async:

Alla fine del body, il tag non rallenta niente di quello che c’è sopra. Il browser ha già visto il tuo contenuto quando arriva al tag.
async dice al browser di scaricare il file in background ed eseguirlo quando arriva, senza mettere in pausa la pagina. Lascialo.

ogni pagina, una volta

La chat dovrebbe esserci in ogni pagina in cui un visitatore può avere una domanda, cioè di solito in tutte. Come portarcela dipende da come è fatto il sito.

Pagine scritte a mano. Incolla il tag in ogni file .html. Cerca </body> nella cartella per trovarli tutti. Quando aggiungi una pagina più avanti, copia una pagina esistente come punto di partenza e il tag viene con lei.

Un footer condiviso. Se le tue pagine includono un file footer comune (un include lato server, un include PHP, un partial di template), metti il tag lì una volta sola.

Generatori di siti statici. Mettilo nel layout di base, il template da cui eredita ogni pagina:

generatore	file
Jekyll	`_layouts/default.html`, oppure `_includes/footer.html`
Hugo	`layouts/_default/baseof.html`, oppure un partial del footer
Eleventy	il tuo layout di base in `_includes/`
Astro	il componente del layout di base
Pandoc, script personalizzati	il template HTML che gli passi

Non preoccuparti se una pagina finisce con il tag due volte: il launcher controlla se è già nella pagina e la seconda copia non fa niente. È comunque una richiesta sprecata, quindi tienine una.

configurarlo nel codice

L’aspetto che scegli nella dashboard viaggia dentro il launcher, quindi la riga qui sopra è tutta l’installazione. Se preferisci tenere le impostazioni nel tuo HTML, imposta window.Spookat in uno script sopra il tag:

<script>
  window.Spookat = {
    style: "clean",
    font: "system",
    accent: "#2F6FEB",
    side: "right",
    greeting: "hi. questions about an order? ask here.",
    lang: "en"
  };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

Se la pagina e la dashboard non sono d’accordo, vince la pagina. Cosa fa ogni chiave:

chiave	cosa accetta	cosa fa
`style`	uno dei 8 stili	l’aspetto. `brutal`, `clean`, `glass`, `soft`, `terminal`, `paper`, `retro`, `swiss`
`font`	`"system"` o uno dei 17 font ospitati	il font del widget. `system` non scarica niente; i font ospitati si caricano dalla nostra CDN dopo il clic, mai da Google
`accent`	`"#RRGGBB"`	il colore del tuo brand. Il colore del testo sopra viene scelto per il contrasto
`side`	`"right"` o `"left"`	dove sta il launcher
`greeting`	testo, fino a 200 caratteri	il primo messaggio che vede un visitatore. Vuoto significa quello dello stile
`label`	testo, fino a 40 caratteri	trasforma il pulsante rotondo in una pillola con questo testo
`lang`	un codice lingua, come `"en"` o `"pl"`	la lingua del widget. Predefinita: quella del browser del visitatore, poi l’inglese
`user`	`{ id, sig }`, da cool guy in su	chi ha effettuato l’accesso, firmato sul tuo server

La documentazione ha il riferimento completo, compreso come firmare user.

un sito multilingue

Se il tuo sito ha una cartella per lingua (/en/, /pl/), imposta lang per cartella, così il widget segue la pagina e non il browser. Il widget parla 12 lingue. Il tuo team vede la lingua del visitatore in ogni chat.

un launcher che dice qualcosa

Un sito semplice ha spesso una domanda chiara che fanno i visitatori: “spedite in…”, “posso prenotare…”. Un label come "questions? ask a human" trasforma l’icona in una piccola pillola che lo dice. Tienilo breve; anche sul telefono sta nell’angolo.

cosa riceve il visitatore

Un pulsante nell’angolo, con i tuoi colori. Cliccandolo si apre il pannello con il tuo saluto e una riga che dice che risponde una persona. Scrive; il messaggio arriva nel tuo thread di Slack o Discord, o nella nostra inbox e la sua app per telefono; la tua risposta torna nel widget. Se se ne va prima che tu risponda e ha lasciato un’email, cool guy e i piani superiori gli mandano la risposta via email. La chat resta sul suo dispositivo tra un cambio di pagina e l’altro e nelle visite successive, finché lo storico non scade (30 giorni con broke af).

verificalo

Apri il tuo sito in una finestra privata, così non entrano in gioco cache o storage vecchi. Poi apri i DevTools (F12, oppure tasto destro e Ispeziona).

Network. Spunta “Disable cache”, ricarica e scrivi spookat nel filtro. Una richiesta: il launcher da cdn.spookat.com, circa 2 kb trasferiti. 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 (Archiviazione in Firefox). Cookie: niente da Spookat. Local storage: ancora niente. Una chiave compare solo dopo che hai inviato un primo messaggio; conserva la tua chat su quel dispositivo.
Clicca sul launcher. Ora lo script del pannello e il foglio di stile del tuo stile si caricano dalla CDN, poi la chat si connette. Invia un messaggio di prova e guardalo arrivare in Slack o in Discord.

Se il launcher non compare:

Niente nella scheda Network. Il tag non è in questa pagina, è dentro un commento HTML, oppure il tuo passo di build l’ha rimosso. Guarda il sorgente della pagina e cerca spookat.
La richiesta fallisce. Una chiave della lunghezza sbagliata riceve un 404 dalla CDN. Confronta la chiave nell’URL con quella della dashboard.
Il launcher compare con l’aspetto predefinito e non si connette mai. Anche con un solo carattere sbagliato nella chiave, un launcher si carica lo stesso. Confronta la chiave con quella della dashboard.
Il launcher compare, ma la chat non si connette. Sei su un dominio diverso da quello registrato: un file locale, localhost o un host di staging. La chat si connette solo sul tuo dominio e sui suoi sottodomini.
Una Content Security Policy lo blocca. La console indica la direttiva. Consenti https://cdn.spookat.com per script, stili e font, wss://api.spookat.com per la connessione e data: per le immagini, perché loghi e foto del team sono immagini data:. Il launcher inietta anche un piccolo blocco <style> nella propria shadow root, quindi style-src deve consentire gli stili inline per lui. Se imposti window.Spookat in uno script inline, dai a quello script il nonce o l’hash della tua policy.

cosa non aggiungere

I siti in HTML puro sono veloci perché non c’è niente in mezzo. Lasciali così:

Nessun tag manager solo per la chat. È uno script che carica script, e pesa più del launcher.
Nessun preload o prefetch per il pannello. Sposterebbe il download del pannello prima del clic, per ogni visitatore.
Nessun gioco di prestigio con defer più async. async da solo è quello giusto per questo tag.
Nessun wrapper che apre la chat dopo qualche secondo. Carica tutto il pannello per tutti e copre la tua pagina sul telefono. Un saluto fa lo stesso lavoro quando qualcuno apre davvero la chat.

l’hosting non conta

GitHub Pages, Netlify, Cloudflare Pages, una cartella FTP su un hosting condiviso, un server in uno sgabuzzino: il tag è HTML puro, quindi funziona ovunque vengano serviti i tuoi file. Niente build, niente pacchetti, niente codice lato server.

collega le risposte

Ultimo passo: collega Slack o Discord nella dashboard e scegli un canale, oppure saltalo e rispondi nella nostra inbox e la sua app per telefono. Ogni visitatore ha il suo thread, chiunque nel canale può rispondere e non ci sono postazioni. Costa 4,99 € al mese per sito con broke af.

checklist

Un tag, con async, prima di </body>, in ogni pagina (o una volta nel layout condiviso).
Facoltativo: window.Spookat sopra, se tieni le impostazioni nel codice.
Controllato in una finestra privata: una richiesta prima del clic (due, entrambe da cdn.spookat.com, se il tuo codice imposta uno stile che non hai pubblicato), nessun cookie.
Un messaggio di prova dal widget è arrivato in Slack o in Discord.

La prova dura 14 giorni e non serve la carta. Incolla la riga, e il tuo sito statico può rispondere alle domande.