Widget Chat #

Guida all’integrazione del widget chat per siti web #

Aggiungi un widget chat intuitivo al tuo sito web che consenta ai visitatori di comunicare direttamente tramite l’interfaccia del tuo sito. Il processo di integrazione è semplice e fornirà al tuo sito web funzionalità di messaggistica integrate.

Creazione e configurazione del widget di chat #

Come arrivarci:

1. Fai clic su Impostazioni vicino alla parte inferiore della barra laterale sinistra. (Su un telefono, tocca prima l’icona del menu ☰ nell’angolo in alto per aprire la barra laterale.)
2. Nella barra laterale sinistra delle Impostazioni, sotto Canali, fai clic su Canali.
3. Trova la scheda Widget chat sito web.
4. Se non hai ancora un widget, fai clic su Connetti per crearne uno con un nome visualizzato e un messaggio di benvenuto.
5. Una volta creato, fai clic su Gestisci in qualsiasi momento per aprire il pannello di configurazione completo.

Le modifiche salvate vengono applicate automaticamente al widget attivo: non è necessario incollare nuovamente il codice di installazione dopo aver apportato una modifica.

Un’anteprima dal vivo si trova proprio accanto alle impostazioni: una pagina web di esempio con il tuo widget reale in esecuzione, che mostra colori, posizione, logo, icona di avvio e popup proattivo esattamente come li vedranno i visitatori. Segue le tue modifiche in tempo reale, quindi non devi salvare per vedere l’aspetto di un cambio di colore o di tema. Puoi persino fare clic sul pulsante della chat all’interno dell’anteprima per aprire il widget e provarlo.

Cosa puoi personalizzare #

Il pannello Gestisci è organizzato in quattro sezioni.

Aspetto #

• Tema di stile: Ristilizza l’intero widget con un clic. Sei temi impostano insieme aspetto, colori, angoli e font: Classic (il look solido originale: una barra di intestazione colorata su un pannello piatto), Glass (un pannello traslucido e satinato che sfoca leggermente la pagina dietro di esso, con l’intestazione e la casella dei messaggi che fluttuano come schede arrotondate al suo interno), Midnight (Glass in colori scuri), Bloom (rosa tenue, extra-arrotondato), Ember (Glass arancione caldo) e Mono (bianco e nero, angoli netti). Un tema è un punto di partenza: dopo averne scelto uno, puoi comunque modificare ogni colore o impostazione singolarmente. I nuovi widget iniziano con Glass; il passaggio è istantaneo ovunque il widget sia incorporato, senza modifiche al codice del tuo sito.
• Angoli e Font: Due impostazioni di stile indipendenti. Angoli definisce quanto sono arrotondati il pannello, le bolle e i pulsanti (Arrotondato, Morbido o Netto), e Font seleziona il carattere tipografico visualizzato dai visitatori (Predefinito, Serif, Arrotondato o Mono) — i font provengono da quelli già presenti sul dispositivo del visitatore, quindi non viene caricato nulla di aggiuntivo sul tuo sito.
• Nome visualizzato: Mostrato nell’intestazione del widget.
• Logo: Carica un’immagine che appare nella parte superiore della chat. Usa il logo della tua azienda o una foto amichevole.
• Icona di avvio: L’icona sul pulsante di chat fluttuante stesso. Scegline una tra le icone integrate (fumetto, aeroplanino di carta, punto interrogativo e altro), riutilizza il logo caricato o carica un’immagine separata — utile se desideri una foto di un membro reale del team che accoglie i visitatori.
• Colori: Cinque colori, ognuno dei quali indica la parte del widget che colora. Colore del brand è il pulsante fluttuante, l’intestazione e i messaggi del visitatore, con Testo del brand per il testo sovrapposto. Bolla del bot è lo sfondo delle risposte del tuo bot e dell’indicatore di digitazione, con Testo della bolla del bot per le parole al loro interno e i puntini animati di digitazione. Finestra della chat è il pannello dietro tutti i messaggi. Scegli un colore per la bolla del bot che sia chiaramente diverso dal tuo colore del brand: se i due coincidono, entrambi i lati della conversazione avranno lo stesso colore e i visitatori non riusciranno a distinguere le risposte del bot dalle proprie. Una bolla del bot grigio chiaro con testo scuro accanto al colore del tuo brand è la combinazione sicura.
• Posizione: Posiziona il pulsante di chat fluttuante nell’angolo in basso a destra o in basso a sinistra, con un offset orizzontale e verticale (in pixel) se si sovrappone a qualcos’altro sulla tua pagina.
• Domande iniziali: Suggerimenti di risposta rapida (chip cliccabili) mostrati nella chat in modo che i visitatori possano iniziare con un tocco invece di digitare — ad esempio “Quali sono i vostri prezzi?” o “Offrite assistenza?” — fino a 10.

Comportamento #

• Messaggio di apertura: Il primo messaggio che i visitatori vedono quando aprono la chat (ad esempio, “Come posso aiutarti?”).
• Suono: Riproduci un suono quando arriva un nuovo messaggio nella chat.
• Richiedi autorizzazione notifiche: Chiedi facoltativamente ai visitatori di consentire le notifiche del browser, in modo che vengano avvisati delle risposte anche quando hanno cambiato scheda.
• Fumetto popup proattivo: Un piccolo fumetto opzionale che appare accanto al pulsante della chat per invitare le persone. Attivalo per impostare il suo messaggio, il testo dei pulsanti accetta/rifiuta e quanti secondi attendere prima che appaia. Il fumetto si nasconde automaticamente dopo 20 secondi se nessuno ci clicca sopra (questo numero è fisso) e, una volta che un visitatore clicca su Non ora, rimane nascosto per il resto della sua visita. La finestra della chat non si apre mai da sola: si apre quando il visitatore clicca sul pulsante della chat o sul fumetto e rimane aperta finché non la chiude.
• Velocità di risposta dell’IA: Un cursore tra Più lenta (più umana: l’IA si prende un momento prima di rispondere) e Velocità massima (più robotica: le risposte arrivano il più velocemente possibile). L’opzione Bilanciata si trova nel mezzo.

Lingue #

Il widget è multilingue di per sé: non c’è nulla da attivare.

• Rileva automaticamente la lingua del visitatore. Per prima cosa controlla la lingua dichiarata nella pagina HTML (<html lang="it">), poi passa alla lingua del browser del visitatore. Se nessuna di queste è una lingua supportata, le etichette del widget verranno visualizzate in inglese, mentre il messaggio di benvenuto, il fumetto popup e le domande iniziali appariranno esattamente come li hai scritti.
• Oppure scegline una tu. Il campo Lingua del widget nella sezione Comportamento è impostato su Auto per impostazione predefinita, che corrisponde al rilevamento descritto sopra. Scegli una lingua da lì e le etichette del widget (i campi Nome, Email e Telefono del modulo visitatore e il relativo testo di esempio, l’informativa sulla privacy, i pulsanti) rimarranno in quella lingua, indipendentemente da quanto indicato dalla pagina o dal browser. Utilizza questa opzione quando il tuo site builder non dichiara la lingua corretta o quando desideri una lingua fissa per ogni visitatore.
• Lingue supportate: inglese, olandese, tedesco, francese, spagnolo, italiano, portoghese, rumeno, polacco, arabo, finlandese, filippino, sloveno, thailandese, bengalese e giapponese. Questo è l’elenco per i pulsanti e le etichette del widget.
• I tuoi messaggi vengono tradotti per te. Ogni volta che salvi, il tuo messaggio di benvenuto, il fumetto popup proattivo e le domande iniziali vengono tradotti in tutte e sedici le lingue sopra indicate. Dovrai scriverli una sola volta, nella lingua che preferisci: la lingua in cui hai scritto viene riconosciuta dal testo stesso, quella versione viene mantenuta parola per parola e tutte le altre lingue ne rappresentano una traduzione. Non importa quale lingua sia impostata per il tuo account.
• Scrivi ogni messaggio in una sola lingua. Se inserisci due lingue nello stesso campo — ad esempio una riga in inglese e una in italiano — l’intero contenuto viene trattato come un unico messaggio e tradotto così com’è; di conseguenza, un visitatore italiano finirà per vedere la stessa frase due volte. Scrivilo una volta sola, nella lingua che preferisci.
• L’IA risponde nella lingua del visitatore. Qualunque sia la lingua digitata dall’utente, il tuo agente risponderà nella stessa lingua, indipendentemente dalla lingua in cui vengono visualizzate le etichette del widget. Se preferisci che risponda sempre in una lingua fissa, specificalo nelle istruzioni del tuo agente.

Suggerimento: se il tuo sito web non imposta un attributo lang nel tag <html>, aggiungine uno. È il segnale più efficace che abbiamo per selezionare la lingua corretta, specialmente per i visitatori che navigano dall’estero.

Acquisizione lead e privacy #

• Raccogli informazioni sui visitatori: Disattivato per impostazione predefinita. Quando è attivo, ai visitatori vengono richiesti nome ed email (e facoltativamente il numero di telefono) prima dell’inizio della conversazione, in modo da acquisire il lead anche se abbandonano la chat a metà.
• Titolo del modulo e Sottotitolo del modulo: Personalizza l’intestazione e la breve spiegazione mostrate sopra il modulo.
• Raccogli numero di telefono: Attiva per richiedere anche il numero di telefono; se disattivato, verranno raccolti solo nome ed email.

