Come aggiungere una chat al sito web: codice HTML, Google Tag Manager, Wix e Squarespace

Per aggiungere una chat al sito web copi lo snippet di codice del tuo strumento di chat e lo fai caricare su ogni pagina. Hai quattro strade: incollarlo subito prima del tag di chiusura </body> nel layout comune del sito, aggiungerlo in Google Tag Manager come tag HTML personalizzato con l'attivatore Tutte le pagine, oppure usare il campo per il codice del tuo site builder (Wix: Custom Code, posizione Body - end; Squarespace: Code Injection, Footer). Poi apri il sito in una finestra privata e manda a te stesso un messaggio di prova. Una chat che si carica ma non avvisa nessuno è peggio di nessuna chat.

WordPress, Shopify e ikas hanno strade proprie, con poco o nessun codice: le trovi alla fine. Gli esempi usano il Messenger di Shopxare, ma il metodo è lo stesso per quasi ogni strumento di chat che ti fornisce uno snippet.

Quale strada fa per il tuo sito

Il mio consiglio: se puoi modificare il template, metti lì il codice. Tag Manager è un buon ripiego quando è l'unico posto in cui puoi aggiungere codice, ma introduce una dipendenza. Chi gestisce il contenitore può spegnere la chat senza accorgersene, e una configurazione del consenso può nasconderla a chi rifiuta i cookie.

Prima di iniziare: copia lo snippet

1. Crea il tuo account Shopxare e vai su Impostazioni → Messenger → Installazione.
2. Copia lo snippet per qualsiasi sito. Con il tuo App ID appare così:

<script>
  window.Shopxare = window.Shopxare || function () { (Shopxare.q = Shopxare.q || []).push(arguments) };
  Shopxare('boot', { app_id: 'YOUR_APP_ID' });
</script>
<script async src="https://app.shopxare.com/widget/v1/loader.js"></script>

3. Quando la chat funziona, vai su Impostazioni → Messenger → Sicurezza → Siti consentiti e inserisci i tuoi domini. Se l'elenco è vuoto il Messenger si carica su qualsiasi sito; compilandolo, il tuo snippet funziona solo sui tuoi siti.

Tutti i dettagli sono in Installare il Messenger.

Strada 1: incolla il codice nell'HTML del sito

1. Trova il file che tutte le pagine condividono. Sulla maggior parte dei siti è un template di layout o di footer, per esempio footer.php, layout.html o un partial del footer. Un sito statico con file HTML separati non ha un file comune, quindi incolli lo snippet in ognuno.
2. Incolla lo snippet subito prima del tag di chiusura </body>.
3. Carica la modifica sul server e ricarica il sito svuotando la cache.

Se il tuo CMS ha un campo tipo "script nel footer" o "codice personalizzato", fa lo stesso lavoro. Usa quello invece di modificare i file.

Le single-page app costruite con React, Vue o simili non richiedono altro. Metti lo snippet una volta in index.html; il Messenger riconosce da solo i cambi di pagina, così il tuo team continua a vedere su quale pagina si trova il cliente.

Strada 2: aggiungere la chat con Google Tag Manager

1. Apri il tuo contenitore su tagmanager.google.com e vai su Tag > Nuovo.
2. Clicca su Configurazione tag e scegli HTML personalizzato. Incolla lo snippet completo, con entrambi i blocchi <script>. La regola di Google è tenere sempre il JavaScript dentro i tag <script> (Guida di Tag Manager).
3. Clicca su Attivazione e scegli Tutte le pagine.
4. Apri le impostazioni avanzate e poi quelle sul consenso (Advanced Settings > Consent Settings). Di default i controlli aggiuntivi sul consenso sono su Not set. Se il tuo banner dei cookie gestisce i tag per tipo di consenso, puoi scegliere Require additional consent for tag to fire e aggiungere il tipo che il banner usa per i cookie funzionali (Guida di Tag Manager). Chiedi quale tipo è giusto a chi gestisce il banner dei cookie e la privacy. Considera l'effetto: con il consenso obbligatorio, chi rifiuta i cookie non vede la chat.
5. Clicca su Anteprima, inserisci l'URL del sito e clicca su Connect (Guida di Tag Manager). Nella vista di debug controlla che il tag della chat sia stato attivato e che il pulsante della chat compaia sul sito.
6. Clicca su Invia e poi su Pubblica.

