🎨 Personalizzazione e Preview - Crafter.ai

Questa guida completa ti aiuterà a personalizzare l'aspetto del tuo chatbot e testarlo prima della pubblicazione attraverso lo step di Preview.

🎯 Panoramica dello Step Preview

Lo step Preview ti permette di:

• 🧪 Testare il chatbot in modo interattivo
• 🎨 Personalizzare l'aspetto (colori, font, layout)
• ⚙️ Configurare comportamenti della chatroom
• 📱 Vedere l'anteprima in tempo reale
• 🔍 Validare le funzionalità prima del deploy

🧪 Testing Interattivo del Chatbot

Prerequisiti per il Testing

Prima di poter testare efficacemente:

• ✅ Training completato: Il chatbot deve essere addestrato
• ✅ Knowledge Base popolata: Almeno le Q&A base configurate
• ✅ Survey completato: Tutte le domande del survey risposte

Widget di Test Integrato

Accesso al Test

1. Nel step Preview, sulla destra trovi il widget di chat
2. Se non vedi il widget: clicca su "Test Your Bot"
3. Se il bot non è addestrato: clicca prima su "Train Bot"

Stati del Chatbot

🔴 Not Trained → Devi addestrare il chatbot
🟡 Training... → Attendi completamento (2-5 minuti)  
🟢 Ready → Pronto per il test
🟠 Outdated → Serve nuovo training dopo modifiche

Strategie di Testing Efficaci

1. Test Base Functionality

Domande da testare:

✅ Saluti: "Ciao", "Buongiorno", "Hello"
✅ Domande FAQ principali
✅ Richieste di aiuto: "Aiuto", "Non capisco"
✅ Domande fuori topic
✅ Input non validi: numeri, simboli, emoji

2. Test User Journey

Simula percorsi utente reali:

Scenario E-commerce:
1. "Ciao" → Saluto
2. "Che prodotti vendete?" → Catalogo
3. "Quanto costa la spedizione?" → Info spedizione  
4. "Come posso ordinare?" → Processo ordine
5. "Voglio parlare con un operatore" → Handover

3. Test Edge Cases

Casi limite da verificare:

• Messaggi molto lunghi (500+ caratteri)
• Messaggi solo emoji 🤔😊🎉
• Input in lingue diverse
• Domande ambigue o multiple insieme
• Richieste inappropriate

4. Test Integration Points

Se hai configurato integrazioni:

• API calls funzionano?
• Handover to human attivo?
• Lead collection funziona?
• Calendar booking operativo?

Interpretazione Risultati Test

Risposte Corrette ✅

Il bot ha compreso e risposto appropriatamente. Azione: Nessuna, continua il test.

Risposte Parziali ⚠️

Il bot ha capito ma la risposta è incompleta. Azione: Migliora la Q&A o aggiungi informazioni.

Risposte Errate ❌

Il bot ha capito male la domanda. Azione: Aggiungi utterances o crea nuova Q&A.

Nessuna Risposta ❓

Il bot non sa come rispondere. Azione: Crea nuova Q&A per colmare il gap.

🎨 Personalizzazione Aspetto

Scheda Appearance

Gestione Colori

Palette Predefinite

Crafter.ai offre palette di colori armoniche:

• Corporate Blue: Blu professionale e affidabile
• Warm Orange: Arancione energico e friendly
• Natural Green: Verde rilassante e naturale
• Elegant Purple: Viola sofisticato e creativo
• Classic Gray: Grigio elegante e neutrale

Personalizzazione Colori Custom

Elementi personalizzabili:

🎨 Background Chatroom: Sfondo principale
🎨 Primary Color: Colore brand principale
🎨 Secondary Color: Colore di supporto
🎨 Text Color: Colore testo principale
🎨 User Message: Colore messaggi utente
🎨 Bot Message: Colore messaggi bot
🎨 Accent Color: Colore pulsanti e link

Best Practice Colori:

• Contrasto: Assicura leggibilità (minimo 4.5:1)
• Brand Consistency: Usa i colori del tuo brand
• Accessibilità: Considera daltonismo e ipovisione
• Psychology: Considera l'impatto psicologico dei colori

Tool per Colori

Generatori di palette:

• Adobe Color
• Coolors.co
• Material Design Color Tool

Verificatori contrasto:

• WebAIM Contrast Checker
• Stark (plugin Figma)

Tipografia e Font

Font Disponibili

Categorie principali:

📝 Sans-Serif (moderni, puliti):
   • Roboto, Open Sans, Lato, Montserrat
   
📖 Serif (eleganti, tradizionali):
   • Playfair Display, Merriweather, Lora
   
⚡ Display (impatto, titoli):
   • Oswald, Bebas Neue, Righteous

Configurazione Tipografica

Elementi personalizzabili:

• Title Font: Font del titolo chatroom
• Message Font: Font dei messaggi
• UI Font: Font interfaccia (pulsanti, labels)
• Font Size: Dimensioni testo (small, medium, large)
• Font Weight: Spessore carattere (light, normal, bold)

Best Practice Typography:

