Come installare un chatbot AI o live chat sul tuo sito web

Introduzione

Nel panorama dell’e-commerce e dei servizi digitali moderni, la live chat rappresenta uno strumento essenziale per qualsiasi business che desideri offrire un’esperienza clienti eccezionale. Rettore Studio è partner di LiveChat, e vogliamo condividere con voi una guida completa e pratica per installare e configurare questo potente sistema di comunicazione sul tuo sito web.

Che tu gestisca un negozio online su Shopify, un sito WordPress, o una piattaforma personalizzata, questa guida ti porterà passo dopo passo attraverso tutto il processo di installazione e personalizzazione.

Perché implementare un LiveChat sul tuo sito web?

Prima di passare all’installazione tecnica, è importante comprendere i vantaggi concreti che un LiveChat può portare al tuo business.

Vantaggi principali di LiveChat

Aumento delle conversioni e delle vendite: Studi recenti dimostrano che il 79% delle aziende riscontra un impatto positivo sulle vendite e sui ricavi dopo aver integrato la live chat. I visitatori del sito web che si impegnano in una conversazione in chat hanno una probabilità 2,8 volte maggiore di convertirsi. Inoltre, le aziende che utilizzano la live chat registrano un aumento medio del 10% nel valore medio degli ordini.

Assistenza in tempo reale e riduzione del carrello abbandonato: la live chat elimina i tempi di attesa tipici delle comunicazioni via email o telefono. Con risposte istantanee, puoi guidare i clienti attraverso il processo di acquisto e risolvere i loro dubbi nel momento critico della decisione di acquisto. Questo è particolarmente efficace nel prevenire l’abbandono del carrello.

Supporto multitasking efficiente: un singolo agente può gestire contemporaneamente da 2 a 10 chat, mantenendo alta la qualità del servizio. Questo significa che puoi servire molti clienti senza dover aumentare proporzionalmente il tuo team di supporto.

Personalizzazione della comunicazione: la live chat ti permette di accedere a informazioni cruciali come la cronologia degli ordini, il comportamento di navigazione e i dati del cliente. Questo consente ai tuoi agenti di offrire raccomandazioni personalizzate e un’esperienza su misura.

Raccolta di lead qualificati: Oltre al supporto, la live chat è uno strumento straordinario per la generazione di lead. Puoi catturare contatti in tempo reale e avviare conversazioni proattive che trasformano i visitatori casuali in potenziali clienti.

Guida passo-passo: installazione di LiveChat

Abbiamo suddiviso il processo di installazione in fasi chiare e facili da seguire. Seguendo questa guida, avrai il tuo LiveChat attivo in pochi minuti.

Fase 1: Creazione dell’account LiveChat

Step 1.1 - Registrazione

1. Accedi al sito ufficiale di LiveChat (lc.chat)

2. Clicca su “Accedi” o “Prova gratis”

3. LiveChat offre un periodo di prova gratuito di 14 giorni senza richiedere una carta di credito

4. Compila il modulo di registrazione con:

   • Il tuo nome e cognome

   • L’indirizzo email aziendale

   • Password sicura

   • Nome dell’azienda

Step 1.2 - Verifica email

Una volta completata la registrazione, riceverai un’email di conferma. Clicca sul link di verifica per attivare il tuo account.

Fase 2: Accesso alle impostazioni di installazione

Step 2.1 - Navigazione al pannello di controllo

1. Accedi al tuo account LiveChat

2. Dalla barra di navigazione sinistra, vai a Settings (Impostazioni)

3. Seleziona Channels (Canali)

4. Clicca su Website (Sito web)

Fase 3: Generazione e copia del codice di installazione

Step 3.1 - Generare il codice

Nel pannello del tuo sito web, vedrai un pulsante etichettato come “Copy code” (Copia codice). LiveChat genererà automaticamente un codice JavaScript personalizzato che assomiglierà a questo:

