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:
- 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.)
- Nella barra laterale sinistra delle Impostazioni, sotto Canali, fai clic su Canali.
- Trova la scheda Widget chat sito web.
- Se non hai ancora un widget, fai clic su Connetti per crearne uno con un nome visualizzato e un messaggio di benvenuto.
- 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 l’aspetto, i colori, gli angoli e il carattere: Classic (l’aspetto solido originale: una barra di intestazione colorata su un pannello piatto), Glass (un pannello traslucido smerigliato 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 carattere: Due impostazioni di stile indipendenti. Angoli definisce quanto sono arrotondati il pannello, le bolle e i pulsanti (Arrotondato, Morbido o Netto), e Carattere sceglie il tipo di carattere visualizzato dai visitatori (Predefinito, Serif, Arrotondato o Mono) — i caratteri 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 della chat fluttuante. Scegline una tra quelle 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 posizionato sopra di esso. 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 punti di digitazione animati. Finestra della chat è il pannello dietro tutti i messaggi. Scegli un colore per la bolla del bot che sia chiaramente diverso dal colore del tuo brand: se i due coincidono, entrambi i lati della conversazione avranno lo stesso colore e i visitatori non riusciranno a distinguere le risposte del tuo 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 della 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.
- Riga del piè di pagina: Una piccola riga opzionale di testo personalizzato sotto la casella dei messaggi, ad esempio “Powered by Your Agency”. È disattivata per impostazione predefinita e non viene mostrato nulla sotto la casella dei messaggi quando è disattivata. Attivala, digita il tuo testo (fino a 40 caratteri) e, se vuoi, aggiungi un link che inizia con
https://; i visitatori che cliccano sul testo apriranno quella pagina in una nuova scheda. Le agenzie la usano per inserire il proprio nome sui widget che creano per i clienti.
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 a interagire. Attivalo per impostare il suo messaggio, il testo del pulsante accetta/rifiuta e quanti secondi attendere prima che appaia. Il fumetto si chiude da solo dopo 20 secondi se il visitatore non ci clicca sopra. È l’unico testo che il widget mostra accanto al pulsante della chat: non esiste un’impostazione per un’etichetta permanente accanto al pulsante.
- Velocità di risposta dell’IA: Un cursore tra Più lenta (più umana: l’IA prende tempo prima di rispondere) e Velocità massima (più robotica: le risposte arrivano il più velocemente possibile). Bilanciata si trova nel mezzo. Il primo messaggio di una risposta arriva con il ritardo impostato dal cursore, con l’indicatore di digitazione che appare poco prima.
- Mostra una nota di attesa mentre l’IA lavora: Disattivata per impostazione predefinita. Quando una risposta richiede più di qualche secondo, ad esempio perché il tuo agente sta cercando qualcosa in un altro sistema, i visitatori vedono una breve riga accanto ai puntini di digitazione: “Sto elaborando la risposta” dopo 5 secondi, “Sto cercando per te” dopo 15, poi “Ci sto ancora lavorando, quasi fatto” e delle scuse per l’attesa se richiede più tempo. Le risposte rapide mostrano ancora solo i puntini. La riga segue la lingua del widget e appare solo mentre la tua IA sta effettivamente lavorando a una risposta, mai quando l’IA è disattivata per quella chat o una persona ha preso il controllo.
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 delle due è una lingua supportata, le etichette del widget vengono mostrate nella lingua in cui hai scritto il messaggio di benvenuto, mentre il messaggio di benvenuto, il fumetto popup e le domande iniziali appariranno esattamente come li hai scritti. -
Una lingua della pagina che contraddice il tuo messaggio di benvenuto non viene considerata attendibile. Alcuni site builder inseriscono
lang="en"in ogni pagina, indipendentemente dalla lingua del sito. Quando la pagina dichiara una lingua e tu hai scritto il messaggio di benvenuto in un’altra, il widget tratta il valore della pagina come un’impostazione predefinita del builder: segue invece la lingua del browser del visitatore e, se non è una lingua supportata, utilizza quella in cui hai scritto. Una pagina che cambia il proprio valorelangquando il visitatore seleziona una lingua sul tuo sito viene sempre seguita. Se preferisci non dipendere da tutto ciò, imposta la lingua nella sezione Comportamento. -
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 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 ciò che indicano la pagina o il 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, giapponese, norvegese (Bokmål) e turco. Questo è l’elenco per i pulsanti e le etichette del widget.
-
Le lingue che si leggono da destra a sinistra hanno un layout orientato da destra a sinistra. Per i visitatori che usano arabo, ebraico, persiano e urdu, l’intera finestra della chat si specchia: l’intestazione, i fumetti dei messaggi, i puntini di digitazione, il modulo visitatore e la casella di testo iniziano tutti da destra. Il pulsante del fumetto rimane nell’angolo scelto. I visitatori che usano ebraico, persiano e urdu vedono le etichette in inglese (o nella lingua che hai impostato), ma il layout segue comunque la loro lingua. Un messaggio scritto in una direzione diversa, come una risposta in inglese in una chat in arabo, viene comunque letto nell’ordine corretto.
-
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 le diciotto lingue sopra indicate. Li scrivi 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 ogni altra lingua è una sua traduzione. Non importa quale lingua sia impostata per il tuo account.
-
Scrivi la tua versione per una lingua. La sezione Traduzioni del pannello Gestione, subito sotto Comportamento, ti consente di sostituire la traduzione automatica con una tua formulazione, ad esempio lo spagnolo formale (“usted”) dove quello automatico è informale. Scegli una lingua sotto Lingua, quindi compila uno dei seguenti campi: Messaggio di benvenuto, Messaggio popup, Testo di accettazione e Testo di rifiuto del popup (mostrati mentre il fumetto popup è attivo) e Domande iniziali. Ogni campo mostra la traduzione automatica in grigio; Inizia dalla traduzione automatica la copia in modo che tu possa modificarla da lì. Tutto ciò che lasci vuoto mantiene la traduzione automatica. Le lingue che hai scritto tu stesso sono elencate per prime, contrassegnate come La tua formulazione, e Rimuovi la mia formulazione (lingua) ripristina la traduzione automatica per quella lingua. La tua formulazione viene mantenuta quando modifichi il testo originale in seguito; solo le traduzioni automatiche vengono rifatte.
-
Anche i pulsanti del popup vengono tradotti. I pulsanti Accetta e Rifiuta del fumetto popup proattivo vengono tradotti insieme agli altri messaggi, così un visitatore spagnolo non vedrà più pulsanti in inglese.
-
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’è, quindi 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 in cui qualcuno scrive, il tuo agente risponde nella stessa lingua, indipendentemente dalla lingua in cui vengono mostrate le etichette del widget. Se preferisci che risponda sempre in una lingua fissa, indicalo nelle istruzioni del tuo agente.
-
Imposta la lingua per pagina nel codice di incorporamento. Gestisci un widget su un sito in inglese e una sua copia tradotta? Aggiungi
data-langal tag script del widget su ogni pagina.data-lang="es"mostra il widget in spagnolo su quella pagina, indipendentemente da ciò che dice il browser;data-lang="page"lo fa seguire il valore<html lang="...">della pagina stessa (quindilang="es-MX"fornisce lo spagnolo), anche quando il tuo messaggio di benvenuto è scritto in un’altra lingua. Ha la priorità sul campo Lingua del widget, che a sua volta ha la priorità sul rilevamento automatico. Ad esempio:
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" data-lang="page" defer></script>
Mantieni il codice di incorporamento dal pannello Gestione così com’è e aggiungi solo l’attributo data-lang. Per un pannello di chat integrato, inserisci data-lang su <div data-chat-widget="…"> invece.
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 chiesti nome ed email (e facoltativamente il numero di telefono) prima che inizi la 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 un numero di telefono; se disattivato, raccoglie solo nome ed email.
- Raccogli cognome: Disattivato per impostazione predefinita. Attiva per aggiungere un campo obbligatorio Cognome subito dopo il Nome. Viene salvato sul contatto come cognome, in modo che la tua IA e tutto ciò che cerca nei tuoi sistemi abbia il nome completo fin dal primo messaggio. Ai visitatori che hanno già compilato il modulo prima che tu attivassi questa opzione non verrà richiesto di nuovo.
- Email di risposta non letta ai visitatori: un visitatore che ha lasciato un indirizzo email e non ha visto la tua risposta dopo 15 minuti riceve un’email che lo rimanda alla chat. Disattivalo in Impostazioni → Notifiche → Visitatori del widget chat. Vedi Email ai visitatori del widget chat.
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). Your AI Connector 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.
Un visitatore ha lasciato la propria email ma non ha prenotato: posso ricontattarlo via email? Sì, con un’automazione. Un passaggio Crea contatto con Canale impostato su Email trasforma l’indirizzo lasciato dal visitatore in un contatto email sul tuo Canale email collegato, e un passaggio Invia messaggio subito dopo viene inviato come email; le risposte arriveranno nelle Chat per il tuo agente email. La procedura completa, inclusa quella per interrompere la sequenza una volta che l’utente conferma di aver prenotato, è disponibile in Automazioni → Esempio: follow-up via email per i lead della chat del sito web.
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), Your AI Connector 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 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 (WhatsApp Business o WhatsApp Web), Instagram o Messenger. Attivando il link WhatsApp, verrà inserito il numero collegato; il link rimane modificabile, quindi dopo aver cambiato numero potrai digitare quello nuovo.
- Pulsanti di azione: Una riga di scorciatoie nella parte superiore della chat che indirizzano il visitatore altrove invece di avviare una conversazione: vedi Pulsanti di azione qui sotto.
- Whitelist dei domini: Limita i siti web autorizzati a incorporare il tuo widget. Aggiungi i domini in cui lo hai installato (ad es.
example.como*.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 fuori bot e consumo di crediti qui sotto.
- Indirizza queste chat a: Scegli l’agente che dovrebbe gestire le chat provenienti dal codice che stai per copiare. Lascia su Predefinito dell’account per utilizzare il normale instradamento del widget della chat. Vedi Inviare pagine diverse ad agenti diversi qui sotto.
- Snippet di incorporamento: Scegli Floating bubble (bolla mobile) o Inline (incorporato) e copia il codice di installazione (vedi sotto).
- Link demo cliente: Incolla l’indirizzo di un qualsiasi sito web e fai clic su Crea link per ottenere un link condivisibile che apre quel sito con il tuo widget in esecuzione sopra di esso, senza dover installare nulla. Ogni link creato viene elencato ed è possibile disattivarlo singolarmente. Vedi Mostrare il widget sul sito web di qualcun altro qui sotto.
- Condividi link: Un link pronto all’uso che apre il tuo assistente su una pagina dedicata, a schermo intero, senza bisogno di un sito web. Copialo e invialo ovunque. Vedi Condividere un link diretto alla chat 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:
| Azione | Cosa ottiene il visitatore | Cosa inserire |
|---|---|---|
| Chiama | Si apre il tastierino telefonico con il tuo numero pronto | Il tuo numero di telefono, es. +1 555 123 4567 |
| SMS | L’app di messaggistica apre un nuovo messaggio per te | Il tuo numero di telefono |
| WhatsApp apre una chat con te | Il tuo numero WhatsApp o un link wa.me che già possiedi |
|
| L’app di posta apre una nuova email per te | Il tuo indirizzo email | |
| Indicazioni | Google Maps si apre con la tua posizione | Il tuo indirizzo o un link a una mappa che già possiedi |
| Link | La pagina si apre in una nuova scheda | Qualsiasi indirizzo web completo che inizi con https:// |
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 è limitato a ciò che offrono il tema, gli angoli, i caratteri e i selettori di colore: non è possibile inserire il proprio CSS nel widget e le regole della tua pagina non avranno effetto al suo interno.
- Nessun testo segnaposto personalizzato nella casella dei messaggi.
- Nessun incorporamento di video all’interno della chat.
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 la loro chat esistente non contano, solo le conversazioni nuove di zecca lo fanno, quindi uno script che continua ad avviare nuove chat per ottenere risposte dall’IA si esaurirà dopo 20, 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;0disattiva il controllo. - Verifica umana (opzionale). I visitatori superano un rapido controllo Cloudflare Turnstile prima che venga inviato il loro primo messaggio, in modo che uno script non possa affatto avviare chat. La maggior parte delle persone non clicca mai nulla; Cloudflare mostra una casella di controllo solo quando non è sicuro. Utilizza le tue chiavi Turnstile gratuite, vedi Aggiungi una verifica umana qui sotto.
- Limiti integrati. Oltre a ciò, ogni sessione del browser ha un limite al 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 Max messaggi IA 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.
Aggiungi una verifica umana (Cloudflare Turnstile)
Attiva questa opzione quando i bot continuano ad aprire chat sul tuo sito web e le impostazioni sopra non sono sufficienti. Il controllo viene eseguito una volta, subito prima che venga inviato il primo messaggio di un visitatore. Un visitatore che supera il controllo può continuare a chattare per 24 ore senza vederlo di nuovo, e chiunque ritorni a una conversazione precedente può comunque leggerla prima del controllo.
- Accedi al tuo account Cloudflare (un account gratuito è sufficiente) e apri Turnstile.
- Clicca su Add widget, dagli un nome e aggiungi ogni dominio su cui è in esecuzione il tuo widget di chat (ad esempio
yourshop.com). Lascia la modalità widget su Managed. - Copia la Site key e la Secret key che Cloudflare ti mostra.
- Nell’app, apri il pannello Manage del tuo widget di chat, attiva Human check before chatting, incolla entrambe le chiavi e salva.
Cosa aspettarsi:
- Il controllo rimane disattivato finché entrambe le chiavi non vengono inserite, quindi attivarlo senza chiavi non bloccherà mai i visitatori.
- Se un visitatore non supera il controllo o lo lascia irrisolto, il suo messaggio non viene inviato e riceverà un pulsante Riprova.
- Il controllo appare solo sui domini che hai aggiunto in Cloudflare. Su qualsiasi altro dominio Cloudflare lo rifiuta e nessuno su quel sito può inviare un messaggio, quindi aggiungi ogni dominio prima di attivarlo.
- Se il tuo sito web utilizza una Content Security Policy, consenti
https://challenges.cloudflare.comper script e frame, altrimenti il controllo non potrà essere caricato. - Le chiavi appartengono al tuo account Cloudflare e la chiave segreta non viene mai inviata ai browser dei tuoi visitatori.
Istruzioni per l’installazione
Per aggiungere il widget di chat al tuo sito web, aggiungi una riga di codice all’HTML del tuo sito.
- Apri il file HTML del tuo sito web in un editor di testo.
- Trova il tag di chiusura
</body>: di solito si trova alla fine del file. - 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.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
- Sostituisci
CONFIG_IDcon 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.youraiconnector.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.
Installazione su Shopify
- Nel tuo pannello di amministrazione Shopify vai su Negozio online > Temi.
- Sul tema contrassegnato come tema attuale (pubblicato), clicca sul pulsante … e scegli Modifica codice. La modifica di una bozza o di una copia del tema non cambia nulla nel tuo negozio live.
- Apri layout/theme.liquid e scorri fino al tag di chiusura
</body>vicino alla parte inferiore. - Incolla la tua riga di installazione subito sopra
</body>e clicca su Salva:
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
Se hai installato il widget prima che la riga di installazione contenesse defer, l’editor di codice di Shopify mostra una sottolineatura rossa sotto di essa. Tale sottolineatura è un avviso del controllo del codice di Shopify relativo alle righe di script senza defer o async, non un errore: il tema viene comunque salvato e il widget continua a funzionare. Aggiungere defer come mostrato sopra fa scomparire la sottolineatura e non cambia nulla nel comportamento del widget, quindi non c’è bisogno di reinstallarlo su altri siti.
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.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></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.youraiconnector.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.
- Apri il pannello Gestisci e scorri fino a Canali e incorporamento.
- In Link demo cliente, digita l’indirizzo del sito web (ad esempio
www.theircompany.com). - Facoltativo: sotto il campo, scegli l’Agente che dovrebbe rispondere in questa demo, ad esempio un agente che hai creato dal sito web del potenziale cliente in modo che parli dei suoi servizi, prezzi e FAQ. Lascialo su Predefinito dell’account per utilizzare il normale instradamento del widget della chat.
- Fai clic su Crea link. Il link viene copiato per te e appare nell’elenco sotto il campo, con i pulsanti Copia e Apri e l’agente che utilizza.
- 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 inviati da un visitatore in una demo arrivano nella tua casella di posta e ricevono risposta dal tuo agente, utilizzando crediti come qualsiasi altra conversazione.
- La pagina non è brandizzata. Mostra il loro sito web e il tuo widget, nient’altro.
- Alcuni siti web non possono essere incorniciati. Diversi siti (banche, grandi rivenditori, qualsiasi cosa protetta da impostazioni di sicurezza rigorose) impediscono ad altre pagine di visualizzarli. Quando ciò accade, il link continua a funzionare: mostra una finestra del browser neutra invece del sito reale, con il tuo widget attivo sopra, in modo che la demo svolga comunque il suo compito.
- Non modifica il loro sito web. Non viene installato nulla e nulla viene modificato: la demo esiste solo all’interno di quel link.
- Disattiva un link quando la demo è terminata. Fai clic su Disattiva accanto al link nell’elenco e conferma. Da quel momento in poi, chiunque lo apra vedrà una pagina che indica che il link è stato disattivato. Il tuo widget e gli altri link demo continueranno a funzionare. Un link disattivato non può essere riattivato; creane uno nuovo.
- Link copiati prima del 25 settembre 2026. I link demo creati prima dell’esistenza dell’elenco non sono inclusi. Continueranno a funzionare finché non farai clic su Disattiva quelli sotto l’elenco, che li disattiverà tutti contemporaneamente (e Riattivali invertirà l’operazione).
Un link demo creato senza un agente utilizza l’instradamento predefinito del tuo account, indipendentemente da come è impostato Indirizza queste chat a. Con un agente selezionato, ogni chat proveniente da quel link viene assegnata a quell’agente e gestita da esso. Il widget mantiene il proprio aspetto, nome e messaggio di apertura. Il link lo riporta come &agent=AGENT_ID; aggiungere manualmente questo parametro a un link precedente funziona altrettanto bene (usa &, non ?, poiché il link contiene già un ?).
Se in seguito elimini l’agente utilizzato da un link demo, il link continuerà a funzionare: le sue chat verranno indirizzate all’instradamento predefinito del tuo account e l’elenco mostrerà “agente eliminato, utilizza il predefinito” accanto ad esso. L’eliminazione dell’agente che è il predefinito del tuo widget chat non influisce sui link collegati a un altro agente.
Condividi un link diretto alla chat
A volte non c’è un sito web su cui inserire il widget: potresti voler fornire a qualcuno un link per far sì che parli subito con il tuo assistente. Ogni widget della chat ne ha uno:
- Apri il pannello Gestisci e scorri fino a Canali e Incorporamento.
- Trova Link di condivisione (si trova appena sotto il Link demo cliente).
- Fai clic su Copia per prendere il link, o Apri per provarlo tu stesso.
Aprendolo non si vedrà altro che il tuo assistente, che riempie l’intero schermo: nessun sito web dietro, nessuna bolla su cui cliccare prima, nulla da installare. Inseriscilo nella tua biografia di Instagram, in un codice QR su un volantino, nella firma di un’email o in un messaggio WhatsApp a un potenziale cliente.
Il link di condivisione segue l’instradamento predefinito del tuo widget chat. Per aprire direttamente una chat con un agente specifico, aggiungi ?agent=AGENT_ID alla fine del link; ogni chat proveniente da esso verrà quindi assegnata a quell’agente e gestita da esso, mentre la pagina manterrà il nome e il messaggio di apertura del tuo widget.
Alcune cose utili da sapere:
- Le chat dal link sono reali. Arrivano nella tua casella di posta, il tuo agente risponde e utilizzano crediti come qualsiasi altra conversazione.
- La pagina non riporta alcun nostro marchio. Mostra solo il tuo assistente e nient’altro, ed è esclusa dai risultati di ricerca.
- Funziona sul tuo indirizzo. Se il tuo provider esegue l’app sul proprio dominio, il link utilizza anche quell’indirizzo, quindi non apparirà nulla di sconosciuto.
- Un visitatore per link, per browser. Chiunque lo apra mantiene la stessa identità in quel browser, quindi tornare in seguito permette di continuare la stessa conversazione invece di iniziarne una nuova come estraneo. Un browser diverso, o il link di un widget diverso, rappresentano un visitatore diverso.
Inviare pagine diverse ad agenti diversi
Per impostazione predefinita, ogni chat che arriva tramite il widget viene gestita dallo stesso agente. Puoi ignorare questa impostazione per singola pagina, in modo che i visitatori sulla tua pagina dei prezzi parlino con il tuo agente di vendita, mentre i visitatori sulla tua pagina di assistenza parlino con il tuo agente di supporto, tutto dallo stesso widget di chat.
Ci sono due modi per ottenere il codice:
-
Dall’agente. Nella pagina Agenti IA, 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 su 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.
Il pulsante </> appare solo sugli agenti attivi. Un agente in pausa riceverebbe la chat ma non risponderebbe mai, quindi l’opzione è nascosta finché non la riattivi. 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 discesa riscrive lo snippet.
Lo snippet mobile riporta la destinazione nell’indirizzo:
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?agent=AGENT_ID" defer></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-agent="AGENT_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>
Gli snippet copiati prima del ritiro delle campagne contengono invece ?campaign= o data-campaign=. Continuano a funzionare, quindi non c’è nulla da reincollare.
Alcune cose utili da sapere:
- Usa il pulsante di copia invece di digitare l’ID a mano. Se l’ID non corrisponde a un agente sul tuo account, la chat funziona comunque ma ricade sull’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à rispetto al valore predefinito dell’account e ai trigger basati su 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.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
La tua pagina dovrebbe compilare tali valori lato server, in base all’utente che ha effettuato l’accesso.
Per salvare anche un cognome, aggiungi last_name accanto a name nel blocco visitor (data-visitor-last-name su un embed in linea). È facoltativo: un nome e un’email sono comunque sufficienti per saltare il modulo, indipendentemente dal fatto che Raccogli cognome sia attivo o meno.
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
dataviene 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.youraiconnector.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
idnon 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’idcome 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, Your AI Connector 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.
- 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.
- 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()
- 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.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></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
ide 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.youraiconnector.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:
- Apri il tuo sito web in un browser.
- Fai clic sul pulsante della chat per aprire il widget.
- Invia un messaggio di prova e conferma di ricevere una risposta.
- 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:
- Assicurati di aver sostituito
CONFIG_IDcon il tuo identificativo di configurazione effettivo. - Assicurati che il tag script sia posizionato prima del tag di chiusura
</body>. - Controlla il codice per eventuali errori di digitazione.
- Su Shopify, assicurati di aver modificato il tema pubblicato e di aver cliccato su Salva. Una modifica apportata in una bozza o in un tema duplicato non raggiunge mai il tuo negozio live.
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.youraiconnector.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.