# lascia che claude code aggiunga la live chat al tuo sito

Collega Claude Code al server MCP di Spookat, incolla un prompt e lascia che installi la chat, riprenda l’aspetto del tuo sito e ti dia i link che solo una persona dovrebbe cliccare.

2026-10-21 · Kuba

Claude Code può mettere una live chat sul tuo sito in una sola sessione: aggiunge lo snippet al tuo layout, legge i tuoi colori e i tuoi font per dare stile al widget e ti dà i due link che deve cliccare una persona. Questa guida mostra la configurazione, il prompt, cosa l’agente può e non può fare e come controllare il suo lavoro.

@video vs-agent | Animazione: si chiede a un agente IA di aggiungere la chat di Spookat a un sito e compare il pulsante della chat.

## cosa fa l’agente e cosa resta a te

Spookat è costruito perché un agente di codice possa fare tutta la configurazione. Il manuale è un file scritto per agenti, [llms.txt](https://spookat.com/llms.txt), e c’è un server MCP remoto con strumenti per tutto quello che serve a una configurazione.

L’agente si occupa di scrivere:

- trova il tuo layout condiviso e aggiunge l’unico tag script
- legge i colori e i font del tuo sito e imposta stile, accento, font, posizione e saluto del widget
- ti dice esattamente cosa ha fatto e cosa manca

Una persona fa le due cose che non devono mai succedere da sole:

- **collegare Slack o Discord.** `connect_chat` restituisce un link per chi può aggiungere app nel tuo workspace. Lo approva in Slack o in Discord.
- **pagare.** `change_plan` restituisce un link di checkout. Gli agenti non pagano e non disdicono mai.

L’aspetto lo pubblica l’agente stesso: `publish` lo mette online, senza approvazione. Ogni modifica dell’agente compare nel log delle attività del sito, nella dashboard, e lì puoi annullare una pubblicazione.

## passo 1: collega claude code a spookat

Nel terminale del tuo progetto:

```sh
claude mcp add --transport http spookat https://api.spookat.com/mcp
```

Non serve una chiave. La prima volta che Claude Code usa uno strumento di Spookat si apre una scheda del browser: accedi, spunti i siti che può usare e scegli cosa può fare. Se preferisci una chiave, creala nella dashboard in installazione, chiavi segrete, e passala come header:

```sh
claude mcp add --transport http spookat https://api.spookat.com/mcp --header "Authorization: Bearer sk_live_…"
```

Le chiavi iniziano con `sk_live_`, appartengono a un sito e vengono mostrate una sola volta. Tienile fuori dal repository.

### ancora nessun account spookat

Non ti serve per iniziare. L’agente può registrare il sito da solo: una richiesta con il tuo dominio gli porta lo snippet e un link di rivendicazione per te, e un’altra la chiave solo per la configurazione. Il protocollo è in [auth.md](https://spookat.com/auth.md), e l’agente lo legge da solo quando il manuale lo manda lì.

La chiave di configurazione può dare stile al widget, pubblicare l’aspetto e leggere lo snippet. Non può collegare un canale, toccare la fatturazione né leggere le chat. Tutto questo aspetta che tu rivendichi il sito.

## passo 2: incolla il prompt

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

Questo è tutto il prompt. Il resto è nel manuale. Se vuoi indirizzarlo, aggiungi una riga: lo stile che ti piace, il saluto o da che lato deve stare il launcher.

Com’è un’esecuzione tipica:

1. Legge `llms.txt`, poi controlla se gli strumenti di Spookat rispondono. Se hai effettuato l’accesso, chiama `get_config` e vede il tuo sito. Altrimenti registra il sito.
2. Ti chiede il tuo vero dominio se non lo trova nel progetto. Non ne inventa mai uno, e non inventa mai una chiave.
3. Trova il layout che condividono tutte le pagine e aggiunge il tag prima di `</body>`:

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

4. Guarda il tuo CSS, sceglie uno dei 8 stili, imposta il colore del tuo brand come accento e un font adatto. Può usare il tuo font di sistema o uno dei 17 font che ospitiamo.
5. Chiama `preview` e ti dà un link dove vedi la bozza nel widget vero.
6. Chiama `publish` e l’aspetto è online. Poi `connect_chat` e ti passa il link. Se ha registrato il sito, quello aspetta la tua rivendicazione (passo 3).
7. Chiude con un riepilogo: cosa è cambiato nel codice, cosa ha pubblicato e cosa ti resta da cliccare.

## passo 3: la rivendicazione, se l’agente ha registrato il sito

Quando l’agente ha registrato il sito da solo, ricevi un link di rivendicazione. Aprilo, accedi o registrati (senza carta) e rivendica il sito. Scegli anche cosa tiene l’agente:

- una chiave **admin**, per continuare a configurare, oppure
- una chiave **agent**, per leggere la configurazione e rispondere alle chat più avanti.

Il sito va online quando sono vere due cose, in qualsiasi ordine: l’hai rivendicato e il widget si è caricato sul tuo dominio. La tua prova di 14 giorni parte in quel momento. Prima, il widget compare sul tuo sito ma dice che la chat apre a breve e non accetta messaggi. I siti non rivendicati e le loro chiavi vengono eliminati dopo 7 giorni.

Se l’agente non riesce a raggiungerti durante la sessione, può chiederci di mandarti il link di rivendicazione via email. Quell’email non contiene niente di scritto dall’agente.

## passo 4: rivedi il diff

Trattalo come qualsiasi altra modifica fatta da un agente. Il diff dovrebbe essere piccolo:

- un tag script nel layout condiviso, con `async`
- forse un blocco `window.Spookat = { … }` sopra, se l’agente ha fissato l’aspetto nel codice invece che nella dashboard

Cosa non dovrebbe contenere: una copia del tag in ogni componente di pagina, un tag manager, un preload del pannello della chat o qualsiasi cosa che carichi il pannello prima di un clic. Se vedi una di queste cose, chiedi all’agente di toglierla. Il launcher è un file piccolo apposta.

Dove va il tag dipende dal tuo framework:

| framework | dove |
|---|---|
| Next.js (app router) | `app/layout.tsx`, dentro `<body>` |
| Next.js (pages router) | `pages/_document.tsx` o `pages/_app.tsx` |
| Astro, SvelteKit, Nuxt, Remix | il layout di base |
| Vite + React, HTML puro | `index.html` o l’include del footer condiviso |

## passo 5: controllalo tu

Fai il deploy o avvia il sito, poi aprilo in una finestra privata con i DevTools aperti:

- **Network, filtrato per `spookat`:** una richiesta prima di un clic, il launcher da `cdn.spookat.com`. 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:** nessun cookie di Spookat, nessuno storage finché non invii un primo messaggio.
- **Clicca sul launcher:** il pannello si carica, poi puoi scrivere. Dopo la rivendicazione e il collegamento del canale, il tuo messaggio di prova compare in Slack o in Discord.

La [guida principale](/it/blog/add-live-chat-to-your-website/) ha la versione lunga di questo controllo, con cosa sia ogni richiesta.

## dopo la configurazione: l’agente può anche rispondere

Da pro in su, lo stesso server MCP ha strumenti per le conversazioni: elencare cosa aspetta, leggere una chat, rispondere, aggiungere una nota, passarla a una persona. Le risposte sono etichettate come IA nel widget e nel thread del tuo team, e la risposta di un collega prende sempre il sopravvento. Scegli tu quando può rispondere: sempre per primo, solo se nessuno ha risposto in 3 minuti, fuori dall’orario di lavoro o solo bozze. La [documentazione](/it/docs/) descrive le regole.

## gli altri agenti

Niente di tutto questo è specifico di Claude Code. Il server MCP parla Streamable HTTP, e il prompt funziona in qualsiasi agente che sappia leggere un URL e modificare il tuo codice. In Cursor, il server va in `.cursor/mcp.json`:

```json
{
  "mcpServers": {
    "spookat": { "url": "https://api.spookat.com/mcp" }
  }
}
```

Lascia fuori la chiave e Cursor apre la stessa pagina di accesso.

## quando non va come previsto

**Gli strumenti di Spookat non rispondono.** Esegui `/mcp` in Claude Code per vedere lo stato del server. Se dice che serve l’autenticazione, selezionalo e accedi di nuovo. Se l’hai aggiunto con una chiave, controlla che non sia stata revocata nella dashboard.

**L’agente ha messo il tag nel posto sbagliato.** Digli dove: "Move the Spookat script to the root layout, remove every other copy." Di solito basta una frase.

**Il launcher compare, ma la chat non si connette.** La chat si connette solo dal dominio per cui è registrato il sito e dai suoi sottodomini. Su `localhost` o su un URL di anteprima vedrai il pulsante e nient’altro. Controlla sul dominio vero.

**Uno strumento dice di no.** Prima della rivendicazione, la chiave di configurazione non può collegare un canale né leggere le chat, e lo dice. Dopo la rivendicazione, una chiave **agent** non può cambiare l’aspetto, pubblicare né toccare la fatturazione: è proprio il motivo per sceglierla. Crea una chiave admin nella dashboard se vuoi che l’agente continui a configurare.

**L’email di rivendicazione non è arrivata.** Ne mandiamo una per indirizzo al giorno, senza niente di scritto dall’agente. Apri invece il link di rivendicazione dalla sessione.

**L’agente vuole costruirsi la sua chat.** Alcuni prompt scivolano in quella direzione. Di’ che vuoi Spookat, indica `llms.txt` e torna in carreggiata.

## checklist

- `claude mcp add` fatto, e accesso effettuato (o l’agente ha registrato il sito).
- Un tag nel layout condiviso, `async`, nient’altro che si carica prima di un clic.
- L’aspetto è online e ti piace. Se no, annullalo dal log delle attività.
- Slack o Discord collegato tramite il link.
- Sito rivendicato, se l’agente l’ha registrato.
- 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.

Incolla il prompt, clicca i due link e torna alla parte del tuo prodotto per cui le persone pagano.

---
source: https://spookat.com/it/blog/claude-code-live-chat/