Tag Manager minimizza il codice HTML personalizzato e può trasformare gli apici singoli in doppi. Per questo snippet non cambia nulla, quindi non preoccuparti se la versione salvata ha un aspetto leggermente diverso.

Quando non usare Tag Manager

• Vuoi riconoscere i clienti che hanno fatto login. La verifica dell'identità richiede uno user_hash che il tuo server calcola con una chiave segreta, e quella chiave deve restare sul server. Tag Manager non può calcolarlo, quindi il tuo template deve generarlo comunque. In questo caso metti il codice di avvio nel template e passa lì user_id, user_hash, email e name (API JavaScript).
• Il tuo sito è su Wix. Wix spiega che gli strumenti di tracciamento come Google Tag Manager non funzionano tramite la funzione di codice personalizzato (Centro assistenza Wix). Incolla lo snippet della chat direttamente in Custom Code (strada 3).
• Lo snippet è già nel tuo tema. Caricalo da un solo posto. Due copie rendono difficile capire dove sta un problema, e più avanti non saprai quale modificare.

Strada 3: aggiungere una chat a un sito Wix

Wix chiede due cose prima: il sito deve essere pubblicato e avere un dominio collegato (Centro assistenza Wix).

1. Nel pannello del sito vai su Settings (Impostazioni).
2. Sotto Development & integrations clicca su Custom Code.
3. Clicca su + Add Custom Code, incolla lo snippet e dagli un nome come "Live chat".
4. In Add Code to Pages scegli All pages.
5. In Place Code in scegli Body - end.
6. Clicca su Apply e apri il sito pubblicato.

Due dettagli di Wix in cui inciampano in molti. Il codice personalizzato è legato al dominio: se assegni un altro dominio principale, Wix cancella i tuoi snippet e devi aggiungerli di nuovo. Inoltre Wix segnala che da dicembre 2025 le sue misure di sicurezza sul frontend possono bloccare alcuni snippet di terze parti finché il fornitore non li aggiorna. Se il pulsante della chat non compare, scrivi al fornitore della chat; Wix non dà assistenza sul codice di terze parti.

Strada 4: aggiungere una chat a un sito Squarespace

L'iniezione di codice è disponibile nei piani Core, Plus e Advanced e in alcuni piani legacy (Centro assistenza Squarespace).

1. Apri il pannello Code Injection. L'articolo di assistenza qui sopra porta direttamente lì.
2. Incolla lo snippet nel campo Footer. Squarespace inserisce quel codice subito prima del tag di chiusura </body> in ogni pagina.
3. Clicca su Save e ricarica il sito.

Le pagine di checkout di Squarespace non supportano codice personalizzato, quindi lì la chat non compare. Organizzati di conseguenza: rispondi alle domande su pagamento e spedizione nelle pagine del carrello e dei prodotti, dove la chat si carica.

WordPress, WooCommerce, Shopify e ikas

Su queste piattaforme c'è una strada migliore dello snippet nudo, perché l'integrazione può portare nella tua inbox anche i dati del cliente e del carrello. Il plugin per WooCommerce e lo snippet per Shopify inviano in automatico dati del negozio come numero di ordini e totale del carrello, che compaiono in una scheda Negozio accanto alla conversazione.

• WordPress e WooCommerce: installa il plugin. Passo per passo in Chat per WordPress gratis e nella documentazione WordPress.
• Shopify: incolla lo snippet del tema in theme.liquid. Vedi Come aggiungere una live chat a Shopify.
• ikas: installa l'app in un passaggio, senza codice (documentazione ikas).

Provala in cinque minuti