<!-- Start of LiveChat (www.livechat.com) code -->
<script>
  window.__lc = window.__lc || {};
  window.__lc.license = YOUR_LICENSE_ID;
  ;(function(n,c,e,w){function t(n){return e._h?e._h.apply(null,n):[]}function r(e,t,i){return(function(){lcall(e),lcall(t),lcall(i)}).apply(null,arguments)}function i(n){var c={__cs:r('scheduleCall',this.call,n)};return c}e.call=c;e.visitor=i();e._h=[];e.show=function(){return t(['show'])};e.hide=function(){return t(['hide'])};e.chatWindowOnOpen=n;e.chatWindowOnClose=n;e.onBeforeLoad=function(n){return e._h.push(n),'onBeforeLoad'};e.onLoad=function(n){return e._h.push(n),'onLoad'};e.onBeforeUnload=function(n){return e._h.push(n),'onBeforeUnload'};e.onUnload=function(n){return e._h.push(n),'onUnload'};e._onHide=n;e._onShow=n;e.onToggle=function(n,c){return t(['onToggle',{visitor:n,chatOpen:c}])};c.openOrFocusChat=function(n,c){t(['openOrFocusChat',{sectionId:n,key:c}])};e._w={};w.LiveChatWidget=e})(window,document,{});
</script>
<script src="https://cdn.livechatinc.com/tracking.js"></script>
<!-- End of LiveChat code -->

IMPORTANTE: Il valore YOUR_LICENSE_ID nel codice sarà sostituito automaticamente con il tuo ID licenza unico.

Step 3.2 - Copiare il codice

Clicca sul pulsante “Copy code” per copiare l’intero codice negli appunti del tuo computer.

Fase 4: Installazione del codice sul tuo sito web

L’ubicazione dove incollare il codice dipende dalla piattaforma che stai utilizzando. Ecco le istruzioni per le piattaforme più comuni.

Installazione su Shopify

Step 4.1 - Accedi al tuo negozio Shopify

1. Accedi al tuo admin panel di Shopify

2. Dalla barra di navigazione, vai a Sales channels > Online Store

3. Clicca su Themes

Step 4.2 - Seleziona il tuo tema attivo

1. Trovate il tema attualmente in uso (avrà un’etichetta “Published”)

2. Clicca sul pulsante Customize (Personalizza)

Step 4.3 - Aggiungi il codice LiveChat

Metodo consigliato tramite App Store:

1. Vai su Shopify App Store

2. Cerca “LiveChat”

3. Clicca su Add app

4. Accedi al tuo account LiveChat quando richiesto

5. Clicca su Connect

6. Il widget LiveChat apparirà automaticamente sul tuo negozio

Se preferisci l’installazione manuale:

1. Nel pannello di personalizzazione, vai a Theme settings

2. Cerca la sezione Scripts o Footer

3. Incolla il codice LiveChat prima del tag </body>

4. Salva le modifiche

Installazione su WordPress

Step 4.1 - Accedi alla dashboard di WordPress

1. Accedi al tuo pannello di controllo WordPress come amministratore

2. Dalla barra di navigazione sinistra, vai a Appearance (Aspetto)

3. Clicca su Theme File Editor (Editor del tema)

Step 4.2 - Modifica il file footer

1. Nel pannello a destra, cercate Theme Files (File del tema)

2. Seleziona footer.php

Step 4.3 - Incolla il codice LiveChat

1. Scorri fino al fondo del file footer.php

2. Individua il tag di chiusura </body> (di solito si trova alla fine del file)

3. IMPORTANTE: Incolla il codice LiveChat PRIMA del tag </body>, non dopo

4. Clicca su Update File (Aggiorna file)

Step 4.4 - Verifica l’installazione

1. Visita il tuo sito web

2. Refresh la pagina (premi F5 o Cmd+R)

3. Dovresti vedere il widget di LiveChat apparire nell’angolo inferiore destro della pagina

Installazione su Webflow

Step 4.1 - Accedi al tuo progetto Webflow

1. Accedi al tuo account Webflow

2. Seleziona il progetto dove desideri aggiungere LiveChat

Step 4.2 - Accedi alle impostazioni del sito

1. Clicca su Settings (Impostazioni) nel menu principale

2. Seleziona Custom Code (Codice personalizzato)

Step 4.3 - Aggiungi il codice nel footer

1. Nella sezione Footer Code (Codice del footer), incolla il tuo codice LiveChat

2. Clicca su Save

3. Publish (Pubblica) il tuo sito per applicare i cambiamenti

Installazione su siti HTML personalizzati