Un visitatore ha lasciato un numero di telefono e ha abbandonato il sito: posso continuare su WhatsApp? Sì. Apri la sua chat e seleziona Continua su WhatsApp dal menu con i tre puntini (WhatsApp Web o WhatsApp Business devono essere collegati). DM Champ crea una conversazione WhatsApp collegata per la stessa persona, copia nome, email e dettagli, e l’IA riporta ciò che è stato detto sul sito, così nessuno deve ripetersi. La chat del sito rimane dov’è ed entrambe le chat si rimandano a vicenda sotto Conversazioni collegate nel pannello dei contatti. Vedi Interfaccia chat.

L’agente IA può proporre autonomamente il passaggio a WhatsApp? Sì, e non serve alcuna funzionalità aggiuntiva: basta una riga nelle istruzioni dell’agente. Crea un Link breve per il tuo numero WhatsApp con un messaggio precompilato come “Ciao, stavo chattando sul vostro sito e vorrei continuare qui”, quindi indica all’agente quando inviarlo, ad esempio: “Se il visitatore deve andare via, vuole continuare più tardi o chiede di WhatsApp, offriti di proseguire lì e invia questo link: (il tuo link breve)”. I link nel widget sono cliccabili, quindi il visitatore arriva su WhatsApp con il tuo numero selezionato e il messaggio già scritto; il suo primo messaggio aprirà una conversazione WhatsApp nella tua casella di posta. Se il visitatore ha lasciato nel modulo del widget il numero di telefono da cui scrive (con prefisso internazionale), DM Champ collega automaticamente le due conversazioni e l’IA su WhatsApp conosce già la chat del sito, esattamente come con Continua su WhatsApp. Se non è stato raccolto alcun numero di telefono, le due chat non vengono collegate, quindi assicurati che il messaggio precompilato sia abbastanza specifico da far capire all’agente WhatsApp da dove proviene la persona.

• Richiedi accettazione dell’informativa sulla privacy: Facoltativamente, richiedi ai visitatori di accettare la tua informativa sulla privacy prima di chattare e imposta l’URL a cui punta.

Cosa memorizza il widget nel browser di un visitatore e devo inserirlo dietro un banner per i cookie? Non viene memorizzato nulla semplicemente caricando una pagina. Il widget non scrive cookie né utilizza l’archiviazione del browser finché il visitatore non sceglie di chattare: invia un primo messaggio, compila il modulo con le informazioni sul visitatore o accetta la tua informativa sulla privacy. Da quel momento, mantiene un ID di conversazione casuale e una copia della conversazione in quel browser, come archiviazione di prima parte sul tuo dominio, in modo che la chat sia ancora presente quando il visitatore torna. Non carica script di analisi o tracciamento e non imposta cookie di terze parti. Poiché non viene scritto nulla finché il visitatore non richiede di chattare, rientra nell’archiviazione strettamente necessaria per un servizio richiesto dal visitatore, quindi puoi caricarlo senza doverlo inserire dietro un banner di consenso. Se il tuo sito utilizza comunque uno strumento di consenso, è possibile mantenere il widget dietro di esso; la chat apparirà semplicemente una volta che il visitatore avrà accettato.

Canali e incorporamento #

• Pulsante allegati: Consente ai visitatori di inviare immagini e file nella chat.
• Selettore emoji: Aggiunge un selettore di emoji accanto alla casella di testo del messaggio.
• Link ai canali: Includi facoltativamente link a WhatsApp, Instagram o Messenger in modo che i visitatori possano continuare la conversazione sulla piattaforma che preferiscono. Questa opzione appare solo dopo aver collegato un numero WhatsApp, Instagram o Messenger.
• Pulsanti azione: Una riga di scorciatoie nella parte superiore della chat che indirizzano il visitatore altrove invece di avviare una conversazione: vedi Pulsanti azione qui sotto.
• Whitelist dei domini: Limita i siti web autorizzati a incorporare il tuo widget. Aggiungi i domini in cui lo hai installato (es. example.com o *.example.com); lascia vuoto per consentire qualsiasi dominio.
• Paesi bloccati: Impedisci la visualizzazione del widget ai visitatori provenienti da paesi che non servi. I visitatori la cui posizione di rete si trova in un paese selezionato non vedranno mai il widget e qualsiasi chat tentino di avviare verrà rifiutata. Lascia vuoto per consentire l’accesso a tutti. Vedi Tenere lontani bot e consumo di crediti qui sotto.
• Indirizza queste chat a: Scegli la campagna o l’agente che dovrebbe gestire le chat provenienti dal codice che stai per copiare. Lascia su Predefinito account per utilizzare il normale instradamento del widget della chat. Vedi Invia pagine diverse a campagne diverse qui sotto.
• Snippet da incorporare: Scegli Bolla fluttuante o Incorporato e copia il codice di installazione (vedi sotto).
• Link demo cliente: Incolla l’indirizzo di un qualsiasi sito web per ottenere un link condivisibile che apre quel sito con il tuo widget in esecuzione sopra di esso: non c’è nulla da installare da parte loro. Vedi Mostra il widget sul sito web di qualcun altro qui sotto.

