Aggiungere la live chat al tuo sito web può sembrare un compito tecnico che richiede l’aiuto di un programmatore. In pratica, di solito si tratta di creare un account, configurare la finestra di chat e incollare un pezzo di codice.
Non è necessario creare il proprio sistema di messaggistica, configurare un server o creare un’applicazione da zero. Il widget pronto funge da elemento aggiuntivo del sito Web e consente al cliente di avviare una conversazione senza installare l’applicazione o creare un account.
In questa guida ti mostriamo come aggiungere la live chat gratuita di Chataptor a:
- regular HTML page,
- WordPress,
- WooCommerce,
- Shopify,
- Acquirente,
- PrestaShop,
- a page using Google Tag Manager.
Puoi eseguire l’intero processo da solo. La cosa più importante è copiare il codice generato per una pagina specifica e posizionarlo nel posto giusto.
Come aggiungere una live chat al sito: guida rapida
Il processo di base è il seguente:
- Crea un account nel sistema Chataptor.
- Vai alla scheda Canali.
- Seleziona Widget Pagina.
- Aggiungi il nome e l’indirizzo del tuo sito web.
- Apri la scheda Installazione widget.
- Configura l’aspetto della chat.
- Copy the code generated by Chataptor.
- Incollalo nella pagina prima del tag di chiusura
</body>. - Salva le modifiche e invia un messaggio di prova.
Dopo la corretta installazione, i messaggi inviati dal widget inizieranno ad arrivare al pannello Chataptor. Puoi rispondere dal tuo browser o dall’applicazione mobile.
Di cosa hai bisogno prima di iniziare?
Per avviare la chat dal vivo è necessario:
- indirizzo del sito web,
- Chataptor account,
- possibilità di modificare la pagina o le sue impostazioni,
- accesso al pannello WordPress, al sistema di gestione del negozio o del sito web.
Non è necessario conoscere HTML o JavaScript. Nei sistemi più diffusi, il codice può essere incollato in un campo speciale per script aggiuntivi.
Se il sito web è gestito da un’agenzia o da uno sviluppatore, è sufficiente caricare il codice generato con le informazioni:
Aggiungi questo script globalmente su tutte le sottopagine, immediatamente prima del tag di chiusura
</body>.
Passaggio 1. Crea un account Chataptor gratuito
Il primo passo è creare un account Chataptor gratuito.
Nel modulo di registrazione indicare:
- ragione sociale,
- il tuo nome,
- indirizzo e-mail,
- password.
Dopo aver inviato il modulo, controlla la tua casella di posta e conferma la registrazione se ricevi un messaggio di attivazione.
Chataptor è attualmente disponibile gratuitamente, senza limiti di conversazioni e senza funzionalità a pagamento. Include non solo un widget di chat, ma anche un’applicazione mobile, modelli di risposta, una casella di posta comune e traduzioni automatiche dei messaggi.
Passaggio 2. Vai alla scheda “Canali”.
Dopo aver effettuato l’accesso, apri la scheda Canali.
Esistono fonti da cui i messaggi possono raggiungere Chataptor. Uno di questi è il Widget del sito web, che è una finestra di chat mostrata ai visitatori del sito.
Non è necessario configurare subito WhatsApp, e-mail, Facebook o altre integrazioni. Puoi iniziare solo con la chat dal vivo e aggiungere ulteriori canali in un secondo momento.
Seleziona Widget Pagina.
Passaggio 3. Aggiungi il tuo sito web
Dopo aver selezionato il widget, andrai alle impostazioni della pagina.
Aggiungi una nuova pagina e compila quanto segue:
- nome della pagina,
- il suo indirizzo web.
Il nome aiuta a identificare la fonte della chat del pannello. Ciò è particolarmente utile se l’azienda ha diversi negozi, marchi, domini o versioni linguistiche.
Nomi di esempio:
- Acquista Polonia,
- Acquista Germania,
- Sito aziendale,
- Negozio al dettaglio,
- Pannello B2B.
Nel campo dell’indirizzo, inserisci l’indirizzo completo del sito web in cui desideri che appaia la chat dal vivo.
Dopo aver completato i dati, salva la pagina.
Passaggio 4. Configura l’aspetto del widget
Dopo aver salvato la pagina, vai alla scheda Installazione widget.
A seconda della versione attuale del pannello, è possibile impostare, tra le altre cose:
- titolo della finestra di chat,
- messaggio di benvenuto,
- campo di testo per l’inserimento di messaggi,
- colore principale,
- tema chiaro o scuro,
- posizione del widget,
- metodo di apertura della finestra,
- traduzione automatica delle conversazioni.
Non è necessario perfezionare tutte le impostazioni contemporaneamente. Innanzitutto, puoi eseguire una versione semplice, verificarne il funzionamento e solo successivamente modificare l’aspetto.
Quale testo di benvenuto devo impostare?
Mantieni il messaggio di benvenuto breve e indica chiaramente che il cliente può porre una domanda.
Esempi:
Buongiorno! Come possiamo aiutare?
Hai una domanda su un prodotto o un ordine? Scrivici.
Hai bisogno di aiuto per scegliere un prodotto? Siamo qui.
Evita testi lunghi che descrivano l’intera azienda. Il cliente apre la chat perché vuole avviare rapidamente una conversazione.
Quale colore del widget dovrei scegliere?
È meglio utilizzare un colore che corrisponda all’identificazione visiva del sito Web, ma che sia anche sufficientemente contrastante.
Il pulsante deve essere visibile ma non oscurato:
- menù mobile,
- pulsante aggiungi prodotto al carrello,
- informativa sui cookies,
- altri elementi importanti della pagina.
Dopo aver avviato il widget, controlla il suo aspetto sia sul computer che sul telefono.
Passaggio 5. Copia il codice generato da Chataptor
Dopo aver salvato la configurazione, Chataptor genererà un codice di installazione individuale.
Il codice contiene un ID che collega il widget all’account e alla pagina corretti. Pertanto, non dovresti copiare il codice che trovi in un’altra guida, sito web o account di terze parti.
Utilizza sempre il codice completo generato nel tuo pannello Chataptor.
Il frammento potrebbe essere simile al seguente esempio:
<body>
<!-- Contenuto della pagina -->
<!-- Tutaj wklej pełny kod wygenerowany przez Chataptor -->
</body>
Non modificare manualmente ID, chiavi o indirizzi degli script. I parametri di aspetto possono essere modificati solo se sai a cosa servono.
Passaggio 6. Incolla il codice prima del tag </body>
Il codice del widget va aggiunto immediatamente prima del tag di chiusura:
</body>
Esempio di layout del file:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Il mio sito</title>
</head>
<body>
<h1>Benvenuti sul nostro sito</h1>
<!-- Kod widgetu Chataptor wklej w tym miejscu -->
</body>
</html>
Posizionando il codice nel footer globale o nel modello principale, la chat apparirà su tutte le sottopagine.
Se desideri che sia disponibile solo in una posizione specifica, ad esempio in un negozio ma non su un blog, il metodo di installazione potrebbe richiedere una condizione aggiuntiva o l’impostazione di una regola di visualizzazione.
Come aggiungere la chat dal vivo a WordPress?
La soluzione più semplice per una persona non tecnica è utilizzare l’integrazione di Chataptor con WordPress o un plugin che ti consenta di aggiungere script al piè di pagina.
Potrebbe essere, ad esempio, uno strumento come:
- Codice WP,
- Codice testa e piè di pagina,
- Script di intestazione e piè di pagina.
Dopo aver installato il plugin appropriato:
- Apri le sue impostazioni.
- Trova il campo codice nel footer.
- Incolla il codice completo generato in Chataptor.
- Imposta la visualizzazione a pagina intera.
- Salva modifiche.
- Svuota la cache di WordPress.
- Apri la pagina in modalità privata e controlla il widget.
I nomi dei campi possono variare tra i plugin. Cerca termini come:
- Piè di pagina,
- Fine del corpo,
- Prima di
</body>, - Script nel piè di pagina.
Installazione tramite file del tema
Una persona tecnica può aggiungere lo script utilizzando il meccanismo wp_footer o nel file footer di un tema figlio.
Non vale la pena aggiungere codice direttamente al tema principale. Una volta aggiornato, la modifica potrebbe essere rimossa.
Come aggiungere la chat dal vivo a WooCommerce?
WooCommerce funziona su WordPress, quindi l’installazione è la stessa.
È possibile aggiungere il codice Chataptor:
- tramite plugin di gestione degli script, da
- a
wp_footer, - nel footer del tema child.
Dopo l’installazione verificare in particolare:
- home page del negozio,
- scheda prodotto,
- cestino,
- dispositivo mobile.
Il widget non deve coprire i pulsanti di acquisto o gli elementi utilizzati quando si effettua un ordine.
Come aggiungere la chat dal vivo a Shopify?
In Shopify, il codice può essere inserito nel file del modello principale.
Prima di iniziare, è una buona idea creare una copia del tema attivo.
Quindi:
- Accedi alla dashboard di Shopify.
- Apri la sezione Negozio Online.
- Vai a Temi.
- Con il tema attivo, seleziona l’opzione modifica codice.
- Nella directory Layout, apri il file
theme.liquid. - Trova il tag
</body>. - Incolla il codice completo di Chataptor direttamente prima di esso.
- Salva modifiche.
- Aggiorna il negozio ed effettua una conversazione di prova.
Il codice dovrebbe essere incluso nel modello principale in modo che il widget sia disponibile su tutte le sottopagine importanti del negozio.
Come aggiungere la chat dal vivo a Shoper?
Il nome esatto della sezione può variare a seconda della versione del pannello e del template utilizzato. Potrebbero essere utili anche le istruzioni sull’integrazione di Chataptor con Shoper.
Molto spesso dovresti:
- Accedi al pannello di amministrazione.
- Apri la sezione componenti aggiuntivi o integrazioni.
- Vai alle integrazioni personalizzate o al tuo codice.
- Trova il campo codice nel piè di pagina della pagina.
- Incolla il codice Chataptor.
- Salva modifiche.
- Controlla il negozio in una nuova finestra del browser.
Cerca il campo descritto come codice di prechiusura </body>.
Se non vedi questa opzione, il codice può essere aggiunto modificando il modello o inviato al supporto tecnico del negozio.
Come aggiungere la chat dal vivo a PrestaShop?
In PrestaShop è meglio utilizzare una soluzione che non richieda la modifica dei principali file di sistema.
I metodi possibili sono:
- modulo che ti consente di aggiungere il tuo JavaScript,
- modulo HTML personalizzato,
- gancio
displayFooter, - piè di pagina del tema utilizzato,
- un semplice modulo preparato dal programmatore.
Il codice deve essere caricato globalmente, preferibilmente nel footer della pagina.
I file principali di PrestaShop non devono essere modificati. Un aggiornamento del sistema potrebbe rimuovere le modifiche apportate.
Come aggiungere la chat dal vivo a una normale pagina HTML?
Se hai accesso ai file del sito:
- Apri il modello principale o il file footer comune.
- Trova
</body>. - Incolla il codice Chataptor direttamente prima di questo tag.
- Salva il file.
- Pubblica le modifiche sul server.
- Aggiorna la pagina senza cache.
Se il sito web è composto da molti file HTML separati, il codice dovrebbe essere aggiunto a ciascuno di essi o ad un componente comune caricato su tutte le sottopagine.
Come installare Chataptor tramite Google Tag Manager?
Se il sito utilizza già Google Tag Manager, è possibile aggiungere il widget senza modificare direttamente il codice del sito.
Processo di base:
- Crea un nuovo tag.
- Seleziona il tipo HTML personalizzato.
- Incolla il codice completo generato da Chataptor.
- Imposta la regola di avvio su tutte le pagine.
- Salva tag.
- Avvia la modalità anteprima.
- Controlla se lo script si sta caricando.
- Pubblica contenitore.
Questo metodo è comodo, ma richiede che Google Tag Manager sia installato correttamente sul sito.
Vale la pena verificare anche la configurazione del consenso ai cookie. Se gli script vengono bloccati finché non viene dato il consenso, il widget potrebbe apparire solo dopo aver accettato le impostazioni appropriate.
Passaggio 7. Controlla se il widget funziona
Una volta salvato e pubblicato il codice, non smettere di lavorare quando viene visualizzato il pulsante.
Eseguire il test completo:
- Apri la pagina in modalità privata.
- Controlla se il pulsante della chat è visibile.
- Apri il widget.
- Invia messaggio di esempio.
- Accedi a Chataptor.
- Controlla se la conversazione appare nella dashboard.
- Rispondi al messaggio.
- Assicurati che la risposta appaia sul lato client.
- Ripeti il test sul tuo telefono.
Esempio di messaggio di prova:
Buongiorno, vorrei verificare se la live chat funziona correttamente.
Se utilizzi le traduzioni automatiche, esegui il test anche in un’altra lingua.
Il widget non appare nella pagina: cosa controllare?
Le cause più comuni dei problemi sono relativamente semplici.
Codice non pubblicato
Incollare il codice nell’editor non sempre significa pubblicarlo. Verifica che le modifiche siano state salvate e distribuite nella versione live del sito.
Il codice è solo su una sottopagina
Se lo script è stato aggiunto a una singola pagina anziché a un modello globale, la chat non sarà visibile altrove.
La cache mostra la vecchia versione della pagina
Cancella:
- Cache di WordPress,
- cache del plugin utilizzato,
- server o cache di hosting,
- Cache CDN,
- memoria del browser.
Quindi apri la pagina in modalità privata.
Codice di esempio incollato al posto del codice account
Il codice deve contenere ID assegnati all’account e alla pagina corretti. Non copiare l’esempio dall’articolo o dal codice di terze parti.
La sceneggiatura è stata modificata
Controlla che l’editor non abbia rimosso alcun codice, virgolette o attributi di script durante l’incollaggio.
Un altro elemento copre il widget
Sopra la chat potrebbe apparire un cookie banner, un pulsante di contatto o un menu mobile. In questo caso, devi modificare la posizione del widget o le impostazioni del livello della pagina.
Il sistema sta bloccando gli script esterni
La causa potrebbe essere:
- Politica sulla sicurezza dei contenuti,
- meccanismo di gestione del consenso,
- blocco degli script tramite plugin di sicurezza,
- Ottimizzazione JavaScript,
- estensione di blocco degli annunci o del tracciamento.
Per la durata del test vale la pena disattivare l’ottimizzazione degli script e controllare il sito web in un altro browser.
Come impostare la chat dal vivo in modo che i clienti la utilizzino effettivamente?
L’installazione del widget è solo l’inizio. La chat dovrebbe essere visibile, semplice e adattata al modo in cui i clienti utilizzano il sito web.
Non chiedere troppe informazioni prima della conversazione
Se un cliente ha bisogno di fornire nome, cognome, numero di telefono, indirizzo email e alcune informazioni aggiuntive, può annullare l’iscrizione prima che venga inviato il primo messaggio.
Inizialmente raccogli solo i dati di cui hai veramente bisogno.
Stabilisci aspettative realistiche
Se il team risponde solo durante l’orario di lavoro, vale la pena comunicarlo chiaramente.
Esempio:
Scrivi un messaggio. Rispondiamo dal lunedì al venerdì dalle 8:00 alle 16:00.
È meglio dare un tempo reale che promettere una risposta “subito” quando nessuno può darla.
Tenete pronte le vostre risposte
Le domande più frequenti sono:
- disponibilità,
- consegna,
- ritorna,
- fatture,
- stato dell’ordine,
- cooperazione.
Nel sistema Chataptor puoi preparare risposte pronte per la live chat e inserirle utilizzando comandi brevi, ad esempio /spedizione, /reso o /fattura.
Il modello dovrebbe rendere la risposta più rapida ma consentire comunque di adattarla a un cliente specifico.
Attiva le notifiche mobili
Il cliente può scrivere quando nessuno è seduto al computer. App mobile del servizio clienti ti consente di notare una nuova conversazione e rispondere dal tuo telefono.
Ciò è particolarmente importante nelle piccole aziende in cui il servizio clienti non è un reparto separato, attivo 24 ore su 24, 7 giorni su 7.
Prova le traduzioni automatiche
Se il sito è visitato da clienti stranieri, abilitare traduzione automatica delle conversazioni.
Il cliente scrive nella propria lingua. L’operatore legge il messaggio tradotto e risponde nella lingua che usa ogni giorno. Chataptor traduce la risposta prima di mostrarla al cliente.
La live chat gratuita ha dei limiti?
Dipende dallo strumento scelto.
Limite di alcuni piani gratuiti:
- numero di conversazioni al mese,
- numero di operatori,
- durata della cronologia,
- numero di pagine,
- Funzionalità IA,
- automazione,
- possibilità di rimuovere il marchio.
Pertanto, prima dell’installazione, vale la pena verificare non solo se lo strumento dispone di un piano gratuito, ma anche il momento in cui l’azienda dovrà passare ad un abbonamento.
Chataptor è attualmente chat live gratuita senza limiti di conversazioni. Non esiste un pacchetto di traduzione AI a pagamento separato.
Ho bisogno di uno sviluppatore per installare la live chat?
Per lo più no.
Una persona non tecnica può aggiungere il codice da sola:
- Plugin WordPress,
- impostazione di script aggiuntivi nel negozio,
- Gestione tag di Google,
- campo codice personalizzato nel generatore di pagine.
L’assistenza dello sviluppatore potrebbe essere necessaria quando:
- il sito utilizza un sistema proprietario,
- non ha accesso al modello comune,
- opera una rigorosa politica di sicurezza,
- il widget dovrebbe apparire solo in determinate condizioni, L’installazione di
- richiede modifiche al tema o all’applicazione.
Quanto tempo ci vuole per aggiungere la chat dal vivo al sito web?
La semplice creazione del canale e l’incollaggio del codice potrebbero richiedere alcuni minuti. Vale la pena dedicare più tempo a:
- impostazione del contenuto del widget,
- test della versione mobile,
- preparazione della risposta,
- definizione degli orari di servizio,
- configurare le notifiche,
- controllo della traduzione.
È meglio eseguire prima una versione semplice e funzionante e poi migliorarne l’aspetto in base a conversazioni reali.
Elenco di controllo per il lancio della chat dal vivo
Prima di completare la distribuzione, verificare:
- L’account Chataptor è attivo.
- La pagina è stata aggiunta alla scheda Canali.
- È stato utilizzato il codice generato per la pagina corretta.
- Il codice è stato aggiunto a livello globale prima di
</body>. - Il widget è visibile sul tuo computer.
- Il widget è visibile sul telefono.
- Non copre i pulsanti o il cookie banner.
- Il messaggio Test viene inviato alla centrale.
- La risposta è visibile sul lato client.
- Le notifiche mobili funzionano.
- Il testo di benvenuto corrisponde alla pagina.
- Il team sa chi risponde alle nuove conversazioni.
- Sono state preparate le risposte più comuni.
- Le traduzioni sono state testate se necessario.
Riepilogo
Per aggiungere la live chat al tuo sito web, non è necessario creare un proprio sistema o avviare un’implementazione complicata.
Nel sistema Chataptor, il processo si riduce all’aggiunta di una pagina, alla configurazione del widget, alla copia del codice individuale e al posizionamento prima del tag </body>.
Il codice può essere aggiunto direttamente alla pagina HTML, tramite WordPress, WooCommerce, Shopify, Shoper, PrestaShop o Google Tag Manager.
Dopo l’installazione, vale la pena effettuare una conversazione di prova completa e verificare il funzionamento della chat sul telefono. Solo allora puoi essere sicuro che i messaggi dei clienti raggiungano effettivamente il team.
Chataptor ti permette di iniziare con una semplice live chat e poi collegare anche altri canali di comunicazione nello stesso pannello. Il widget stesso, l’applicazione mobile, i modelli di risposta e le traduzioni AI sono disponibili senza limite di conversazioni e senza piano a pagamento.
Vuoi attivare la chat sul tuo sito? Crea un account Chataptor gratuito, aggiungi il sito e incolla il codice del widget generato.
Domande frequenti
Come aggiungere la chat live gratuita al tuo sito web?
Crea un account nel sistema Chataptor, vai alla scheda Canali, aggiungi un sito web, apri Installazione widget e copia il codice generato. Quindi incollalo prima del tag di chiusura </body>.
Dove incollare il codice della live chat?
Il codice dovrebbe apparire nel modello di pagina globale, immediatamente prima di </body>. Grazie a questo, il widget sarà disponibile su tutte le sottopagine.
Come aggiungere la chat dal vivo a WordPress?
Il modo più semplice è utilizzare un plugin che ti consenta di aggiungere script al piè di pagina. Incolla il codice Chataptor nel campo Footer o Prima </body>, salva le modifiche e svuota la cache.
Chataptor funziona con WooCommerce?
Sì. WooCommerce funziona su WordPress, quindi il codice può essere aggiunto tramite il plugin di gestione degli script, wp_footer, o il piè di pagina di un tema figlio.
Come aggiungere la chat dal vivo a Shopify?
Apri il codice del tema attivo, vai al file theme.liquid e incolla il codice Chataptor prima del tag </body>.
Posso aggiungere la chat dal vivo tramite Google Tag Manager?
Sì. Crea un tag HTML personalizzato, incolla il codice Chataptor, impostalo per l’esecuzione su tutte le pagine e pubblica il contenitore.
Perché la chat dal vivo non appare sul sito web?
I motivi più comuni sono codice errato, mancata pubblicazione di modifiche, cache, blocco di script esterni o aggiunta del widget a una sola sottopagina.
Il cliente deve installare l’applicazione?
No. Il cliente utilizza la finestra di chat direttamente sul sito. L’app mobile è progettata per un’azienda di messaggistica.
È possibile modificare l’aspetto del widget?
Sì. Puoi personalizzare, tra le altre cose, il colore, il titolo, il messaggio di benvenuto, il testo della casella di messaggio, il tema e la posizione dei pulsanti.
La chat live gratuita ha un limite di conversazioni?
Chataptor attualmente non ha limiti di conversazione o funzionalità a pagamento. Il widget, l’app mobile e le traduzioni AI sono disponibili senza abbonamento aggiuntivo.
Posso aggiungere un widget a più pagine?
Sì. Nel pannello puoi aggiungere pagine aggiuntive e generare per esse le configurazioni appropriate. Ciò aiuta a separare le conversazioni provenienti da domini, negozi o versioni linguistiche diversi.
Leggi anche
Guide correlate
Come collegare tutti i canali di comunicazione a Chataptor: guida passo passo
Collega chat del sito, WhatsApp, Facebook, Instagram, Allegro ed email a Chataptor e gestisci i messaggi multilingue in un unico pannello.
Live chat gratis senza limiti di messaggi: alternative a tawk.to, Smartsupp e Tidio
Cerchi una live chat gratuita per il sito? Confronta tawk.to, Smartsupp, Tidio e Chataptor, una live chat gratuita senza limiti di messaggi.
La live chat aumenta davvero le vendite? 7 situazioni decisive
La live chat aumenta le vendite online? Scopri 7 situazioni in cui una risposta rapida può rimuovere un ostacolo all'acquisto e aiutare la conversione.