Integrazione Widget Ticket

Questa pagina dimostra come integrare il widget del sistema ticket in qualsiasi sito web esistente.

Importante: sostituisci tuodominio.com con l'URL del tuo server. Il widget appare come bottone flottante in basso a destra ↑

1. Installazione minima

Aggiungi questo snippet in fondo al tuo HTML, prima di </body>:

<script
    src="https://tuodominio.com/ticket-system/public/widget.js"
    data-api="https://tuodominio.com/ticket-system/api"
    data-token="TOKEN_PUBBLICO_DEL_DIPARTIMENTO"
    async>
</script>

2. Opzioni disponibili

Tutti gli attributi sono opzionali tranne data-api:

data-api — URL base delle API (obbligatorio)
data-token — Token del dipartimento da preselezionare (lo trovi in Dipartimenti → Token Pubblico)
data-position — bottom-right (default) o bottom-left
data-color — Colore primario esadecimale (es. #e74c3c)
data-label — Titolo mostrato nel modale (es. Supporto Tecnico)
data-kb-url — URL della knowledge base pubblica (abilita il tab KB nel widget)
data-auto-open — true per aprire automaticamente il modale al caricamento

3. Esempio con personalizzazione completa

<script
    src="https://tuodominio.com/ticket-system/public/widget.js"
    data-api="https://tuodominio.com/ticket-system/api"
    data-token="abc123..."
    data-position="bottom-left"
    data-color="#e74c3c"
    data-label="Assistenza Clienti"
    data-kb-url="https://tuodominio.com/ticket-system/kb/public.php"
    async>
</script>

4. Apertura programmatica via JavaScript

Puoi aprire/chiudere il widget da qualsiasi bottone o link nella tua pagina:

<button onclick="TicketWidget.open()">Contattaci</button>
<a href="#" onclick="TicketWidget.open(); return false;">Supporto</a>

Prova qui:

5. Installazione in WordPress / Joomla / Shopify

Incolla lo snippet in:

WordPress: Aspetto → Theme Editor → footer.php (prima di </body>), oppure usa un plugin "Insert Headers and Footers".
Joomla: Estensioni → Moduli → crea modulo HTML personalizzato e pubblicalo in posizione debug o alla fine del template.
Shopify: Online Store → Themes → Edit HTML/CSS → theme.liquid (prima di </body>).
Sito statico HTML: incolla direttamente prima di </body>.

6. Note tecniche

Il widget è vanilla JS (~9KB), zero dipendenze.
Il CSS viene iniettato automaticamente — non serve includere widget.css manualmente.
Compatibile con tutti i browser moderni (Chrome, Firefox, Safari, Edge).
CORS abilitato: il widget funziona da qualsiasi dominio.
Anti-spam integrato: max 1 ticket per email ogni minuto (configurabile).
3 tab: Nuovo ticket, Verifica stato, Knowledge Base (opzionale).
Supporta categorie personalizzate via API.