Aspetto e Posizione

La pagina Aspetto e Posizione ti permette di personalizzare l’aspetto visivo e la posizione del chatbot AAIA sul tuo sito WordPress.

🎨 Aspetto Visivo

Colore Primario

Il colore primario definisce la palette cromatica del tuo chatbot e dei suoi elementi di interfaccia.

Configurazione

1. Campo Colore: Clicca sul campo colore per aprire il selettore colori di WordPress
2. Codice Esadecimale: Puoi anche inserire direttamente un codice colore esadecimale (es., #f40bc9)
3. Anteprima in Tempo Reale: Il colore viene applicato istantaneamente nell’anteprima

Impatto del Colore

Questo colore primario influenza:

• ✨ L’icona del chatbot fluttuante
• 💬 Le bolle di chat dell’assistente
• 🔘 I pulsanti dell’interfaccia
• 🎯 Gli elementi interattivi (link, azioni)
• 📱 L’intestazione della finestra di chat

Migliori Pratiche

• Contrasto: Assicurati che il colore fornisca un buon contrasto con lo sfondo del tuo sito
• Coerenza: Scegli un colore che si armonizzi con le tue linee guida del brand
• Accessibilità: Evita colori troppo chiari che potrebbero compromettere la leggibilità

📍 Posizione del Chatbot

Questa sezione ti permette di controllare precisamente dove il chatbot appare sul tuo sito.

Opzioni di Posizione

Selezione Posizione

Il menu a discesa offre due opzioni:

• In Basso a Destra (predefinito): Posizione classica, non intrusiva, raccomandata per la maggior parte dei siti
• In Basso a Sinistra: Alternativa per siti con elementi fissi a destra (chat clienti, pulsanti social, ecc.)

Distanza dal Basso (in pixel)

• Valore predefinito: 20 pixel
• Utilizzo: Distanza tra il chatbot e il bordo inferiore dello schermo
• Suggerimento: Aumenta questo valore (es., a 80px) se hai un banner cookie o altri elementi fissi in basso

Distanza Laterale (in pixel)

• Valore predefinito: 20 pixel
• Utilizzo: Distanza tra il chatbot e il bordo sinistro o destro a seconda della posizione scelta
• Suggerimento: Regola in base alla larghezza del tuo contenuto e alla presenza di altri elementi fluttuanti

🖼️ Anteprima Posizione

L’anteprima visiva ti mostra:

• 📱 La posizione relativa del chatbot sullo schermo (area turchese)
• 🎯 La posizione esatta del pulsante chat (icona rosa)
• 📐 Una rappresentazione semplificata (non in scala)

Nota Importante: L’anteprima è informativa e semplificata. Per vedere il risultato finale, controlla sempre il tuo sito sul frontend, specialmente su mobile.

⚙️ Configurazioni Raccomandate

Per la maggior parte dei siti web

Posizione: In Basso a Destra
Distanza dal basso: 20px
Distanza laterale: 20px

Questa configurazione standard evita conflitti con elementi di interfaccia comuni.

Se hai un banner cookie

Posizione: In Basso a Destra
Distanza dal basso: 80px
Distanza laterale: 20px

Aumentare la distanza dal basso previene che il chatbot venga nascosto dal banner cookie.

Per siti con sidebar destra fissa

Posizione: In Basso a Sinistra
Distanza dal basso: 20px
Distanza laterale: 20px

Il posizionamento a sinistra evita conflitti con sidebar fisse o widget.

Per siti e-commerce con carrello fluttuante

Posizione: In Basso a Sinistra
Distanza dal basso: 20px
Distanza laterale: 80px

Questa configurazione evita conflitti con icone del carrello tipicamente posizionate in basso a destra.

🔧 Problemi Comuni e Soluzioni

Il chatbot si sovrappone ad altri elementi

Diagnosi: Altri elementi fluttuanti (live chat, pulsanti social, carrello) occupano la stessa area.

Soluzioni:

1. Cambia posizione (destra → sinistra o viceversa)
2. Aumenta le distanze per creare più spazio
3. Modifica l’ordine di visualizzazione degli altri elementi nel tuo tema

Il chatbot non è visibile su mobile

Diagnosi: Le distanze configurate superano le dimensioni dello schermo mobile.

Soluzioni:

1. Riduci le distanze (specialmente la distanza laterale)
2. Testa su multiple dimensioni dello schermo
3. Controlla che nessun elemento CSS stia nascondendo il chatbot

Il colore non si abbina al mio tema

Soluzioni:

1. Ispeziona il tuo tema: Usa gli strumenti sviluppatore del browser (F12) per identificare i colori primari del tuo sito
2. Strumenti colore: Usa servizi come Coolors.co o Adobe Color per trovare colori armoniosi
3. Test contrasto: Controlla l’accessibilità con strumenti come WebAIM Contrast Checker

L’anteprima non corrisponde al risultato finale

Spiegazione: L’anteprima è una rappresentazione semplificata che non tiene conto di:

• Le dimensioni effettive del tuo schermo
• Gli elementi CSS specifici del tuo tema
• Le modifiche responsive

Soluzione: Usa l’anteprima come guida generale, ma testa sempre il risultato sul tuo sito reale.

💡 Suggerimenti di Ottimizzazione

Selezione del Colore

Psicologia del Colore

• Blu: Fiducia, professionalità (ideale per B2B)
• Verde: Natura, salute, crescita (perfetto per ecologia, wellness)
• Arancione: Energia, creatività (eccellente per conversioni)
• Viola: Lusso, innovazione (adatto per prodotti premium)

Test Tecnici

• Usa un verificatore di contrasto per la conformità di accessibilità WCAG
• Testa il colore sia su sfondi chiari CHE scuri
• Controlla la visualizzazione su schermi diversi (diverse calibrazioni)

Ottimizzazione della Posizione

Analisi Comportamentale

• Osserva le heatmap del tuo sito per identificare zone di attenzione
• Evita di posizionare il chatbot in aree ad alta interazione
• Considera i percorsi utente tipici del tuo sito

Test A/B

• Testa diverse posizioni per diverse settimane
• Misura l’engagement (aperture chat, messaggi inviati)
• Analizza il feedback degli utenti sull’accessibilità

Design Responsive

Adattamento Automatico

Il chatbot AAIA si adatta automaticamente:

• Desktop: Posizione fissa secondo le tue impostazioni
• Tablet: Regolazione automatica di margini e dimensioni
• Mobile: Ottimizzazione touch e riposizionamento se necessario

Test Multi-dispositivo

• Controlla su iPhone e Android
• Testa in modalità verticale e orizzontale
• Assicurati che il chatbot rimanga accessibile con tastiere virtuali

🎯 Configurazione e Test

Passaggi di Configurazione

1. Definisci il tuo colore primario

   • Ottieni il codice colore dal tuo tema
   • Testa il contrasto con lo sfondo del tuo sito

2. Scegli la posizione ottimale

   • Analizza gli elementi esistenti sul tuo sito
   • Seleziona la posizione meno intrusiva

3. Regola le distanze

   • Inizia con valori predefiniti (20px)
   • Adatta secondo i tuoi elementi fissi

4. Testa sul tuo sito

   • Controlla la visualizzazione desktop e mobile
   • Testa l’interazione (click, apertura)

5. Ottimizza in base al feedback

   • Raccogli opinioni dei visitatori
   • Regola se necessario

Checklist di Validazione

• Il colore si armonizza con le linee guida del tuo brand
• Il chatbot è visibile su tutte le pagine
• Nessun conflitto con altri elementi fluttuanti
• Buona visualizzazione su mobile e tablet
• Accessibilità rispettata (contrasto sufficiente)
• Posizione non intrusiva per l’esperienza utente

🔗 Prossimi Passi

Una volta configurati aspetto e posizione:

1. Configura il tuo assistente: Personalizza comportamento e risposte
2. Configura la tua chiave API: Connetti il chatbot ai servizi AI
3. Esplora funzionalità avanzate: Domande personalizzate, integrazioni, ecc.