Aggiunta di modelli

Nota: i modelli personalizzati sono una funzionalità disponibile solo nei piani a pagamento.

La schermata "Modelli" consente di scaricare, visualizzare in anteprima e aggiornare i modelli personalizzati.

Modifica del logo#

Puoi utilizzare il pannello di caricamento del logo per caricare il tuo logo. Questo verrà utilizzato in tutti i modelli standard. La casella di caricamento del logo supporta i formati PNG, GIF e JPEG. Il logo verrà inserito nel modello a grandezza naturale, quindi ritaglia e ridimensiona il logo in modo che si adatti al layout della sala d'attesa prima di caricarlo. Consigliamo di mantenere le dimensioni intorno ai 300 pixel sia in altezza che in larghezza.

Anteprima di un modello#

Clicca sull'icona di anteprima per vedere come appare il modello in azione. Sono disponibili dei pulsanti per simulare varie condizioni della sala d'attesa, ad esempio "in attesa" e "pre-vendita".

Scarica un modello#

Puoi scaricare un modello standard per vedere come è strutturato, oppure scaricare uno dei tuoi modelli personalizzati nel caso in cui avessi smarrito la password di GitHub.

I modelli verranno scaricati come file zip. È possibile modificare il modello nel proprio editor HTML preferito e ricaricarlo come modello personalizzato. Il modello utilizza le direttive di Vue 3 per visualizzare in modo condizionale le sezioni in base allo stato della coda.

<!-- Container that shows when loaded -->
<div id="crowdhandler-template" :class="{ 'active': ch.isLoaded }" role="main">
  <!-- Screen reader announcements -->
  <div class="ch-sr-only" aria-live="polite" aria-atomic="true">{{ ch.announcement }}</div>

  <!-- Your template content -->

  <!-- Captcha container (required if captcha is enabled) -->
  <div id="ch-captcha-form"></div>

  <!-- Script inclusion -->
  <script type="module" src="/src/main.js"></script>
</div>

Durante la creazione della connessione vengono utilizzati i valori predefiniti del modello. Ciò significa che tutto il testo presente nella pagina proviene direttamente dal modello, dai contenuti aggiunti dal pannello di controllo oppure è di tipo numerico, rendendo i modelli indipendenti dalla lingua.

Per iniziare a utilizzare i modelli personalizzati, dai un'occhiata alla nostra guida.

Carica un modello#

I modelli possono essere caricati come file oppure caricati in tempo reale da un URL.

Inserimento di un modello tramite URL#

Il vantaggio principale del caricamento tramite URL è che puoi creare il modello sul tuo sito web come file HTML semplice e, una volta aggiunto l'URL al pannello di controllo, qualsiasi modifica apportata al modello verrà automaticamente aggiornata all'interno di CrowdHandler. Ciò significa che puoi integrare il design del modello nel tuo sito web.

Ancora meglio: se utilizzi un CMS, l'URL può essere dinamico, il che significa che puoi gestire i contenuti della pagina della sala d'attesa proprio come qualsiasi altra pagina del tuo sito. Assicurati solo di utilizzare tutti gli ID corretti e di non interferire con il codice JavaScript della sala d'attesa.

Metteremo in cache il contenuto della tua pagina per circa un minuto, quindi, anche se migliaia di utenti accedono alla tua sala d'attesa, effettueremo una richiesta di aggiornamento solo una volta al minuto.

Caricamento di un modello#

È possibile caricare un modello direttamente come allegato. Si prega di tenere presente che è ammesso solo il formato HTML. Eventuali file esterni utilizzati, inclusi JavaScript, CSS e immagini, devono essere ospitati separatamente su domini sicuri (https://) per evitare avvisi relativi a contenuti non sicuri.

Important: relative URLs, for links and assets, etc., will not resolve to your domain. You can either ensure all URLs are absolute or add a base element to your template. e.g. <base href="https://www.crowdhandler.com/"> This will affect all of your relative URLs.