Se il tuo sito web è costruito con HTML personalizzato:

1. Apri il file HTML del tuo sito in un editor di testo (come VS Code, Sublime Text, o Notepad++)

2. Individua il tag di chiusura </body> (solitamente alla fine del file)

3. Incolla il codice LiveChat immediatamente prima di questo tag:

<!DOCTYPE html>
<html>
<head>
    <title>Il Mio Sito Web</title>
</head>
<body>
    <!-- Contenuto del tuo sito -->

    <!-- Start of LiveChat code -->
    [INCOLLA QUI IL TUO CODICE LIVECHAT]
    <!-- End of LiveChat code -->
</body>
</html>

1. Salva il file

2. Carica il file sul tuo server web (tramite FTP, file manager, o la piattaforma di hosting)

Fase 5: Verifica dell’installazione

Step 5.1 - Verifica visiva

1. Visita il tuo sito web in un browser

2. Scorri fino in fondo alla pagina

3. Dovresti vedere un widget LiveChat nel angolo inferiore destro della pagina

4. Il widget dovrebbe visualizzare un’icona LiveChat con il logo di LiveChat

Step 5.2 - Prova interattiva

1. Clicca sul widget LiveChat

2. Una finestra LiveChat dovrebbe aprirsi

3. Digita un messaggio di prova

4. Se sei loggato nel tuo account LiveChat, riceverai il messaggio nel tuo dashboard

Se il widget non appare:

• Verifica che il codice sia stato incollato PRIMA del tag </body> e non dopo

• Pulisci la cache del browser (Ctrl+Shift+Delete su Chrome, Cmd+Shift+Delete su Safari)

• Attendi 5-10 minuti per la propagazione del codice

• Contatta il supporto LiveChat se il problema persiste

Personalizzazione del widget di LiveChat

Una volta installato con successo, è il momento di personalizzare il widget in modo che rispecchi perfettamente il branding della tua azienda.

Accesso alle impostazioni di personalizzazione

1. Accedi al tuo account LiveChat

2. Vai a Settings > Channels > Website

3. Clicca su Chat Widget Customizer (Personalizzazione widget LiveChat)

Personalizzazione dell’aspetto

1. Colori del brand

• Brand Color (Colore principale): Imposta il colore di sfondo principale del widget. Scegli un colore che corrisponda alla tua identità visiva

• Action Color (Colore azione): Colore per pulsanti, link e elementi interattivi

• Brand Text Color (Colore testo): Colore del testo nell’intestazione e nei messaggi

• Action Text Color (Colore testo azione): Colore per il testo dei pulsanti e delle azioni

2. Logo e avatar

• Carica il logo aziendale nel widget per rafforzare il riconoscimento del brand

• Personalizza gli avatar degli agenti con foto professionali

3. Posizione del widget

• Bottom right (Angolo inferiore destro) - Predefinito e più visibile

• Bottom left (Angolo inferiore sinistro) - Alternativa

• Regola il offset (distanza dai bordi) in pixel per posizionare perfettamente il widget

4. Testo e messaggi

• Chat Window Title: “Come possiamo aiutarti?” o un titolo personalizzato

• Pre-chat Message: Messaggio di benvenuto che appare prima che il cliente inizi a chattare

• Greeting: Saluto automatico quando il widget viene aperto (disponibile nei piani superiori)

Configurazione avanzata (piani Team e Business)

1. Messaggi di benvenuto proattivi

Imposta trigger basati sul comportamento dell’utente:

• Apparizione automatica dopo 30 secondi sulla pagina

• Messaggio al passaggio del mouse su aree specifiche

• Invito quando un visitatore si sofferma a lungo su una pagina di prodotto

2. Sondaggio pre-chat

Raccogli informazioni utili prima della conversazione:

1. Qual è il motivo della tua visita?
   - Domanda su un prodotto
   - Supporto tecnico
   - Informazioni generali

2. Qual è il tuo indirizzo email?
3. Nome completo?

Queste informazioni verranno visualizzate dall’agente, permettendogli di offrire supporto immediato e personalizzato.

3. Messaggi di avvio offline

Configura messaggi per quando nessun agente è disponibile:

• “I nostri agenti sono attualmente offline. Per favore, lascia un messaggio e ti contatteremo presto.”

• Form di contatto alternativo per raccogliere email e messaggi

Configurazione del team di supporto

Aggiunta di agenti

Step 1: accesso alle impostazioni del team

1. Vai a Settings > Team > People (Persone)

2. Clicca su Add Team Member (Aggiungi membro del team)

Step 2: invito dell’agente

1. Inserisci l’indirizzo email dell’agente

2. Seleziona il ruolo:

   • Owner (Proprietario): Accesso completo

   • Agent (Agente): Accesso limitato ai chat

   • Supervisor (Supervisore): Monitoraggio e reporting

3. Clicca su Invite

L’agente riceverà un’email di invito e potrà accettare per iniziare a ricevere chat.

Creazione di gruppi di supporto

Se il tuo team è grande o offri supporto per diversi dipartimenti:

1. Vai a Settings > Team > Groups (Gruppi)

2. Clicca su Add New Group (Aggiungi nuovo gruppo)

3. Assegna un nome (es. “Supporto tecnico”, “Vendite”, “Fatturazione”)

4. Aggiungi i membri del team al gruppo

5. Configura il routing (instradamento) per dirigere i chat al gruppo appropriato

Integrazioni con altre piattaforme

LiveChat si integra con numerose piattaforme e strumenti di business, ampliando in modo significativo le capacità di comunicazione e vendita.

Le integrazioni principali includono:

Shopify
Consente l’accesso diretto ai dati degli ordini e permette raccomandazioni personalizzate basate sulla cronologia di acquisto. L’installazione avviene tramite app ufficiale nello Shopify App Store.

WordPress
Offre una gestione nativa dalla dashboard WordPress e un’integrazione diretta con il CMS tramite plugin ufficiale.

Facebook Messenger
Permette di gestire i messaggi Facebook direttamente all’interno di LiveChat, centralizzando tutte le conversazioni in un’unica piattaforma.

WhatsApp Business
Abilita il supporto omnicanale su WhatsApp tramite la configurazione dei canali.

Google Analytics
Consente il tracciamento delle conversioni generate da LiveChat attraverso l’integrazione con Analytics.

Mailchimp
Sincronizza automaticamente i contatti raccolti via chat con le liste Mailchimp.

Salesforce
Integra LiveChat con un CRM avanzato per la gestione strutturata dei lead.

HubSpot
Collega LiveChat ai flussi di marketing automation e CRM di HubSpot.

Come aggiungere un’integrazione

1. Vai a Settings > Integrations (Integrazioni)

2. Cerca l’integrazione desiderata

3. Clicca su Connect (Connetti)

4. Segui i passaggi di autenticazione specifici della piattaforma

5. Una volta completata, l’integrazione sarà attiva

Strategia di utilizzo: best practices

1. Tempo di risposta critico

Il problema: I clienti si aspettano una risposta quasi istantanea - idealmente entro 30 secondi.

La soluzione:

• Usa messaggi di benvenuto automatici per far sapere che sono stati notati

• Implementa risposte automatiche rapide (canned responses) per domande comuni

• Monitora i tempi di risposta con i report di LiveChat

• Se una risposta richiede più tempo, invia una breve nota: “Sto controllando questo per te - sarà un attimo”

Esempio di risposta rapida:

Visitatore: "Quali sono i tempi di spedizione?"
Agente (automatico): "Grazie per la domanda! Sto verificando i dettagli di spedizione per il tuo ordine..."

2. Personalizzazione della comunicazione

Raccolta di informazioni:

• Utilizza il pre-chat survey per raccogliere nome, email, e motivo della visita

• Gli agenti visualizzeranno questi dati immediatamente

Interazione personalizzata:

• Saluta il cliente per nome: “Ciao Marco, come posso aiutarti oggi?”

• Fai riferimento alla cronologia degli ordini: “Vedo che hai acquistato il nostro prodotto X lo scorso mese...”

• Offri raccomandazioni personalizzate basate sul comportamento di navigazione

3. Gestione proattiva dei messaggi

Trigger intelligenti:

• Appari automaticamente quando un cliente aggiunge un prodotto al carrello: “Hai domande su questo prodotto?”

• Intervieni se il cliente visualizza a lungo la pagina prezzi: “Posso aiutarti a scegliere il piano giusto?”

