> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.userbot.ai/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.userbot.ai/_mcp/server. # Installare la chat sul sito 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](/customer-service) ## Mettere la chat sul sito #### 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](/_fern-img/90a4e9922c985c5d70bdea688d6a71a985f92887e79e6e542f6385511dae7e91.webp) 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](/_fern-img/81427df9b472e3094472ec7d773f7b61617bced5be607e1877b1960d2a293dd5.webp) #### 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](/_fern-img/d3b5db43daf8a44390fe12dc2c26f0a07a5dcb3b3eb041cd312b5dba1f651113.webp) #### 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](/_fern-img/0f16355abcdcf7b5b973277dd85cbc9e4903d27483078509f1a88e175a5d8f64.webp) #### 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](/_fern-img/d40a907fb40c44c31c50cbfbb6907b630423ba8a45aaeb2985968bc0fc0aa10e.webp) #### 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](/_fern-img/e3e6c12ff7f6e7633543cd65866319acbbf8300d400e7b7bc14441e458fd5193.webp) 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`). > **Warning** > > 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. #### 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](/_fern-img/8bf66eae9ba04b0aac1909b6f6cf1c3d149aa1fc9c527259a6a135f4e77e5bf5.webp) #### 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](/_fern-img/3e52decd5b4622c56a4eae05a41d2c9bcddad27ccbedc30b67a8364524fdca17.webp) #### 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](/_fern-img/438df63df18dabf02c9976f2f83a5e54203933dc7d2243bed916344cc29f3e09.webp) I tipi di bottone: | Tipo | Cosa 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 | | **Link** | Si apre l'indirizzo che indichi. Il benvenuto resta visibile finché il visitatore non scrive o non preme un altro bottone | | **Step workflow** | Parte 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 | Impostazione | Cosa decide | | ------------------------- | ----------------------------------------------------------------------------------------------- | | **Nome** e **Ruolo chat** | Il nome nell'intestazione della chat e la riga sotto, per esempio «Assistente virtuale» | | **Tema colore** | Il colore principale del widget | | **Avatar del bot** | Un'immagine predefinita, una tua immagine caricata o l'indirizzo di un'immagine | | **Posizione del bot** | La distanza del pulsante dal bordo, con **Spazio verticale** e **Spazio orizzontale** | | **Legal Disclaimer** | L'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](/_fern-img/1ecf97ae094dba195a57957330d09a43165b037a389a6b8472abd1c511446fa6.webp) 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](/_fern-img/78004ef92a8cd5c28507ae72ef883267383dde1505aebfe41906fad6dff5f7a2.webp) 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](/_fern-img/493125750d52e85ae1ade4c0f20c3d6c162a74ca24ffc0224957595e454ee083.webp) ## Le opzioni della chat | Opzione | Cosa fa | | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | **Widget abilitato** | Accende o spegne il canale | | **Campo di testo** | Mostra il campo in cui il visitatore scrive. Spento, il visitatore può solo usare i bottoni | | **Powered by** | Mostra la dicitura «Powered by Userbot» | | **Microfono**, **Allegati file** | **Non ancora attivi:** l'interruttore mostra o nasconde il pulsante, ma il pulsante è disattivato e il visitatore non può dettare né allegare | | **Cronologia chat** | **Non 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](/orari-cs) ## 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](/conoscenza-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](/inbox-cs)