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.

Immagini

Ogni immagine accetta un file caricato o un URL:

I caricamenti supportano PNG, JPG, WebP e GIF. Utilizza immagini piccole e ottimizzate; l'editor mostra i limiti di dimensione attuali accanto a ogni caricamento.

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

Imposta scostamenti orizzontali e verticali indipendenti per desktop e dispositivi mobili. I valori definiscono la distanza dai bordi destro e inferiore. Verificali tenendo visibili banner dei cookie, barre di navigazione fisse e aree di sicurezza per dispositivi mobili.

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.

Branding

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

CSS personalizzato

Il CSS personalizzato viene iniettato nel Widget e ha la precedenza sugli stili integrati senza !important. L'editor fornisce preset iniziali e un elenco di selettori .wca-* stabili. Mostra inoltre il limite di caratteri e applica le modifiche all'anteprima in tempo reale.

Solo i selettori documentati costituiscono un contratto stabile. Consulta CSS personalizzato per la tabella dei selettori e gli esempi.

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.