Nella parte inferiore del pannello, un’azione Elimina widget chat rimuove immediatamente il widget dal tuo sito web: questa operazione non può essere annullata e i visitatori non vedranno più il fumetto della chat.

Pulsanti di azione #

Alcuni visitatori non vogliono chattare. Vogliono il tuo numero di telefono, il tuo indirizzo o la tua email, e li vogliono con un solo tocco. I pulsanti di azione sono una riga di scorciatoie nella parte superiore del pannello della chat pensata esattamente per questo.

Aggiungine fino a sei. Ognuno ha un’etichetta (il testo sul pulsante) e una destinazione, e la destinazione dipende dall’azione scelta:

Questi pulsanti non utilizzano crediti. Tocarne uno non invia un messaggio e non avvia una conversazione: porta semplicemente il visitatore dove ha richiesto di andare. Solo una conversazione effettiva con il tuo agente AI utilizza i crediti, esattamente come prima.

Alcune cose utili da sapere:

• I pulsanti rimangono visibili mentre il visitatore chatta. Qualcuno può fare due domande e toccare comunque Indicazioni in seguito senza ricaricare la pagina.
• Le tue etichette vengono mostrate esattamente come le hai scritte. A differenza del messaggio di benvenuto e delle domande iniziali, le etichette dei pulsanti non vengono tradotte automaticamente, quindi se servi visitatori in diverse lingue, mantieni le etichette brevi e chiare (o scrivile nella tua lingua principale).
• Configura correttamente un pulsante o non verrà salvato. Se un numero di telefono, un indirizzo email o un link non sono validi, il pannello lo segnala e blocca Salva modifiche invece di pubblicare un pulsante che non farebbe nulla sul tuo sito.
• Non sono risposte alle FAQ. I pulsanti di azione inviano le persone altrove; non rispondono con testi predefiniti. Le domande sono compito del tuo agente AI, che risponde attingendo dalla tua base di conoscenza. Se vuoi suggerire cosa chiedere, usa le domande iniziali nella sezione Aspetto.

Cosa non puoi personalizzare #

Il pannello Gestisci contiene l’intero set di opzioni. In particolare:

• Nessun CSS o foglio di stile personalizzato. Lo stile è quello offerto dai selettori di tema, angolo, carattere e colore: non puoi inserire il tuo CSS nel widget e le regole della tua pagina non avranno effetto al suo interno.
• Nessun testo segnaposto personalizzato nella casella del messaggio.
• Nessuna incorporazione video all’interno della chat.
• Nessun timer di nascondimento automatico. La bolla di invito scompare da sola dopo 20 secondi e tale numero non può essere modificato; la finestra della chat aperta non si chiude mai da sola. Se la bolla copre il contenuto della tua pagina, sposta il widget con gli offset di Posizione o disattiva la bolla mantenendo solo il pulsante di avvio.

Se uno di questi punti rappresenta un ostacolo per te, l’incorporamento inline ti offre il massimo controllo: il widget si trova in un contenitore sulla tua pagina, che puoi ridimensionare e posizionare come preferisci.

Tenere lontani bot e consumo di crediti #

Ogni risposta dell’IA costa crediti, quindi uno script (o una persona annoiata) che apre chat su chat sul tuo sito web è l’unica cosa contro cui un widget pubblico deve difendersi. Il widget gestisce la maggior parte di queste situazioni autonomamente e due impostazioni nel pannello Gestione ti consentono di rafforzare la protezione per il tuo sito.

• Whitelist dei domini. Solo i siti web che elenchi possono mostrare il widget. Chiunque copi il tuo codice di incorporamento su un altro sito non otterrà nulla.
• Paesi bloccati. I visitatori la cui posizione di rete si trova in un paese che hai bloccato non vedranno mai il widget e una chat che tentano comunque di avviare verrà rifiutata. La posizione deriva dalla connessione del visitatore: qualcuno su una VPN apparirà come proveniente dal paese della VPN, e un visitatore la cui posizione non può essere determinata verrà lasciato passare anziché bloccato. La tua anteprima all’interno dell’app continuerà a funzionare anche se blocchi il paese in cui ti trovi.
• Nuove conversazioni per connessione. Una connessione (in pratica un indirizzo domestico o di ufficio) può aprire 20 nuove conversazioni al giorno su un widget. I visitatori di ritorno che continuano una chat esistente non contano, solo le conversazioni nuove di zecca; quindi uno script che continua ad avviare nuove chat per accumulare risposte dell’IA si esaurirà dopo 20 tentativi, mentre i visitatori reali non noteranno nulla. Se molte persone condividono una connessione sul tuo sito (un campus, un call center), aumenta il numero tramite la REST API con max_new_chats_per_ip_daily; 0 disattiva il controllo.
• Limiti integrati. Oltre a ciò, ogni sessione del browser è limitata nel numero di messaggi che può inviare al minuto e al giorno, e l’agente che risponde alla chat smette di rispondere a un visitatore una volta raggiunto il limite di Messaggi IA massimi per chat impostato sotto i suoi Limiti di risposta.

Nulla di tutto ciò identifica dispositivi o persone: il widget non memorizza nulla nel browser del visitatore finché non sceglie di chattare (vedi sopra) e non viene effettuato alcun fingerprinting.

Istruzioni per l’installazione #

Per aggiungere il widget di chat al tuo sito web, aggiungi una riga di codice all’HTML del tuo sito.

1. Apri il file HTML del tuo sito web in un editor di testo.
2. Trova il tag di chiusura </body>: di solito si trova alla fine del file.
3. Incolla questa riga di codice subito prima del tag </body>, in modo che il resto della pagina venga caricato per primo:

<script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>

4. Sostituisci CONFIG_ID con il tuo identificativo di configurazione univoco, mostrato nella sezione Canali e incorporamento del pannello Gestisci. Questo identificativo è specifico per il tuo account e collega il widget al tuo sistema di messaggistica.

Lo snippet non rallenterà il tuo sito: è un caricatore minuscolo e il widget stesso viene scaricato in background senza bloccare la pagina. Se desideri comunque che il widget attenda il caricamento completo della pagina, puoi racchiudere lo stesso URL in questo modo:

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.dmchamp.com/v1/chat-widget/CONFIG_ID';
  s.async = true;
  document.body.appendChild(s);
});
</script>

E se ciò che vuoi ritardare è la piccola bolla di invito anziché il caricamento del widget, si tratta del ritardo della Bolla popup proattiva nella sezione Comportamento qui sopra: non è necessario alcun codice.

Ecco un esempio completo di come dovrebbe apparire il tuo file HTML con il widget chat implementato:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your existing website content would be here -->

    <!-- Chat Widget Integration -->
    <script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>
</body>
</html>

Incorporamento in linea su una pagina (Avanzato) #

Se preferisci che la chat appaia come parte della tua pagina — ad esempio all’interno di una sezione dedicata “Contattaci”, una scheda di aiuto o una barra laterale — invece che come una bolla fluttuante nell’angolo, imposta Snippet incorporato su Incorporato nel pannello Gestisci e copia lo snippet incorporato.

Si presenta così:

<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.dmchamp.com/v1/chat-widget/embed.js" async></script>

Il <div> è il punto di montaggio: il pannello della chat viene renderizzato al suo interno e ne riempie le dimensioni. Applica al div lo stile che preferisci (assegna un’altezza fissa, inseriscilo in un contenitore flex, posizionalo in una cella di una griglia, ecc.) e il pannello della chat si adatterà di conseguenza.

È necessario un solo tag <script> nella pagina, anche se stai incorporando più widget di chat. Lo script scansiona la pagina alla ricerca di ogni <div data-chat-widget="…"> e monta un pannello di chat in ciascuno di essi.

Quando scegliere tra inline e mobile:

• La bolla mobile è adatta per un pulsante “Hai bisogno di aiuto?” sempre disponibile in tutto il sito.
• L’incorporamento inline è ideale quando la chat deve trovarsi in un punto specifico (una pagina di supporto, una barra laterale della knowledge base, una scheda di aiuto in-app) e sembrare una parte nativa di quella pagina.

L’incorporamento in linea riutilizza la stessa configurazione della bolla fluttuante (logo, messaggio di apertura, acquisizione lead, domande iniziali, ecc.), quindi non devi configurare nulla due volte.

Mostra il widget sul sito web di qualcun altro #

Puoi mostrare il tuo widget di chat in esecuzione su un sito web che non controlli: non serve codice, né accesso al loro sito. È il modo più veloce per mostrare a un potenziale cliente come apparirebbe l’assistente sulle sue pagine.

1. Apri il pannello Gestisci e scorri fino a Canali e Incorporamento.
2. In Link demo cliente, digita l’indirizzo del sito web (ad esempio www.theircompany.com).
3. Fai clic su Copia per copiare il link, o su Apri per vederlo tu stesso per primo.
4. Invia il link a chiunque tu voglia mostrarlo.

