Skip to navigation

Installare la chat sul sito

Il widget per il tuo sito: codice da incollare, domini ammessi, benvenuto, aspetto e cosa vede il visitatore

View as Markdown

La Chat web è il canale con cui un agente di Customer Service risponde ai visitatori del vostro sito. Sul sito compare un pulsante in basso a destra; chi lo apre parla con l’agente e, se serve, viene passato a un operatore del team, che risponde dalla coda di Customer Service.

Prima di cominciare servono due cose: il Customer Service attivo nell’area di lavoro e un agente in modalità Customer Service. Per impostare la modalità serve il permesso Creare agenti di Customer Service, che di partenza hanno Editor e Admin: senza, il menu Modalità agente è disattivato. → Panoramica

Mettere la chat sul sito

1

Apri il canale Chat web

In Agenti, apri l’agente e, nella sezione Canali di erogazione, premi Chat web.

I Canali di erogazione sotto Modalità agente impostata su Customer Service, con la scheda Chat web evidenziata

La configurazione si apre al posto del modulo dell’agente, con il titolo Configura Chat web e l’anteprima del widget a destra.

La pagina Configura Chat web: a sinistra Impostazioni generali, Messaggio di benvenuto e Opzioni della chat con Widget abilitato ancora spento; a destra l'anteprima con le schede Widget e Chat e il pulsante della chat in basso a destra
2

Accendi Widget abilitato

È il primo interruttore di Opzioni della chat, e attiva il canale. Compare la sezione Installazione, con la Chiave embed (inizia con wek_) e lo Snippet di installazione.

Opzioni della chat con Widget abilitato acceso ed evidenziato, gli altri interruttori sotto, e più in basso la sezione Installazione appena comparsa con la Chiave embed e Ruota chiave
3

Aggiungi gli indirizzi del sito

In Origin consentiti scrivi l’indirizzo di ogni sito su cui metterai la chat, per esempio https://www.azienda.it, e premi Aggiungi. Ogni indirizzo aggiunto compare sotto il campo, con la X per toglierlo. Vedi sotto come si scrivono.

Origin consentiti con un indirizzo già aggiunto sotto il campo e un secondo indirizzo scritto nel campo, pronto per Aggiungi, evidenziato
4

Salva l'agente

Le impostazioni della chat si pubblicano quando salvi l’agente. Ogni modifica successiva arriva sul sito al salvataggio, senza toccare il codice.

La pagina Configura Chat web con in alto a destra il pulsante che salva l'agente, evidenziato: Crea su un agente nuovo come questo, Salva su uno già creato
5

Incolla lo snippet nel sito

Premi Copia snippet e incolla il codice nelle pagine in cui vuoi la chat, di solito nel modello comune a tutto il sito. Il pulsante della chat compare in basso a destra. Copia sempre lo snippet dalla tua pagina, non dall’immagine: l’indirizzo che contiene è quello del tuo Userbot, mentre l’immagine viene da un ambiente di prova.

La sezione Installazione: la Chiave embed che inizia con wek_, lo Snippet di installazione con il tag script e Copia snippet evidenziato, e sotto gli Origin consentiti

La Chiave embed non è un segreto: sta nel codice della pagina e chiunque può leggerla. A proteggere la chat è l’elenco degli origin. Non mettere mai al suo posto una chiave API dell’area di lavoro, quelle che iniziano con ub_.

Gli origin consentiti

