Configurazione Web Widget

​

🎛️ Panoramica dei tuoi Widget

• Perché averne più di uno? Potresti volere un “Bot Vendite” per la tua pagina dei prezzi e un bot “Supporto Tecnico” per il tuo centro assistenza. Qui li gestisci tutti.
• Azioni chiave per Widget:
  • 📋 Copia Script: Prendi il codice magico da incollare sul tuo sito web.
  • ⚙️ Configura: La parte divertente. Modifica colori, messaggi e comportamento (ci arriviamo tra poco).
  • 🗑️ Elimina: Cestinalo se non ti serve più.

​

🎨 Personalizzare il tuo Widget (La lezione d’arte)

​

1. Le basi

• Agente AI: Quale cervello alimenta questa chat? Seleziona uno dei tuoi agenti dalla lista.
• Lingue: Il tuo sito parla italiano, inglese e francese? Dillo al widget così non fa brutte figure.

​

2. Messaggio flottante (L’amo 🪝)

• Noioso: “Chatta qui.”
• Meglio: “Ciao! Hai bisogno di aiuto con il tuo ordine? 👋”

⚠️ Attenzione: Aggiungi le traduzioni per tutte le tue lingue. Non vuoi che i visitatori italiani vedano una bolla vuota!

​

3. Aspetto e stile (Vestiti bene)

• Header: Scegli cosa mostrare in alto. Solo un titolo? Il tuo logo? Un avatar di un robot con il monocolo? Sta a te.
• Colori: Usa lo strumento contagocce 🖊️ per abbinare il tuo brand esattamente.
  • Colore principale: Le bolle dei messaggi e il pulsante di invio.
  • Colore del testo: Assicurati che sia leggibile! Testo giallo su sfondo bianco è un crimine contro la vista.

​

4. Il guardiano: Moduli di raccolta dati 📝

• Chiedi Nome, Email o Telefono.
• Rendi i campi “Obbligatori” se sei rigoroso, o “Facoltativi” se sei rilassato.
• GDPR / Privacy: Aggiungi un link alla tua informativa per restare in regola. 👮‍♂️

​

5. Raccolta dati intelligente (Avanzata 🤓)

• Come aiuta: Se loggato, il widget può dire “Ciao, Mario!” invece di chiedere di nuovo il nome.
• Configurazione: Ci dici la “Chiave” (es. user_email) e noi prendiamo il valore automaticamente.

​

🛠️ Modifiche extra e layout

• Posizione: Sinistra o Destra? (Destra è standard, Sinistra è per i ribelli).
• Schermo intero: Vuoi che la chat occupi tutto lo schermo del cellulare? Attiva questo.
• Embed (Elemento DOM): Invece di una bolla flottante, fissa la chat permanentemente dentro un <div> sulla tua pagina. Ottimo per le pagine “Contattaci”.
• CSS personalizzato: Se conosci il codice, puoi scrivere i tuoi stili qui per sovrascrivere i nostri. Il cielo è il limite.

​

🎨 CSS personalizzato — La guida del designer

​

⚙️ Come funziona sotto il cofano

1. Il tuo CSS viene salvato insieme alla configurazione del widget.
2. Quando il widget si carica sul sito del visitatore, il tuo CSS viene iniettato come tag <style> dentro il widget stesso.
3. Si carica dopo i nostri stili predefiniti, quindi le tue regole hanno l’ultima parola (vincono in caso di parità).

🎯 Importante — Ambito: Il CSS personalizzato influisce solo sull’interno della chat del widget, non sul resto della tua pagina web. Non puoi usarlo per ridisegnare il tuo sito; solo il widget. E viceversa: gli stili del tuo sito non si infiltrano nel widget, quindi parti da una tela pulita.

💪 La mia regola non si applica? Poiché i nostri stili di base sono specifici, a volte la tua regola “pareggia” e non vince. Se una modifica non ha effetto, aggiungi !important alla fine della proprietà (es. border-radius: 0 !important;) o usa un selettore più specifico.

​

🧩 Selettori che puoi usare

​

💡 Esempi pratici

.widget_message_bot {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}

.widget_chat_window_header {
  background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
}

.widget_chat_window_footer {
  padding: 14px !important;
}

🧪 Provalo sempre nel Playground (vedi sotto) prima di pubblicare. Una } dimenticata può rompere più stili in una volta.

​

🧪 Test drive (Playground)

• I colori stonano?
• L’Agente è educato?
• Il modulo funziona?