• Leggibilità: Priority numero 1
• Gerarchia: Usa dimensioni diverse per importanza
• Consistency: Max 2-3 font diversi
• Mobile-First: Testa su dispositivi piccoli

Layout e Struttura

Dimensioni Chatroom

Opzioni disponibili:

📱 Compact: 350x500px (mobile-optimized)
📋 Standard: 400x600px (balanced)
📺 Extended: 500x700px (desktop-focused)
🎯 Custom: Dimensioni personalizzate

Posizionamento Widget

Opzioni di posizionamento:

📍 Bottom Right: Classico (consigliato)
📍 Bottom Left: Alternativo
📍 Top Right: Per siti particolari
📍 Custom Position: Controllo completo
📍 Fullscreen: Esperienza immersiva

Margin e Spacing

Personalizzazione distanze:

• Margin from edges: 20px, 30px, 50px
• Internal padding: tight, normal, spacious
• Message spacing: compact, normal, airy

Icone e Avatar

Avatar del Bot

Opzioni disponibili:

• Default Icons: Set di icone predefinite
• Custom Upload: Carica il tuo logo/avatar (PNG, JPG, SVG)
• Initials: Usa iniziali nome bot
• Brand Icon: Usa icona del brand

Specifiche tecniche avatar:

• Formato: PNG, JPG, SVG
• Dimensioni: 64x64px minimo, 256x256px consigliato
• Peso: Max 500KB
• Stile: Circolare automatico

Icon Set

Elementi con icone personalizzabili:

💬 Chat Launcher: Icona apertura chat
📎 Attachment: Icona allegati
🔄 Restart: Icona restart conversazione
❓ Help: Icona aiuto
📞 Human Handover: Icona trasferimento operatore

Anteprima in Tempo Reale

Live Preview

Ogni modifica viene immediatamente riflessa nel widget di anteprima:

• Cambi colore → Update istantaneo
• Modifica font → Rendering immediato
• Nuova icona → Visualizzazione diretta

Multi-Device Preview

Simulazione dispositivi:

💻 Desktop: View standard 1920x1080
📱 Mobile: iPhone/Android simulation
📱 Tablet: iPad simulation
🖥️ Large Screen: 4K+ simulation

Responsive Testing

Breakpoint automatici:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

⚙️ Configurazione Comportamenti (Settings)

Scheda Settings

Configurazione Titoli e Messaggi

Titolo Chatroom

Best Practice:

✅ Buoni esempi:
• "Assistente Clienti" 
• "Ciao! Come posso aiutarti?"
• "Supporto TechnoShop"

❌ Esempi da evitare:
• "Bot" (troppo generico)
• "Chatbot AI Assistant Bot" (ridondante)
• Titoli troppo lunghi (>30 caratteri)

Messaggio di Errore Personalizzato

Quando viene mostrato:

• Durante aggiornamenti del chatbot
• Problemi di connessione
• Manutenzione server

Esempio messaggio:

"Il nostro assistente è temporaneamente non disponibile. 
Per assistenza immediata, scrivici a support@tuodominio.com 
o chiama il numero verde 800-123-456."

Configurazione Pulsanti

Pulsante Restart

Funzionalità: Permette all'utente di ricominciare la conversazione Quando mostrarlo:

• ✅ Chatbot complessi con molti workflow
• ✅ E-commerce con percorsi di acquisto
• ❌ FAQ semplici dove non serve

Pulsante Help

Funzionalità: Mostra informazioni di aiuto o guida Contenuto help personalizzabile:

"Puoi chiedermi:
• Informazioni sui prodotti
• Stato degli ordini  
• Assistenza tecnica
• Contatti e orari

Scrivi 'operatore' per parlare con una persona."

Gestione Timing e Delay

Delay Messaggi Bot

Simulazione digitazione umana:

⚡ Veloce: 10ms per carattere
⚖️ Normale: 20ms per carattere (consigliato)
🐌 Lento: 40ms per carattere

Calcolo automatico:

• Messaggio 50 caratteri + 20ms = 1 secondo delay
• Messaggio 100 caratteri + 20ms = 2 secondi delay

Delay Primo Messaggio

Tempo prima del saluto iniziale:

• Immediato: 0ms
• Rapido: 500ms
• Normale: 1000ms (consigliato)
• Lento: 2000ms

Best Practice Timing:

• Non troppo veloce: Sembra robotico
• Non troppo lento: Utente perde interesse
• Consistente: Stesso delay per messaggi simili

Privacy e Compliance

Link Privacy Policy

Configurazione:

• URL privacy policy completo
• Validazione automatica formato URL
• Link aperto in nuova finestra

Posizionamento:

• Footer chatroom
• Prima della raccolta dati
• Nel messaggio di benvenuto

Consenso Cookie e GDPR

Opzioni disponibili:

🍪 Cookie Consent: Banner automatico
📋 Data Collection Notice: Avviso raccolta dati
🔒 Privacy Badge: Badge privacy visibile
✅ Explicit Consent: Consenso esplicito prima chat

Configurazioni Avanzate

Fullscreen Mode

Quando utilizzarlo:

• Chatbot complessi con molto contenuto
• Applicazioni dedicate al supporto
• Esperienze immersive

