Personalizzare l’interfaccia della chat
L’interfaccia della chat controlla la presentazione visiva e testuale all’interno dell’esperienza cliente, mentre il punto di ingresso controlla come gli acquirenti la scoprono su pagine e dispositivi diversi. Entramb...
L’interfaccia della chat controlla la presentazione visiva e testuale all’interno dell’esperienza cliente, mentre il punto di ingresso controlla come gli acquirenti la scoprono su pagine e dispositivi diversi. Entrambe le aree forniscono anteprime, ma la convalida finale deve avvenire sulla vetrina reale.
Questa guida copre i controlli attuali di avatar, colore, forma, testo facoltativo, carrello, icona, punto di ingresso e regole di pagina, senza presumere che ogni azienda o integrazione esponga opzioni identiche.
Come si inserisce in Humind
AI Agent è lo spazio di configurazione per l’assistente rivolto ai clienti. Knowledge e Catalog forniscono i fatti, Guidance modella il comportamento delle risposte, Tools aggiunge azioni, Escalation definisce il supporto umano e le superfici di test consentono di rivedere il risultato prima della distribuzione.
Le modifiche possono influire su molte conversazioni, quindi testa scenari rappresentativi di acquisto e supporto dopo ogni aggiornamento significativo. Una chat visivamente corretta non è sufficiente: verifica insieme la risposta, il contesto del prodotto, l’azione disponibile e il comportamento di passaggio.
Prima di iniziare
Accesso: è richiesto l’accesso in scrittura alla configurazione di Agent. Alcune impostazioni avanzate sono riservate agli amministratori Humind e i controlli specifici di Shopify compaiono solo per le aziende Shopify collegate.
- Prepara risorse approvate per logo o avatar e i colori del brand.
- Controlla il contrasto dei colori e i vincoli della vetrina mobile prima di scegliere i valori.
- Elenca i tipi di pagina in cui il launcher deve essere visibile, nascosto o personalizzato.
Procedura passo dopo passo
Impostare la base visiva
Apri AI Agent, poi Interfaccia della chat. Scegli un avatar dalla galleria o carica la risorsa prevista. Imposta i colori dell’interfaccia e del testo, l’arrotondamento della bolla, i colori di sfondo e del testo per aggiungi al carrello e l’arrotondamento dei pulsanti.
Usa l’anteprima durante la modifica e verifica un contrasto leggibile in ogni componente colorato. Le impostazioni in questa pagina vengono salvate in tempo reale, quindi attendi il riscontro di salvataggio ed evita modifiche rapide e contraddittorie.
Rivedere le opzioni avanzate di presentazione
L’interfaccia attuale può usare facoltativamente un nome Agent personalizzato, un titolo iniziale e un messaggio di benvenuto iniziale. Può mostrare o nascondere l’icona scintilla, l’immagine del cercaregali, le domande preimpostate e il pulsante aggiungi al carrello. Le aziende Shopify possono scegliere se l’azione del carrello porta al carrello o al checkout tramite il controllo di destinazione disponibile.
Un valore iniziale personalizzato vuoto può nascondere intenzionalmente quella riga. Registra questa decisione in modo che un risultato vuoto non venga poi scambiato per contenuto perso.
Configurare il punto di ingresso predefinito
Apri widget IA, poi Punto di ingresso. Abilita il launcher predefinito e scegli il suo tipo, la sua posizione, etichetta, visibilità dell’avatar, dimensione della bolla, trattamento del logo e offset orizzontali o verticali dove disponibili. Passa da desktop a mobile per rivedere entrambe le configurazioni.
Mantieni il launcher individuabile senza coprire la navigazione del negozio, i controlli del consenso, le azioni di acquisto del prodotto o i widget di accessibilità.
Aggiungere regole specifiche per pagina solo quando necessario
Le regole di pagina possono indirizzare tipi di pagina supportati e impostare la visibilità su mobile o desktop su nascosto, ereditato o personalizzato. Le regole personalizzate possono cambiare la presentazione del launcher per il contesto di pagina selezionato. Le regole della pagina prodotto possono anche esporre l’attuale opzione automatica di domanda sul prodotto.
Evita regole sovrapposte. Usa le schede del contesto di anteprima per confrontare i risultati predefiniti e quelli specifici della pagina, ed elimina le regole obsolete invece di stratificare eccezioni all’infinito.
Convalidare accessibilità e layout dal vivo
Testa l’accesso da tastiera, il contrasto del testo, l’apertura e la chiusura, il testo tradotto lungo, gli schermi stretti, le pagine prodotto e il comportamento del carrello nell’anteprima. Poi distribuisci e ripeti i controlli sulla vetrina reale in un browser privato.
Se il risultato dal vivo è diverso, verifica installazione, risorse obsolete della vetrina, contesto aziendale e corrispondenza delle regole di pagina prima di modificare di nuovo il design.
Autorizzazioni e avvertenze importanti
- L’anteprima non include ogni tema della vetrina, overlay o interazione responsive.
- Le opzioni avanzate e specifiche di Shopify sono condizionali, documenta solo i controlli visibili per l’azienda attiva.
- Le impostazioni salvate in tempo reale possono influire sui test subito dopo la persistenza.
- Le regole di pagina devono restare reciprocamente comprensibili tra desktop e mobile.
Verificare il risultato
Usa questa checklist prima di considerare il lavoro completato:
- Avatar, testo, interfaccia e colori del carrello soddisfano lo standard di contrasto del team.
- Le anteprime del punto di ingresso predefinito e specifico della pagina corrispondono al set di regole documentato.
- Etichette lunghe, traduzioni, focus da tastiera e layout mobile restano utilizzabili.
- La vetrina live mostra un solo launcher corretto senza coprire controlli critici.
Risoluzione dei problemi
Una modifica visiva non appare
Attendi il riscontro di salvataggio della pagina, conferma l’azienda attiva, aggiorna l’anteprima e testa una nuova sessione della vetrina. Controlla se una regola specifica della pagina sostituisce quella predefinita.
Il launcher appare nel posto sbagliato
Rivedi selezione del dispositivo, posizione, offset e regola di pagina corrispondente. Conferma che un’altra installazione duplicata del widget non stia creando l’istanza inattesa.
Testo o pulsanti sono difficili da leggere
Rivedi sia i colori di sfondo sia quelli del testo per i controlli dell’interfaccia e del carrello. Testa etichette reali e testo tradotto nelle dimensioni desktop e mobile prima di pubblicare il design corretto.