Introduzione ai modelli

Guida rapida — Crea una sala d'attesa personalizzata con il tuo marchio in pochi minuti.

Vedi anche: Markup e struttura dei modelli | Stato e metodi dei modelli | Stile e variabili CSS

Tre passaggi per creare una sala d'attesa a immagine del marchio

Personalizzare il modello della sala d'attesa è semplicissimo. Basta aprire il file HTML in un editor di testo, modificare alcune variabili CSS in base al proprio marchio e il gioco è fatto. Non servono strumenti di sviluppo né framework da imparare: basta modificare e aggiornare.

1. Aprire il modello

Apri index.html sia in un editor di testo e un browser. Nella parte superiore del file troverai un <style> blocco con proprietà personalizzate CSS — queste controllano l'aspetto complessivo della sala d'attesa:

<style>
  :root {
    --ch-brand-primary:    #424242;   /* Title, accent, stock pill */
    --ch-brand-secondary:  #4b4b4b;   /* Buttons, focus rings */
    --ch-bg:               #FFFFFF;   /* Page background */
    --ch-surface:          #F0F4F8;   /* Card / panel backgrounds */
    --ch-progress-color:   #004f84;   /* Progress bar colour */
  }
</style>

Modifica i valori esadecimali in base ai colori del tuo marchio, salva e aggiorna la pagina nel browser. Il gioco è fatto: il motore del tema ricava automaticamente tutti gli altri colori (contrasto del testo, stati al passaggio del mouse, bordi, ombre).

2. Imposta i caratteri (facoltativo)

Per utilizzare un font personalizzato, aggiungi un @import in cima allo stesso <style> bloccare e sovrascrivere la variabile font:

<style>
  /* Import your fonts first */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

  :root {
    --ch-font-primary: 'Inter', -apple-system, BlinkMacSystemFont,
                       'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
</style>

Inserisci sempre i font di riserva del sistema dopo il font personalizzato, in modo che la pagina appaia corretta mentre i font vengono caricati. Se salti il @import, il browser non disporrà dei file dei caratteri e passerà al primo carattere di riserva disponibile.

3. Visualizza l'anteprima delle modifiche

Il modello include un <script id="crowdhandler-data"> tag con un oggetto di configurazione JSON. Aggiungi "dev": true per accedere alla modalità di anteprima, che consente di testare ogni stato della coda senza connettersi all'API live:

<script id="crowdhandler-data" type="application/ld+json">
{
    "dev": true,
    "status": 1,
    "title": "My Event",
    "position": 150,
    "estimate": 12,
    "simulatePolling": true
}
</script>

Modifica stato per visualizzare i diversi stati (1 = coda attiva, 3 = bloccato, 4 = conto alla rovescia, 5 = sala piena). Salva e aggiorna per visualizzare l'anteprima di ciascuno. Rimuovi "dev" quando sarai pronto per andare in onda.

Approfondimento

I passaggi sopra indicati sono tutto ciò che serve per creare una sala d'attesa personalizzata con il proprio marchio. Se desideri avere il pieno controllo sul layout, sul funzionamento e sulle funzionalità, le guide dettagliate trattano ogni aspetto:

  • Markup e struttura del modello — Struttura HTML, direttive Vue, gerarchia dello stato della coda e come aggiungere o rimuovere funzionalità quali notifiche via e-mail, codici di priorità e indicatori di disponibilità.
  • Stato e metodi di Vue — La versione completa ch riferimento all'oggetto: ogni proprietà, il suo tipo e ciò che controlla. Include i metodi del modulo e le funzioni di supporto disponibili nel modello.
  • Stile e variabili CSS — L'elenco completo delle proprietà CSS personalizzate, il funzionamento del motore dei temi a due livelli e come sovrascrivere proprietà strutturali quali la spaziatura, il raggio dei bordi e l'altezza della barra di avanzamento.