Impostazioni e installazione del Widget di chat

Widget di chat

Apri Bacheca → il tuo assistente → Canali → Widget di chat. Qui puoi installare e personalizzare il widget mobile per il sito web. Non esiste una scheda separata Integrazione o Integrazione Widget.

Installare il widget

Espandi Mostra dettagli di installazione sopra l'area di personalizzazione. Il pannello contiene:

• il codice HTML pronto all'uso con il tuo ID del chatbot già inserito;
• le azioni Copia codice e Aggiungi al sito web;
• Controlla installazione per verificare che il widget si carichi su un dominio autorizzato;
• guide di configurazione per WordPress, Shopify, Wix, Squarespace e Webflow.

Quando WebChatAgent rileva il widget, il pannello mostra il dominio in cui questo assistente viene caricato. Un controllo non riuscito indica in genere che il codice manca, che la pagina mostra ancora una vecchia versione memorizzata nella cache, oppure che il dominio non è presente in Impostazioni → Siti web autorizzati.

Consulta la Guida all'integrazione nel sito web per il posizionamento e la guida per sviluppatori sul widget per gli attributi HTML e gli eventi di runtime.

Aspetto e contenuti

Questa scheda combina il design visivo, le immagini e il contenuto visualizzato prima dell'inizio di una conversazione.

Impostazioni di base

Colori

L'editor verifica il contrasto del testo e segnala quando una coppia primo piano/sfondo è inferiore al rapporto WCAG consigliato. Risolvi queste segnalazioni prima della pubblicazione.

Pulsante chat

Scegli cosa mostra il pulsante chiuso senza scrivere CSS:

Sette icone sono animate: Digitazione, Scintille, Saluto, Campanella, Razzo, Battito e Fulmine. L'anteprima e il widget pubblicato usano la stessa icona e animazione. Se Immagine propria è selezionata senza un'immagine disponibile, viene mostrata l'icona scelta. Consulta CSS personalizzato per selettori ed esempi.

Immagini

Ogni immagine accetta un file caricato o un URL:

L'immagine del pulsante si configura in Pulsante chat → Immagine propria. I caricamenti supportano PNG, JPG, WebP e GIF. Utilizza immagini piccole e ottimizzate.

Contenuto

I testi di benvenuto e del fumetto possono essere generati come bozza con Genera con l'IA e poi modificati. Mantieni il fumetto breve, inserendo le spiegazioni più lunghe nel messaggio di benvenuto.

Comportamento

Visibilità e interazione

Nascondi su URL/percorsi

Inserisci una regola per riga. Il carattere jolly * è supportato, consentendo di nascondere il widget su pagine come:

/checkout/*
/account/*
https://example.com/en/legal/*

Utilizza questa opzione per le pagine di pagamento, account, accesso o altre pagine in cui il widget mobile distrarrebbe dall'attività o coprirebbe controlli importanti.

Posizionamento

Scegli Sinistra, Centro o Destra separatamente per desktop e dispositivi mobili. Lo scostamento orizzontale viene misurato dal bordo fisico scelto; resta salvato ma viene ignorato con Centro. Lo scostamento verticale resta la distanza dal bordo inferiore.

Su desktop la scelta posiziona l'intero widget mobile e lo fa entrare da sinistra, da destra o dal basso quando è centrato. Su mobile la chat aperta resta a schermo intero e la scelta si applica solo al pulsante chiuso.

Interazione automatica

Attiva Abilita trigger proattivi se desideri che il widget contatti i visitatori in base a tempo, profondità di scorrimento, intenzione di uscita, pagina, inattività, visite ricorrenti o altri comportamenti.

Il pannello include l'editor dei trigger, i controlli di frequenza globale, la pianificazione e il targeting facoltativi, i modelli e i dati sulle prestazioni. Spiega inoltre la connessione facoltativa per il consenso. Il comportamento proattivo di base funziona in modalità anonima; il rilevamento dei visitatori di ritorno, i limiti persistenti, le analisi e i saluti generati dall'IA richiedono un segnale di consenso accordato.

Consulta Trigger proattivi per informazioni dettagliate su ogni tipo di trigger, modalità di risposta, limite e gestione della privacy.

Pulsanti e moduli

Azioni rapide

I pulsanti di suggerimento (chiamati anche domande iniziali, domande suggerite o spunti di conversazione) sono messaggi selezionabili con un clic mostrati prima che il visitatore scriva qualsiasi testo. Si trovano in Canali → Widget di chat → Pulsanti e moduli → Azioni rapide.

Usa Aggiungi Pulsante per un nuovo elemento, trascina la maniglia a sinistra per riordinare, quindi seleziona Salva Modifiche. Genera con l'IA crea una bozza a partire dalle fonti di dati dell'assistente; l'interruttore sopra di essa mantiene l'elenco aggiornato automaticamente.

I pulsanti sono visibili finché la conversazione è ancora vuota. Una volta inviato il primo messaggio da parte del visitatore, si spostano nel menu delle azioni accanto al campo di input.

Due aspetti da tenere presenti: una Action Bar attiva sostituisce i pulsanti di suggerimento, quindi occorre usare l'una o gli altri. Inoltre, la chat integrata gestisce i propri pulsanti in Canali → Chat integrata; questa impostazione non si applica lì.

Action Bar

La Action Bar mostra azioni persistenti nella parte inferiore della chat. Quando è attiva, sostituisce i pulsanti di suggerimento. In base al tipo di elemento, può aprire un link, WhatsApp, una pagina Calendly incorporata o un modulo personalizzato.

Moduli

Crea moduli, aggiungi e riordina campi, imposta valori obbligatori e personalizza il pulsante di invio e il messaggio di successo. I dati inviati vengono memorizzati nella bacheca Lead.

Consulta Action Bar e Moduli per informazioni sui tipi di elementi, i tipi di campi, la traduzione e la mappatura dei lead.

Advanced

Fonte di rilevamento della lingua

Scegli come la Traduzione automatica rileva la lingua del visitatore:

• Lingua del browser utilizza la preferenza Accept-Language del browser.
• Attributo lang HTML utilizza il valore <html lang="…"> della pagina.

Utilizza l'opzione HTML quando ogni pagina localizzata dichiara la propria lingua in modo corretto e deve controllare la lingua del Widget. Utilizza la lingua del browser quando la pagina stessa non è localizzata in modo affidabile.

Pagine da destra a sinistra

Il widget legge e osserva <html dir="rtl">. Testo, messaggi, intestazione, input, menu, elenchi e fumetto vengono specchiati automaticamente, anche se dir cambia dopo il caricamento. Le posizioni esplicite Sinistra, Centro e Destra restano fisiche.

Branding

Nascondi Branding rimuove l'attribuzione WebChatAgent quando il Piano attuale lo consente. Il pannello mostra chiaramente se il branding è attualmente visibile o nascosto.

Test and publish

1. Utilizza Testa il tuo chatbot dopo aver modificato i contenuti o il comportamento.
2. Controlla lo stato di benvenuto, una risposta reale, le fonti, i Pulsanti suggerimento, i Moduli e il Caricamento file, in base alle esigenze.
3. Fai clic su Salva Modifiche.
4. Apri il Sito Web reale su desktop e dispositivi mobili.
5. Utilizza Check installation se il Widget risulta Non rilevato.

L'anteprima della dashboard è utile, ma il sito reale fa fede per z-index, banner dei cookie, offset responsive, font e regole di visibilità specifiche per pagina.