Personalizza l'aspetto, il comportamento e la funzionalità del tuo widget tramite il sistema di configurazione.
Tutte le impostazioni del widget sono gestite tramite la configurazione del widget nel tuo dashboard. La configurazione include impostazioni di aspetto, opzioni comportamentali e personalizzazione dei contenuti.
Pensa alla configurazione come al DNA del tuo widget—definisce tutto, dai colori e dai caratteri ai flussi di conversazione e ai messaggi iniziali. La parte migliore? Le modifiche alla tua configurazione hanno effetto immediato senza richiedere modifiche al codice sul tuo sito web.
🎨 Personalizzazione dal vivo
Usa il nostro editor di configurazione visiva nel dashboard per vedere le tue modifiche in tempo reale. Non è necessario indovinare come appariranno i colori o come si comporteranno i pulsanti—visualizza tutto prima della pubblicazione.
L'aspetto visivo è cruciale per far sentire il widget come una parte naturale del tuo sito web. Le nostre impostazioni di aspetto ti danno il controllo completo su ogni aspetto visivo.
Scegli colori che corrispondano alla tua identità di marca. Tutti i valori di colore devono essere in formato esadecimale (ad es., #FF5733).
Suggerimento professionale: Usa uno strumento di controllo del contrasto dei colori per assicurarti che il tuo testo rimanga leggibile rispetto ai tuoi sfondi scelti. Questo è particolarmente importante per la conformità all'accessibilità.
Sotto Aspetto puoi impostare una palette di colori separata per chiaro e scuro — ogni modalità ha le proprie impostazioni predefinite e colori. Quale vede un visitatore è scelto nell'incorporamento con data-theme="light|dark|system" (il sistema segue il dispositivo del visitatore), o a runtime con CompaninWidget.setTheme(). Lascia la palette scura vuota per derivarla automaticamente dai tuoi colori chiari.
Dimensiona il tuo widget in modo appropriato per il tuo caso d'uso e pubblico. Dimensioni maggiori forniscono più contesto alla conversazione, mentre dimensioni più piccole sembrano meno invasive.
Considerazione mobile: Il widget si scala automaticamente sui dispositivi mobili, ma testa la tua configurazione su varie dimensioni di schermo per garantire una buona esperienza per tutti gli utenti.
Le impostazioni comportamentali controllano come il widget interagisce con gli utenti e risponde a diversi contesti.
⚠️ Raccomandazione
La maggior parte dei siti dovrebbe iniziare con il widget collassato (<code>start_open: false</code>) per evitare di essere invasivi. Gli utenti che hanno bisogno di aiuto cliccheranno naturalmente sul pulsante. Per pagine di aiuto/supporto dedicate, iniziare aperto può essere vantaggioso.
Il messaggio di benvenuto è la prima cosa che gli utenti vedono quando aprono il widget. Rendilo accogliente, chiaro e azionabile. Puoi includere pulsanti interattivi per guidare gli utenti verso compiti comuni.
Un buon messaggio di benvenuto dovrebbe:
Esempio: "Ciao! 👋 Sono qui per aiutarti con domande sui nostri prodotti, prezzi o account. Come posso assisterti oggi?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>I flussi di conversazione sono percorsi predefiniti che guidano gli utenti attraverso scenari comuni. Sono perfetti per FAQ, risoluzione dei problemi o processi multi-step come resi o prenotazioni.
I flussi vengono attivati da parole chiave specifiche o clic su pulsanti. Quando attivati, mostrano una serie di risposte con pulsanti di azione opzionali, creando un'esperienza di conversazione guidata senza richiedere elaborazione AI.
Migliori pratiche per i flussi:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Configura il testo per più lingue:
Aggiungi CSS personalizzato per uno stile avanzato:
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Configura endpoint API esterni per funzionalità avanzate: