E possibile personalizzare il widget nel piano gratuito?

No. Nel piano Free il widget viene visualizzato nello stile standard tikento con watermark. La personalizzazione delle variabili CSS e disponibile a partire dal piano Pro.

Perche i miei stili CSS del sito non influenzano il widget?

Il widget viene renderizzato all'interno del Shadow DOM -- un ambiente isolato che non eredita gli stili della pagina ospitante. Per la stilizzazione utilizza le variabili CSS di tikento.

Dove posso vedere il risultato della personalizzazione prima della pubblicazione?

Nel pannello dell'evento apri Registrazione -> Widget -> Personalizzazione. A destra viene visualizzata l'anteprima del modulo con le tue impostazioni in tempo reale.

Personalizzazione del widget

Principio di funzionamento

Il widget tikento viene renderizzato nel Shadow DOM -- un'area isolata in cui non penetrano gli stili del tuo sito. Questo garantisce che il modulo abbia sempre un aspetto corretto. Il rovescio della medaglia: le regole CSS normali del tuo sito non possono influenzare direttamente il widget.

Per il branding si utilizzano le CSS custom properties (variabili CSS). Vengono passate attraverso il confine del Shadow DOM e permettono di gestire colori, font e arrotondamenti.

Variabili CSS disponibili

Definisci le variabili nel CSS del tuo sito o direttamente nell'attributo style del contenitore:

:root {
  /* Colore principale (pulsanti, link, accenti) */
  --tikento-primary: #4F46E5;

  /* Colore del testo sui pulsanti */
  --tikento-primary-foreground: #FFFFFF;

  /* Sfondo del modulo */
  --tikento-bg: #FFFFFF;

  /* Colore del testo principale */
  --tikento-text: #18181B;

  /* Colore del testo secondario */
  --tikento-text-muted: #71717A;

  /* Colore dei bordi dei campi di input */
  --tikento-border: #E4E4E7;

  /* Raggio di arrotondamento (pulsanti, campi, schede) */
  --tikento-radius: 8px;

  /* Font */
  --tikento-font: 'Inter', sans-serif;

  /* Colore degli errori di validazione */
  --tikento-error: #EF4444;

  /* Colore degli stati di successo */
  --tikento-success: #22C55E;
}

Tutte le variabili sono opzionali. Se non definisci una di esse, il widget utilizza il valore predefinito.

Configurazione tramite pannello di controllo

Metodo senza codice -- configura tutto nell'interfaccia di tikento:

Apri l'evento nel pannello di controllo.
Vai alla scheda Registrazione -> sezione Widget per il sito.
Clicca Personalizzazione.
Scegli colori, font e arrotondamenti tramite i controlli visivi.
A destra viene visualizzata l'anteprima -- il modulo si aggiorna in tempo reale.
Clicca Salva -- le modifiche si applicheranno a tutti i widget integrati di questo evento.

Il pannello genera il codice CSS pronto, che puoi anche copiare e incollare manualmente nel sito.

Configurazione tramite codice

Se hai bisogno di un controllo piu preciso, definisci le variabili CSS direttamente nella pagina:

Opzione 1: Globalmente tramite :root

:root {
  --tikento-primary: #0D9488;
  --tikento-radius: 12px;
  --tikento-font: 'Montserrat', sans-serif;
}

<div
  data-tikento-widget="IL_TUO_EVENT_ID"
  style="--tikento-primary: #0D9488; --tikento-radius: 12px;"
></div>

La seconda opzione e comoda se nella pagina ci sono piu widget o se non vuoi modificare gli stili globali.

Opzione 3: Collegamento del font

Se utilizzi un font non standard, collegalo nella pagina ospitante tramite <link> o @font-face, poi specificalo nella variabile:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">

:root {
  --tikento-font: 'Montserrat', sans-serif;
}

Il Shadow DOM eredita le variabili CSS dalla pagina ospitante, ma il font deve essere caricato a livello di documento.

Shadow DOM: cosa e isolato e cosa no

Passa attraverso il Shadow DOM	Non passa
CSS custom properties (`--tikento-*`)	Regole CSS normali (`.class`, `#id`)
Font caricati (`@font-face`)	Selettori per tag (`input`, `button`)
`color-scheme`, `direction`	Classi Tailwind, stili Bootstrap

Questo significa che gli stili del tuo sito non romperanno mai il widget e il widget non influenzera gli stili del tuo sito.

Restrizioni per piano

Piano	Personalizzazione	Watermark
Free	Non disponibile. Stile standard tikento	Sempre visualizzato
Pro	Personalizzazione completa delle variabili CSS	Rimosso
Business	Personalizzazione completa + supporto prioritario	Rimosso
Enterprise	Personalizzazione completa + white-label	Rimosso

Maggiori dettagli sul watermark -- Watermark "Powered by tikento".

Consigli

Verifica il contrasto: il colore del pulsante (--tikento-primary) deve garantire un contrasto di almeno 4.5:1 con il colore del testo su di esso (--tikento-primary-foreground).
Testa il modulo nella modalita scura del browser, se il tuo sito supporta il tema scuro.
Specifica un font di fallback in --tikento-font nel caso in cui il web font non venga caricato.
Dopo aver salvato la personalizzazione nel pannello, la cache Redis del widget (widget:config:{eventId}) viene invalidata automaticamente -- le modifiche entrano in vigore entro pochi secondi.