• Apparizione nella pagina di checkout per ultimi dubbi: “Hai problemi con l’ordine?”

4. Tono amichevole e professionale

Usa contrazioni: “Siamo qui”, ”Ti aiuterò”, “Possiamo risolvere questo”

Espressioni positive: “Assolutamente!”, “Grande domanda!”, “Sono felice di aiutarti!”

Evita il tono robotico: ✖ “La tua richiesta è stata ricevuta e verrà elaborata”
✔ “Perfetto! Sto controllando questo per te”

Specchia lo stile del cliente: Se il cliente è formale, mantieni un tono professionale. Se è casual, sii più amichevole.

5. Chiusura appropriata dei messaggi

• Verifica che il problema sia completamente risolto prima di terminare

• Chiedi: “C’è altro che posso fare per te oggi?”

• Ringrazia il cliente: “Grazie di aver contattato il nostro supporto!”

• Fornisci un numero di ticket per riferimenti futuri

Monitoraggio e analytics

LiveChat offre potenti strumenti di analisi per misurare il successo dei tuoi sforzi di supporto.

Dashboard principale

1. Vai al Dashboard principale dopo aver effettuato l’accesso

2. Qui visualizzerai statistiche in tempo reale:

   • Numero di chat attive

   • Agenti online/offline

   • Tempo medio di risposta

   • Tasso di conversazione

Rapporti dettagliati (disponibili nei piani Team e Business)

1. Vai a Reports (Rapporti)

2. Accedi a rapporti su:

   • Chat Statistics: Volume totale di chat, durata media, rating

   • Agent Reports: Performance dei singoli agenti

   • Engagement Reports: Tasso di apertura widget, messaggi inviati

   • Sales Reports: Conversioni generate da LiveChat (se integrato con e-commerce)

KPI più rilevanti da monitorare

• First Response Time: idealmente inferiore a 30 secondi

• Durata media delle chat, variabile in base al settore

• Soddisfazione del cliente post-chat, con target superiore a 4,5/5

• Tasso di conversione da chat, da migliorare progressivamente

• Numero medio di chat simultanee per agente, idealmente tra 3 e 5

Pricing di LiveChat: piani disponibili

LiveChat offre un modello di pricing trasparente e scalabile a seconda delle esigenze del tuo business.

Piani di prezzo (fatturazione annuale)

💸 Starter - $20/agente/mese

Perfetto per: Piccoli business e startup

Incluso:

• Widget LiveChat illimitato

• Cronologia chat 60 giorni

• Personalizzazione base

• 1 saluto automatico

• Supporto via chat 24/7

Non incluso: Rapporti avanzati, integrazione Shopify, white labeling

🔒 Team - $41/agente/mese

Perfetto per: Aziende in crescita

Incluso (tutto da Starter, più):

• Cronologia chat illimitata

• Personalizzazione completa

• Saluti automatici illimitati

• Rapporti base

• Integrazione Shopify

• Chat tagging

• Condivisione file

Nuovo: Report API, integrazione CRM

🚀 Business - $59/agente/mese

Perfetto per: Aziende consolidate

Incluso (tutto da Team, più):

• Cronologia backups automatici

• Rapporti avanzati + forecasting

• Previsione personale (staffing prediction)

• Work scheduler per gli agenti

• Chat router intelligente

Enterprise: Disponibile a richiesta con prezzi personalizzati e account manager dedicato

Costi aggiuntivi da considerare

• Chatbot/AI Seats: Se desideri automatizzare le risposte (a partire da circa $52/mese)

• Integrazione Custom: Sviluppo personalizzato (prezzo su richiesta)

• Premium Support: Account manager dedicato (solo Enterprise)

Conformità GDPR e sicurezza

Come partner di LiveChat, vogliamo assicurarti che i tuoi dati cliente siano completamente protetti.

Conformità GDPR

LiveChat è completamente conforme al GDPR (General Data Protection Regulation) europeo:

1. Data Storage EU: I dati sono archiviati in data center ubicati in Europa

2. Crittografia SSL 256-bit: Tutte le comunicazioni sono criptate

3. Consenso esplicito: I dati clienti vengono raccolti solo con consenso esplicito tramite pre-chat survey