1. Apri il sito in una finestra privata, da computer e da smartphone. Il pulsante della chat deve comparire nell'angolo. Da mobile controlla che non copra il pulsante "Aggiungi al carrello" o il banner dei cookie. Puoi spostarlo in Personalizzare il Messenger.
2. Manda a te stesso un messaggio di prova e rispondi dal telefono. Shopxare Mobile è gratis in ogni piano (app mobile e desktop). Se la notifica non arriva, sistemala prima di annunciare la chat ai clienti.
3. Cambia pagina a metà conversazione. La conversazione deve essere ancora lì.
4. Rifiuta i cookie nel banner e ricarica. Vedi ancora la chat? Entrambe le risposte possono andare bene, ma deve essere una scelta, non una sorpresa.
5. Controlla che lo snippet si carichi una sola volta. Guarda il sorgente della pagina o usa Tag Assistant. Una copia nel template e un'altra in Tag Manager è un errore molto facile da fare.

Esempio: una piccola torrefazione online

Una torrefazione immaginaria vende caffè in grani su un sito fatto su misura, dove Google Tag Manager è già installato. La titolare aggiunge il Messenger come tag HTML personalizzato un martedì mattina e lo prova dal telefono. Alle 14:10 un visitatore scrive da una pagina prodotto:

"Questo caffè è in grani o macinato?"

Lei risponde dall'app:

"Di base è in grani. Se lo vuoi macinato, scegli 'Macinato per moka' nel menu della macinatura sopra il pulsante Aggiungi al carrello e lo maciniamo il giorno della spedizione."

Due mesi dopo aggiunge gli account cliente al negozio. È in quel momento che sposta lo snippet da Tag Manager al template della pagina, così il server può passare user_id e user_hash e i clienti abituali vengono riconosciuti nella inbox.

Quando la chat è online

• Imposta gli orari di servizio e un messaggio di assenza, così chi scrive la sera sa quando riceverà risposta. Copia uno dei nostri modelli di messaggio fuori orario.
• Salva le risposte alle cinque domande più frequenti e inseriscile con "/" (risposte salvate). Le nostre risposte predefinite per l'assistenza clienti ti danno un primo set.
• Se di notte non c'è nessuno a rispondere, Are AI può rispondere partendo dai tuoi articoli di aiuto e dalle tue pagine, e passare la conversazione al team quando serve.

Oggi Shopxare ha un solo piano ed è gratuito, senza carta di credito. Puoi creare un account e avere il Messenger sul sito nel tempo che ti serve per trovare il file del footer.

Domande frequenti

Come aggiungo gratis una chat al mio sito web?

Registrati a uno strumento di live chat gratuito, copia lo snippet e incollalo subito prima di </body> nel layout comune del sito, oppure aggiungilo con Google Tag Manager o con il campo per il codice personalizzato del tuo site builder. Poi manda a te stesso un messaggio di prova.

Si può aggiungere una live chat con Google Tag Manager?

Sì. Crea un tag HTML personalizzato, incolla lo snippet completo, imposta l'attivatore su Tutte le pagine, controlla in Anteprima e poi Invia e Pubblica. Evita Tag Manager se devi riconoscere i clienti con login o se il sito è su Wix.

Dove si incolla il codice della chat?

Subito prima del tag di chiusura </body>, in un file o campo usato da tutte le pagine: il template del footer, un campo per gli script nel footer, Custom Code su Wix (Body - end) o Code Injection su Squarespace (Footer).

Perché la chat non compare sul sito?

Le cause tipiche sono una modifica non pubblicata (nel contenitore di Tag Manager o nel site builder), un'impostazione di consenso che blocca il tag finché il visitatore non accetta i cookie, un dominio mancante nell'elenco dei siti consentiti o una pagina in cache. Controlla in una finestra privata dopo aver svuotato la cache.

Una live chat rallenta il sito?

Ogni script in più comporta un po' di caricamento. Il loader del Messenger usa async, quindi il browser non lo aspetta per mostrare la pagina. Se la velocità ti sta a cuore, misura una pagina prodotto prima e dopo l'installazione.