Come funziona il widget
Il widget tikento e un bundle JavaScript separato che viene caricato da tikento.com/widget.js e renderizzato nel Shadow DOM. Grazie al Shadow DOM, gli stili del widget sono isolati dagli stili del tuo sito -- nessun conflitto CSS.
Il modulo si sincronizza automaticamente con la piattaforma: le modifiche nel costruttore (nuovi campi, modifica dei biglietti) appaiono nel widget senza necessita di aggiornare il codice sul sito.
Codice base del widget
<!-- Contenitore per il modulo -->
<div data-tikento-widget="IL_TUO_EVENT_ID"></div>
<!-- Script del widget (una volta per pagina) -->
<script
src="https://tikento.com/widget.js"
async
defer
></script>
Sostituisci IL_TUO_EVENT_ID con l'UUID del tuo evento -- e visibile nell'URL dell'evento nel pannello di controllo o nella sezione "Widget".
Due modalita di visualizzazione
Modulo integrato (Inline)
Il modulo viene visualizzato direttamente nella pagina nella posizione del contenitore data-tikento-widget. Il partecipante lo compila senza finestre popup.
Modulo popup (Popup)
Il modulo si apre in overlay al clic su un pulsante. Aggiungi l'attributo data-tikento-popup a qualsiasi pulsante del tuo sito:
<button data-tikento-popup="IL_TUO_EVENT_ID">
Registrati
</button>
Lo script del widget rimane lo stesso.
Personalizzazione dell'aspetto
Nei piani Pro e superiori e disponibile la personalizzazione tramite variabili CSS. Aggiungi nell'HTML o nel CSS del tuo sito:
:root {
--tikento-primary: #4F46E5;
--tikento-radius: 8px;
--tikento-font: 'Inter', sans-serif;
}
Le variabili CSS disponibili per il widget sono elencate nella sezione Widget -> Personalizzazione nel pannello dell'evento.
Nel piano Free il watermark "Powered by tikento" e sempre presente e non puo essere rimosso tecnicamente.
Restrizioni delle origini (CORS)
Nei piani Pro e superiori, configura la lista dei domini consentiti per la sicurezza. Questo protegge il tuo modulo dall'utilizzo su siti non autorizzati.
Maggiori dettagli -- Configurazione CORS.
Piattaforme compatibili
Il widget funziona su qualsiasi piattaforma con supporto HTML:
- Tilda, Webflow, Wix, Framer
- WordPress, Squarespace
- Pagine HTML semplici
- Applicazioni React, Vue, Angular
Istruzioni specifiche per i costruttori piu popolari -- Installazione su Tilda, Webflow, Wix.