La chat risponde solo quando la pagina che la ospita è su uno degli indirizzi in elenco. Il confronto è sul nome del sito, porta compresa, ed è esatto:

  • www.azienda.it e azienda.it sono due siti diversi: se il sito risponde su entrambi, aggiungili tutti e due;
  • ogni sottodominio va aggiunto a parte (shop.azienda.it, assistenza.azienda.it);
  • per un sito di prova su una porta, la porta fa parte dell’indirizzo (https://staging.azienda.it:8443).

Con l’elenco vuoto nessun sito è autorizzato. Il pulsante della chat compare lo stesso e il messaggio di benvenuto si vede, ma il visitatore che scrive non riceve risposta e non vede nessun errore. Dopo l’installazione, scrivi un messaggio dal sito vero per controllare.

Ruotare la chiave

Ruota chiave genera una chiave embed nuova. Quella vecchia smette di valere per sempre, insieme a tutte le conversazioni aperte dai visitatori. Dopo la rotazione salva l’agente e sostituisci lo snippet sul sito: finché non lo fai, la chat sul sito non funziona. Serve quando vuoi staccare la chat da un sito su cui non deve più comparire.

Il messaggio di benvenuto

È il primo messaggio che il visitatore vede aprendo la chat, e può avere fino a 4 bottoni.

1

Scrivi il Testo

In Messaggio di benvenuto, campo Testo.

La sezione Messaggio di benvenuto con il campo Testo compilato ed evidenziato e sotto Bottoni ancora vuoto con Aggiungi bottone
2

Premi Aggiungi bottone

Si apre una finestra con Etichetta, Tipo e, per il tipo Testo (AI), il Prompt nascosto (opzionale). Compilala e premi Aggiungi bottone nella finestra.

La finestra Aggiungi bottone compilata: l'etichetta Stato del mio ordine, il tipo Testo (AI) e un prompt nascosto con le istruzioni per l'agente
3

Controlla l'elenco

Il bottone compare sotto Bottoni, con il tipo accanto. Dal menu ⋯ della riga lo modifichi o lo togli; trascinandolo cambi l’ordine.

La sezione Messaggio di benvenuto con il testo scritto e, sotto Bottoni, la riga Stato del mio ordine con l'etichetta Testo (AI) e il menu

I tipi di bottone:

TipoCosa succede quando il visitatore lo preme
Testo (AI)L’agente riceve una richiesta e risponde. Con Prompt nascosto decidi tu cosa riceve: il visitatore vede l’etichetta, l’agente legge il prompt. Se lo lasci vuoto, riceve l’etichetta
LinkSi apre l’indirizzo che indichi. Il benvenuto resta visibile finché il visitatore non scrive o non preme un altro bottone
Step workflowParte un passo di un workflow: scegli il Workflow, lo Step e la Modalità ingresso, cioè Da qui in poi (quel passo e i successivi) o Solo questo nodo

Un bottone Testo (AI) con un prompt nascosto è il modo più semplice per guidare le domande frequenti: «Orari e sedi», «Stato del mio ordine», «Parla con un operatore», ciascuno con istruzioni precise per l’agente.

Aspetto e avviso di legge

ImpostazioneCosa decide
Nome e Ruolo chatIl nome nell’intestazione della chat e la riga sotto, per esempio «Assistente virtuale»
Tema coloreIl colore principale del widget
Avatar del botUn’immagine predefinita, una tua immagine caricata o l’indirizzo di un’immagine
Posizione del botLa distanza del pulsante dal bordo, con Spazio verticale e Spazio orizzontale
Legal DisclaimerL’avviso che dichiara al visitatore che sta parlando con un sistema di intelligenza artificiale
Le sezioni Tema colore con il selettore e il Colore hex, Avatar del bot con tre immagini predefinite e l'URL avatar personalizzato, e Posizione del bot con Spazio verticale e Spazio orizzontale

Il testo predefinito dell’avviso è «Stai interagendo con un sistema di intelligenza artificiale.». Di partenza sparisce quando la conversazione comincia; con Avviso sempre visibile resta in vista per tutta la chat.

La sezione Legal Disclaimer con il testo predefinito e, sotto Visibilità, l'interruttore Avviso sempre visibile spento

L’anteprima a destra, con le schede Widget e Chat, mostra come appare la chat mentre la configuri.

L'anteprima nella scheda Chat: l'intestazione con avatar, nome e Assistente virtuale come ruolo, il messaggio di benvenuto con il bottone Stato del mio ordine, Powered by Userbot e l'avviso sopra il campo di scrittura

Le opzioni della chat

OpzioneCosa fa
Widget abilitatoAccende o spegne il canale
Campo di testoMostra il campo in cui il visitatore scrive. Spento, il visitatore può solo usare i bottoni
Powered byMostra la dicitura «Powered by Userbot»
Microfono, Allegati fileNon ancora attivi: l’interruttore mostra o nasconde il pulsante, ma il pulsante è disattivato e il visitatore non può dettare né allegare
Cronologia chatNon ancora attiva: l’impostazione si salva ma non cambia il comportamento della chat

Nella sezione Intelligenza Artificiale ci sono altre due voci. Non ancora attive: Fonti (mostrare al visitatore le fonti della risposta) e Visibilità (nascondere la chat fuori dall’orario di lavoro) si salvano, ma il widget per ora non le applica. Fuori orario la chat resta visibile e l’agente continua a rispondere; cosa succede quando serve un operatore lo decidono gli orari. → Orari e assegnazione

Far usare i documenti all’agente

Di partenza, i visitatori della chat web non fanno cercare l’agente nei suoi documenti. Per permetterlo, nella sezione della conoscenza dell’agente apri Ricerca avanzata e accendi Consenti nella chat web pubblica.

Prima di accenderlo, rileggi cosa c’è fra i documenti dell’agente: da quel momento qualunque visitatore del sito può ottenere risposte costruite su quei file. → Dare conoscenza a un agente

Cosa vede il visitatore

  • Il benvenuto con i bottoni, l’avviso di legge, poi la conversazione con l’agente. Il widget parla italiano.
  • Se l’agente passa la conversazione a un operatore, la chat continua nella stessa finestra. Le risposte dell’operatore arrivano con il nome del bot e solo come testo: un file allegato dall’operatore non arriva al visitatore. Le note interne non gli arrivano mai.
  • Se un workflow gli chiede dei dati, compare un modulo da compilare dentro la chat.
  • Dal menu della chat può Scarica la trascrizione in un file di testo.
  • Chiudendo la chat con la X gli viene chiesto «Terminare la chat?»: con Termina e inizia nuova la conversazione si chiude e parte la domanda «Nel complesso, come giudicheresti la tua esperienza con la chat?», con 5 faccine oppure Salta e chiudi. La fine della chat e il voto compaiono nella coda, in fondo alla conversazione.

Se il visitatore ricarica la pagina, ritrova la conversazione. Un messaggio può essere lungo al massimo 32.000 caratteri, e ogni conversazione accetta al massimo 30 messaggi al minuto.

Provare prima di andare in produzione

L’anteprima nell’editor dell’agente è dimostrativa: mostra l’aspetto, ma i messaggi che scrivi lì non arrivano all’agente. Per una prova vera metti lo snippet su una pagina di prova, aggiungi il suo indirizzo agli Origin consentiti e scrivi da lì. Prova anche il passaggio a un operatore, con un collega che presidia la coda. → Presidiare le conversazioni