Configurazione:

• Trigger automatico dopo N messaggi
• Pulsante dedicato
• Responsive breakpoint

Auto-Minimizzazione

Comportamento automatico:

⏱️ Timeout Inattività: 
• 1 minuto → Minimize alert
• 5 minuti → Auto-minimize
• 15 minuti → Reset conversazione

📱 Mobile Behavior:
• Auto-minimize su scroll
• Riapri su tap area
• Preserve conversation state

📱 Responsive Design e Mobile

Ottimizzazione Mobile

Design Mobile-First

Principi chiave:

• Touch-friendly buttons (min 44x44px)
• Leggibilità senza zoom
• Facile scrolling conversazione
• Input keyboard ottimizzato

Breakpoint Automatici

/* Mobile Small */
@media (max-width: 480px) {
  chatroom-width: 95vw;
  font-size: 14px;
}

/* Mobile Standard */  
@media (max-width: 768px) {
  chatroom-width: 90vw;
  font-size: 16px;
}

/* Tablet */
@media (max-width: 1024px) {
  chatroom-width: 400px;
  font-size: 16px;
}

Performance Mobile

Ottimizzazioni automatiche:

• Lazy loading immagini
• Compressione automatica avatar
• Cache conversation locale
• Minimal data usage

🔍 Validazione Pre-Deploy

Checklist Testing Completo

Functionality Testing

• Tutti i saluti funzionano
• Q&A principali rispondono correttamente
• Flow complessi completano senza errori
• Handover to human funziona
• Lead collection raccoglie dati correttamente
• API integrations attive

Design Testing

• Colori brand applicati correttamente
• Font leggibili su tutti i dispositivi
• Avatar/icone caricati e visibili
• Layout responsive su mobile/tablet/desktop
• Contrasto accessibilità verificato

Behavior Testing

• Timing messaggi naturale
• Pulsanti help/restart funzionano
• Privacy policy link corretto
• Auto-minimize comportamento appropriato
• Fullscreen mode (se attivo) funzionale

Cross-Browser Testing

• Chrome (ultimo)
• Firefox (ultimo)
• Safari (ultimo)
• Edge (ultimo)
• Mobile browsers principali

Tools di Validazione

Accessibility Testing

Strumenti consigliati:

• WAVE Web Accessibility Evaluator
• axe DevTools
• Lighthouse Accessibility Audit

Performance Testing

Metriche da monitorare:

⚡ Load Time: < 3 secondi
📊 First Contentful Paint: < 1.5 secondi
🎯 Cumulative Layout Shift: < 0.1
📱 Mobile PageSpeed: > 90

Device Testing

Dispositivi minimi da testare:

• iPhone (ultimo + 2 versioni precedenti)
• Android Samsung/Google (flagship)
• iPad (standard + mini)
• Desktop Chrome/Firefox/Safari

🎯 Best Practice Personalizzazione

Design Guidelines

Brand Consistency

1. Usa colori brand: Mantieni coerenza visuale
2. Typography allineata: Font coerenti con sito web
3. Tone of voice: Linguaggio coerente con brand
4. Visual elements: Icone e stile allineati

User Experience

1. Clarity over Creativity: Funzionalità prima dell'estetica
2. Accessibility First: Design inclusivo
3. Mobile Optimization: La maggior parte degli utenti è mobile
4. Performance: Velocità cruciale per engagement

Content Strategy

1. Microcopy: Ogni testo ha importanza
2. Error Messages: Messaggi di errore utili e friendly
3. Help Content: Guida chiara per gli utenti
4. Call-to-Actions: CTA chiari e actionable

Testing Strategy

Iterative Testing

1. Basic Functionality → 2. Design Validation → 3. User Testing → 4. Performance → 5. Deploy
                                    ↓
                              Continuous Optimization

User Feedback Integration

Metodi di raccolta feedback:

• Post-chat satisfaction survey
• A/B testing diverse versioni
• Analytics comportamento utenti
• Feedback diretto team interno

✅ Checklist Pre-Deploy Completa

Technical Validation

• Chatbot training completato e aggiornato
• Tutti i test funzionali passati
• Performance sotto i threshold richiesti
• Cross-browser compatibility verificata
• Mobile responsiveness validata

Design Validation

• Brand colors applicati e verificati
• Typography ottimizzata per leggibilità
• Icons/avatar caricati correttamente
• Layout professionale e user-friendly
• Accessibility standards rispettati

Content Validation

• Tutti i messaggi revisionati per tone of voice
• Error messages configurati e testati
• Help content completo e chiaro
• Privacy policy link funzionante
• Legal compliance verificata

Business Validation

• Stakeholder approval ottenuta
• Team training completato
• Support team informato su nuove funzionalità
• Monitoring e analytics configurati
• Rollback plan predisposto

🔗 Prossimi Passi

Dopo aver completato Preview e Testing:

1. Pubblicazione live
2. Configurare analytics
3. Formare il team supporto

---

⏱️ Tempo stimato per personalizzazione completa: 2-4 ore
🎯 Obiettivo: Chatbot perfettamente integrato nel brand e ottimizzato per user experience