Il widget non si carica o gli stili sono corrotti

Diagnosi rapida

Prima di analizzare problemi specifici, esegui un controllo di base:

1. Apri la pagina con il widget.
2. Premi F12 (o Cmd+Option+I su Mac) -> scheda Console.
3. Cerca errori relativi a tikento, widget.js, CSP o CORS.
4. Controlla la scheda Network -- trova la richiesta a tikento.com/widget.js e assicurati che lo stato sia 200.

Problema: il widget non si carica affatto

Causa 1: Content Security Policy (CSP) blocca lo script

Sintomi:

• Il modulo non appare.
• Nella console: Refused to load the script 'https://tikento.com/widget.js' because it violates the following Content Security Policy directive: "script-src ...".

Soluzione:

Aggiungi tikento.com alla direttiva script-src della tua policy CSP:

script-src 'self' https://tikento.com;

Se utilizzi il meta tag:

<meta http-equiv="Content-Security-Policy"
  content="script-src 'self' https://tikento.com;">

Potrebbe essere necessario aggiungere anche connect-src https://tikento.com per le richieste API del widget e style-src 'unsafe-inline' https://tikento.com per gli stili.

Causa 2: eventId errato

Sintomi:

• Lo script si carica (200 nel Network), ma il modulo non viene renderizzato.
• Nella console: [tikento] Event not found o [tikento] Invalid eventId format.

Soluzione:

1. Apri l'evento nel pannello di tikento.
2. Vai alla scheda Registrazione -> Widget per il sito.
3. Copia l'UUID corretto dal campo o dal codice widget pronto.
4. Assicurati che l'attributo data-tikento-widget contenga esattamente l'UUID senza spazi e caratteri extra.

<!-- Corretto -->
<div data-tikento-widget="550e8400-e29b-41d4-a716-446655440000"></div>

<!-- Errato -->
<div data-tikento-widget="IL_TUO_EVENT_ID"></div>

Causa 3: script non collegato o collegato due volte

Sintomi:

• Il contenitore div e presente nella pagina, ma il modulo non appare.
• Nessun errore nella console, nessuna richiesta a widget.js nel Network.

Soluzione:

Assicurati che il tag <script> sia presente nella pagina e venga caricato una sola volta:

<script src="https://tikento.com/widget.js" async defer></script>

Alcuni costruttori di siti (Tilda, Wix) richiedono di aggiungere gli script in blocchi speciali. Vedi Installazione su Tilda, Webflow, Wix.

Problema: errori CORS

Sintomi:

• Il modulo inizia a caricarsi, ma i dati (campi, biglietti) non vengono recuperati.
• Nella console: Access to fetch at 'https://tikento.com/api/...' from origin 'https://your-site.com' has been blocked by CORS policy.

Soluzione:

Nei piani Pro e superiori e necessario aggiungere il dominio del tuo sito alla lista delle origini consentite:

1. Nel pannello: evento -> Registrazione -> Widget -> Domini consentiti.
2. Aggiungi il dominio del tuo sito (ad esempio example.com o *.example.com).
3. Clicca Salva.

Le modifiche entrano in vigore entro un minuto (dopo l'invalidazione della cache widget:origins:{eventId}).

Nel piano Free le restrizioni CORS non vengono applicate -- il widget funziona su qualsiasi dominio.

Maggiori dettagli -- Configurazione CORS.

Problema: gli stili del widget sono corrotti

Proprieta CSS ereditabili

Il Shadow DOM isola la maggior parte degli stili, ma alcune proprieta CSS vengono ereditate attraverso il confine del Shadow DOM:

• font-family, font-size, line-height
• color
• direction, text-align
• visibility

Se il tuo CSS reset imposta valori aggressivi su body o *, questo puo influenzare il widget.

Soluzione:

Definisci esplicitamente le variabili CSS del widget per sovrascrivere i valori ereditati:

:root {
  --tikento-font: 'Inter', sans-serif;
  --tikento-text: #18181B;
}

Il contenitore del widget e compresso o invisibile

Sintomi:

• Il widget viene visualizzato con altezza 0 o larghezza 0.
• Il modulo e tagliato.

Soluzione:

Verifica che l'elemento padre del contenitore data-tikento-widget non abbia:

• overflow: hidden con altezza fissa
• display: none o visibility: hidden
• max-height: 0 o height: 0
• position: fixed / absolute senza dimensioni definite

Il contenitore del widget necessita di una larghezza libera di almeno 320px.

Problema: viene visualizzata una versione vecchia del modulo

Sintomi:

• Hai aggiornato i campi o i biglietti nel costruttore, ma nel widget sul sito appare ancora la versione precedente.

Soluzione:

1. Cache del browser. Premi Ctrl+Shift+R (o Cmd+Shift+R su Mac) per un ricaricamento forzato.
2. Cache CDN / hosting. Se il tuo sito e dietro Cloudflare o un CDN simile, svuota la cache per la pagina con il widget.
3. Cache Redis di tikento. La configurazione del widget è memorizzata nella cache con TTL 300 secondi (5 minuti). Se sono passati più di 5 minuti e le modifiche non sono apparse, contatta il supporto.

Lo script widget.js viene caricato con l'header Cache-Control: no-cache -- e sempre aggiornato. Ma la configurazione del modulo (campi, biglietti, opzioni) viene memorizzata nella cache lato tikento.

Problema: il widget non funziona in modalita popup

Sintomi:

• Il pulsante con data-tikento-popup non apre il modulo al clic.

Soluzione:

1. Assicurati che lo script widget.js sia caricato nella pagina.
2. Verifica che l'attributo data-tikento-popup contenga un UUID dell'evento corretto.
3. Se il pulsante e stato aggiunto dinamicamente (tramite framework JS), assicurati che sia presente nel DOM al momento dell'inizializzazione del widget, oppure chiama window.tikento?.refresh() dopo l'aggiunta.

Errori nella console: riferimento

Non funziona ancora

Se dopo tutti i controlli il problema persiste:

1. Fai uno screenshot degli errori nella console (scheda Console).
2. Copia l'URL della pagina in cui e installato il widget.
3. Indica il browser e la sua versione.
4. Invia tutto al supporto tramite il pannello (Aiuto -> Scrivi al supporto) o a support@tikento.com.