L’apertura del link carica quel sito web con il tuo widget di chat che fluttua sopra, esattamente come apparirebbe se fosse installato. Chiunque abbia il link può aprirlo: non c’è nulla a cui accedere.

Alcune cose utili da sapere:

• Le chat della demo sono reali. I messaggi che un visitatore invia in una demo arrivano nella tua casella di posta e ricevono risposta dal tuo agente, e utilizzano crediti come qualsiasi altra conversazione.
• La pagina non è brandizzata. Mostra il loro sito web e il tuo widget, e nient’altro.
• Alcuni siti web non possono essere incorniciati. Diversi siti (banche, grandi rivenditori, qualsiasi cosa dietro impostazioni di sicurezza rigorose) impediscono ad altre pagine di visualizzarli. Quando ciò accade, il link funziona comunque: mostra una finestra del browser simulata neutra invece del sito reale, con il tuo widget attivo sopra, così la demo svolge comunque il suo compito.
• Non cambia il loro sito web. Non viene installato nulla e non viene modificato nulla: la demo esiste solo all’interno di quel link.

Il link demo utilizza sempre l’instradamento predefinito del tuo account, indipendentemente da come è impostato Indirizza queste chat a. Se vuoi che le chat della demo siano gestite da un agente specifico, imposta prima quell’agente come predefinito per il tuo widget di chat.

Invia pagine diverse a campagne diverse #

Per impostazione predefinita, ogni chat che arriva tramite il tuo widget viene gestita dalla stessa campagna o dallo stesso agente. Puoi sovrascrivere questa impostazione per singola pagina, in modo che i visitatori sulla tua pagina dei prezzi parlino con la tua campagna di vendita, mentre i visitatori sulla tua pagina di aiuto parlino con il tuo agente di supporto: tutto dallo stesso widget di chat.

Ci sono due modi per ottenere il codice:

• Dalla campagna o dall’agente. Nella pagina Campagne, apri il menu ⋮ su una campagna e seleziona Aggiungi al sito web. Nella pagina Agenti, fai clic sul pulsante </> nella riga, oppure apri l’agente e vai alla scheda Punti di ingresso. In entrambi i casi otterrai uno snippet pronto da incollare, già puntato a quella campagna o a quell’agente.

  La scheda Punti di ingresso di un agente presenta anche un pannello Widget chat sito web che mostra quante chat sul sito web quell’agente sta già gestendo. Le chat provenienti da un embed raggiungono l’agente direttamente, quindi non è necessario creare una regola di punto di ingresso per esse: un agente senza alcuna regola risponderà comunque al suo embed.

  Aggiungi al sito web appare solo nelle campagne attive e configurate per gestire le chat in arrivo. Una campagna in bozza non può ancora ricevere visitatori, quindi l’opzione rimane nascosta finché non viene pubblicata. Nella pagina Agenti, appare sugli agenti attivi. Un agente in pausa riceverebbe la chat ma non risponderebbe mai, quindi l’opzione rimane nascosta finché non viene riattivato. Non c’è alcun canale da configurare per un agente: un agente può prendere in carico una chat da qualsiasi canale.

• Dalle impostazioni del widget. In Impostazioni → Canali → Gestisci sul tuo widget di chat, imposta Indirizza queste chat a e copia lo snippet sottostante. Modificare il menu a tendina riscrive lo snippet.

Lo snippet mobile riporta la destinazione nell’indirizzo:

<script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID?campaign=CAMPAIGN_ID"></script>

Lo snippet incorporato la riporta invece sul <div>, così una pagina può contenere diverse chat dirette a luoghi diversi:

<div data-chat-widget="CONFIG_ID" data-campaign="CAMPAIGN_ID" style="width:100%;height:600px;"></div>
<script src="https://api.dmchamp.com/v1/chat-widget/embed.js" async></script>

Per un agente, la dicitura cambia in ?agent=AGENT_ID o data-agent="AGENT_ID".

Alcune cose utili da sapere:

• Usa il pulsante di copia invece di digitare l’ID a mano. Se l’ID non corrisponde a una campagna o a un agente nel tuo account, la chat funzionerà comunque ma tornerà all’instradamento predefinito.
• Chi è già nel bel mezzo di una conversazione rimane con chi l’ha iniziata, anche se in seguito approda su una pagina che punta altrove. Questo impedisce a una conversazione di cambiare personalità a metà.
• Una destinazione specifica per pagina ha la priorità sul valore predefinito dell’account e sui trigger delle parole chiave.

Comunica al widget chi è il visitatore (Avanzato) #

Se inserisci il widget di chat all’interno di un’area riservata, un portale clienti o un’app in cui gli utenti hanno già effettuato l’accesso, il tuo sito sa già chi sono. Puoi trasmettere queste informazioni al widget in modo che al visitatore non vengano richiesti dettagli già forniti in precedenza e affinché la tua IA possa utilizzare ciò che già sai su di lui.

Aggiungi un piccolo blocco di impostazioni prima dello script del widget:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      name: "Maria",
      email: "maria@example.com",
      phone: "+391234567890"
    },
    data: {
      plan: "Professional",
      customer_since: "2024",
      last_order: "A-2291"
    }
  };
</script>
<script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>

La tua pagina dovrebbe compilare tali valori lato server, in base all’utente che ha effettuato l’accesso.

Accadono due cose:

• Il modulo “Prima di iniziare…” viene saltato. Con nome ed email forniti, il visitatore passa direttamente alla conversazione e tali dettagli vengono salvati nel suo contatto esattamente come se li avesse digitati lui stesso.
• Tutto ciò che si trova sotto data viene trasmesso alla tua IA. Qualsiasi cosa inserita lì — piano, numero d’ordine, data di rinnovo, credito residuo, numero di postazioni — diventa parte delle informazioni che l’IA possiede su quella persona, così da poter rispondere a domande come “quando si rinnova il mio piano?” senza dover chiedere prima chi sia. Usa i nomi dei campi che preferisci; appariranno nel contatto sotto Campi Personalizzati. Fino a 20 valori, inviati aggiornati a ogni messaggio, quindi se il piano cambia durante la conversazione, l’IA vedrà quello nuovo.

Per gli embed inline, puoi inserire le stesse informazioni su <div>, il che è utile quando una pagina contiene diverse chat:

<div data-chat-widget="CONFIG_ID"
     data-visitor-name="Maria"
     data-visitor-email="maria@example.com"
     data-visitor-data='{"plan":"Professional"}'
     style="width:100%;height:600px;"></div>
<script src="https://api.dmchamp.com/v1/chat-widget/embed.js" async></script>

Se il tuo sito conosce l’identità del visitatore solo dopo il caricamento della pagina — ad esempio in una single-page app in cui l’accesso avviene senza ricaricare la pagina — chiama questa funzione ogni volta che disponi dei dettagli e il widget si aggiornerà automaticamente:

<script>
  window.chatWidget.setVisitor({
    visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
    data: { plan: "Professional" }
  });
</script>

Alcune cose utili da sapere:

• Se due persone diverse effettuano l’accesso dallo stesso computer, la seconda avvia una nuova conversazione invece di vedere la chat della prima. Il widget rileva il cambio di utente e si reimposta.
• Di per sé, questo serve per il contesto, non per autenticare qualcuno. Le conversazioni rimangono separate come sempre, quindi passare un id non consente a nessuno di aprire la chat di qualcun altro, e chiunque utilizzi un dispositivo o un browser diverso avvierà una nuova conversazione in quella sede. Per mantenere la conversazione tra i vari dispositivi, firma l’ id come descritto di seguito.
• È facoltativo. Un widget su una normale pagina pubblica non ha bisogno di nulla di tutto ciò e si comporta esattamente come prima.

Riprendi la stessa conversazione su qualsiasi dispositivo (ID visitatore firmato) #

Se i tuoi clienti hanno un account, puoi fare in modo che la loro chat li segua: accedi da un telefono, continua su un portatile, e sarà la stessa conversazione con lo stesso contatto nella tua casella di posta, e l’IA saprà ancora tutto ciò che è stato detto. Per questo, DM Champ ha bisogno della prova che il visitatore sia davvero chi la tua pagina dice che sia, altrimenti chiunque potrebbe digitare un numero cliente nel proprio browser e leggere la chat di quel cliente. La prova è una firma che calcoli sul tuo server.

1. Nel pannello Gestisci del widget, sotto Canali e incorporamento, trova Visitatori autenticati e fai clic su Genera segreto. Copia il segreto di identità. Conservalo solo sul tuo server; non inserirlo mai nella pagina stessa.

2. Quando il tuo server esegue il rendering di una pagina per un cliente autenticato, calcola un HMAC-SHA256 dell’ID di quel cliente utilizzando il segreto, come stringa esadecimale minuscola:

// Node.js
const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex");

// PHP
$hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET);

# Python
import hmac, hashlib
hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest()

3. Inserisci l’ID e l’hash nel blocco delle impostazioni, accanto al nome e all’email che passi già:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      hash: "3f2a…e91c",
      name: "Maria",
      email: "maria@example.com"
    }
  };
</script>
<script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>

L’incorporamento in linea assume lo stesso valore di data-visitor-hash su <div>, e window.chatWidget.setVisitor({ visitor: { id, hash } }) funziona per le app che fanno accedere gli utenti senza ricaricare la pagina.

Cosa succede una volta verificata la firma:

• La chat del cliente viene archiviata sotto il suo account anziché sotto il browser, quindi è la stessa conversazione su ogni dispositivo e ogni browser in cui ha effettuato l’accesso, e un unico contatto nella tua casella di posta.
• I messaggi precedenti vengono caricati sul nuovo dispositivo e l’IA riprende da dove si era interrotta.
• Se la firma è errata, il widget si comporta silenziosamente come prima, come una normale chat per browser, e stampa il motivo nella console del browser in modo che uno sviluppatore possa individuarlo. I tuoi visitatori non vedranno mai un errore.
• L’ID viene confrontato esattamente come lo hai inviato, quindi firma lo stesso valore che passi come id e usa lo stesso ID per la stessa persona ovunque.

Due cose da sapere:

• Rigenera nel pannello Gestisci ti fornisce un nuovo segreto. Le pagine che firmano ancora con quello vecchio torneranno alle normali chat per browser finché il tuo server non utilizzerà il nuovo segreto. Le conversazioni esistenti vengono mantenute; sono legate all’ID del cliente, non al segreto.
• Una conversazione che qualcuno ha avuto prima di accedere, come visitatore anonimo, rimane una chat separata. La conversazione basata sull’account inizia con il primo messaggio inviato dopo l’accesso.

Modifica le impostazioni del widget dal tuo codice (API) #

Tutto ciò che si trova nel pannello Gestisci del widget può essere modificato anche tramite la REST API, il che è utile se gestisci molti siti web o se desideri disattivare automaticamente il pulsante degli allegati per un cliente. Invia una PATCH a https://api.dmchamp.com/v1/chat-widget-configs/CONFIG_ID con la tua chiave API e solo i campi che desideri modificare: ad esempio {"show_upload_button": false} nasconde il pulsante degli allegati, {"show_emoji_button": false} nasconde il selettore di emoji e {"launcher_icon": "chat-dots"} sostituisce l’icona di avvio. CONFIG_ID è lo stesso identificatore presente nel tuo script di incorporamento. L’elenco completo dei campi accettati (nome, messaggio di apertura, colori, icona di avvio, domini consentiti, modulo informazioni visitatore, informativa sulla privacy, tema, angolo e stile del carattere) si trova nel Riferimento API alla voce Chat Widget. I siti web recepiscono la modifica al caricamento successivo della pagina.

Cosa aspettarsi dopo l’installazione #

Una volta aggiunto lo script al tuo sito web, il widget della chat creerà automaticamente un pulsante di chat nell’angolo del tuo sito web (in basso a destra per impostazione predefinita). Il widget rimane in una posizione fissa mentre gli utenti scorrono le tue pagine, assicurando che sia sempre accessibile.

Quando i visitatori cliccano su questo pulsante, si espande in una finestra di chat completa dove possono iniziare una conversazione, mostrando il tuo messaggio di apertura. Se Raccogli informazioni visitatore è attivo, appare prima un piccolo modulo che richiede nome ed email (e facoltativamente il telefono) prima che possano scrivere.

L’interfaccia della chat si adatta automaticamente alle diverse dimensioni dello schermo, quindi funziona perfettamente sia su desktop che su dispositivi mobili.

Test della tua implementazione #

Dopo aver aggiunto il widget al tuo sito, verifica che funzioni:

1. Apri il tuo sito web in un browser.
2. Fai clic sul pulsante della chat per aprire il widget.
3. Invia un messaggio di prova e conferma di ricevere una risposta.
4. Ripeti l’operazione su un dispositivo o browser diverso per confermare che funzioni ovunque.

Se il widget della chat non appare sul tuo sito, controlla quanto segue:

1. Assicurati di aver sostituito CONFIG_ID con il tuo identificativo di configurazione effettivo.
2. Assicurati che il tag script sia posizionato prima del tag di chiusura </body>.
3. Controlla il codice per eventuali errori di digitazione.

Dietro un firewall aziendale #

Se il widget viene caricato per il pubblico ma non per il personale sulla rete dell’ufficio, è quasi certo che la rete stia bloccando il dominio da cui viene caricato. Chiedi al tuo team IT di consentire, tramite HTTPS standard sulla porta 443:

• Il dominio nel tuo snippet di incorporamento — l’indirizzo nella riga <script src="..."> che hai copiato dal pannello Gestisci.
• api.dmchamp.com — anche il widget invia i suoi messaggi qui.

Non è necessario aprire nient’altro: nessuna porta aggiuntiva e nessuna regola in entrata. Se il widget continua a non apparire dopo queste operazioni, apri la console per sviluppatori del tuo browser sulla pagina e inviaci ciò che viene riportato: una richiesta bloccata indica il dominio che è stato rifiutato, il che solitamente fornisce la risposta completa.