4. Diritti di cancellazione: I clienti possono richiedere la cancellazione dei loro dati

Implementare GDPR su WordPress

Se stai utilizzando WordPress, segui questi passaggi:

1. Installa un plugin di compliance (es. “My Agile Privacy”)

2. Configura il consenso ai cookie prima del caricamento di LiveChat

3. Aggiungi una dichiarazione privacy che menzioni LiveChat

4. Crea un modulo di pre-chat che richieda consenso esplicito

Security best practices

• 2-Step Verification: Abilita l’autenticazione a due fattori nel tuo account LiveChat

• Banned Visitors List: Blocca visitor problematici

• SSL Certificate: Assicurati che il tuo sito web abbia un certificato SSL valido (https://)

• Regular Backups: Scarica regolarmente gli archivi dei chat (disponibile nei piani Team+)

Troubleshooting comune

Il widget non appare

Possibili cause:

1. Codice nel posto sbagliato

   • ✖ Sbagliato: Dopo il tag </body>

   • ✔ Corretto: PRIMA del tag </body>

2. Cache del browser

   • Soluzione: Pulisci cache (Ctrl+Shift+Delete)

   • Oppure: Accedi in modalità incognito

3. Propagazione non completata

   • Attendi 5-10 minuti

   • Verifica che le modifiche siano state salvate e pubblicate

4. JavaScript disabilitato

   • Verifica nelle impostazioni del browser che JavaScript sia abilitato

Il widget appare ma non funziona

Possibili soluzioni:

1. Verifica la connessione internet

2. Controlla la console del browser (F12 → Console tab)

   • Cerca errori JavaScript correlati a LiveChat

3. Disabilita Adblocker e VPN temporaneamente per i test

4. Contatta il supporto LiveChat: Disponibile 24/7 via chat interno

I messaggi non vengono ricevuti

1. Verifica di essere online nel tuo account LiveChat

2. Controlla lo stato di disponibilità (Should show “Available”)

3. Verifica che il tuo gruppo di supporto sia assegnato

4. Prova da un browser diverso o da una scheda di navigazione privata

Strategie avanzate di LiveChat

Omnichannel communication

Integra LiveChat con altri canali:

1. Facebook Messenger: Rispondere ai messaggi Facebook direttamente da LiveChat

2. WhatsApp Business: Supporto WhatsApp centralizzato

3. Email: Sincronizzazione con CRM

4. SMS: (tramite integrazioni di terze parti)

Questo consente ai tuoi clienti di contattarti dal canale preferito, mentre tu gestisci tutto da un’unica piattaforma.

Automazione intelligente

1. Chatbot per domande frequenti: Automatizza risposte a domande comuni

2. Routing intelligente: Indirizza i chat agli agenti con le giuste competenze

3. Trigger basati su comportamento: Messaggi proattivi in momenti strategici

4. Canned responses: Libreria di risposte pre-scritte per velocità

Analisi predittiva (piano Business+)

1. Staffing Prediction: Prevedi il volume di chat futuro per pianificare i turni

2. Forecast Revenue: Stima le conversioni generate da LiveChat

3. Performance Benchmarking: Confronta le prestazioni con medie di settore

Conclusione

L’installazione di LiveChat sul tuo sito web è un investimento significativo nella qualità del supporto clienti e nella crescita del tuo business. Come partner di LiveChat, Rettore Studio è qui per supportarti in ogni fase del processo.

I principali benefici che otterrai sono:

✔ Aumento delle conversioni fino al 2.8x
✔ Riduzione del carrello abbandonato
✔ Supporto 24/7 senza aumento proporzionale dei costi
✔ Dati e insights per il miglioramento continuo
✔ Conformità GDPR e sicurezza dei dati

Seguendo questa guida, avrai il tuo LiveChat completamente operativo in meno di 30 minuti. Ricorda che il primo periodo di 14 giorni è completamente gratuito: usalo per testare e ottimizzare le tue strategie di supporto prima di scegliere il piano di prezzo che meglio si adatta alle tue esigenze.

Per domande specifiche o per ricevere supporto personalizzato nel setup di LiveChat per il tuo business, contatta il team di Rettore Studio. Siamo qui per assicurare che il tuo LiveChat sia configurato in modo ottimale per il tuo mercato e i tuoi clienti.