Nota: i modelli personalizzati sono una funzione del piano a pagamento.
La schermata Modelli consente di scaricare, visualizzare in anteprima e aggiornare i modelli personalizzati.
Modifica del logo
È possibile utilizzare il pannello Carica logo per caricare il proprio logo. Questo verrà utilizzato in tutti i modelli standard. Il riquadro di caricamento del logo supporta PNG, GIF e JPEG. Il logo verrà inserito nel modello a dimensioni reali, quindi ritagliatelo e ridimensionatelo per adattarlo al layout della sala d'attesa prima di caricarlo. Si consiglia di utilizzare un'altezza e una larghezza di circa 300 pixel.
Anteprima di un modello
Fare clic sull'icona di anteprima per vedere come appare il modello in azione. Sono disponibili pulsanti per simulare vari stati della sala d'attesa, ad esempio 'attesa', 'prevendita'.
Scarica un modello
È possibile scaricare un modello standard per vedere come è costruito, oppure scaricare uno dei propri modelli personalizzati nel caso in cui si sia smarrita la password di GitHub.
I modelli vengono scaricati come file zip. È possibile modificare il modello nel proprio editor HTML preferito e ricaricarlo come modello personalizzato. I modelli di CrowdHandler utilizzano i tag HTML standard, non è necessario imparare un formato di tag speciale o un codice. Le variabili di CrowdHandler vengono inserite negli spazi del modello utilizzando solo gli ID HTML. Ad esempio:
<section id="ch-active">
<p id="ch-message" class="alert alert-info" role="alert">Our website is very busy at the moment.</p>
<h1>Position: <strong id="ch-count">calculating</strong></h1>
<div class="progress">
<div id="ch-progress" class="progress-bar progress-bar-striped progress-bar-animated active bg-success" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>Estimated wait time: <strong id="ch-wait">Estimating...</strong></p>
<p><small>You will move to the front of the line automatically. There is no need to refresh this page, but please keep your browser open.</small></p>
</section>In questo blocco, il contenuto dei tag con ID #ch-message, #ch-count, #ch-wait viene sostituito con i valori reali forniti da CrowdHandler. Le impostazioni predefinite del modello vengono utilizzate mentre la connessione viene stabilita. Ciò significa che tutta la lingua della pagina proviene direttamente dal modello o dal contenuto aggiunto al pannello di controllo, oppure è numerica, rendendo i modelli indipendenti dalla lingua.
Caricare un modello
I modelli possono essere caricati come file o caricati in tempo reale da un URL.
Incorporare un modello per URL
Il vantaggio principale del caricamento tramite URL è che è possibile creare il modello sul proprio sito web come un semplice file HTML e, una volta aggiunto l'URL al pannello di controllo, qualsiasi modifica apportata al modello verrà aggiornata automaticamente all'interno di CrowdHandler. Ciò significa che è possibile incorporare il design del modello nel proprio sito web.
Ancora meglio: se si utilizza un CMS, l'URL può essere un URL dinamico, il che significa che è possibile gestire i contenuti della pagina della sala d'attesa come qualsiasi altra pagina del sito. Basta assicurarsi di utilizzare tutti gli ID giusti e di non disturbare il JavaScript della sala d'attesa.
Il contenuto della pagina viene memorizzato nella cache per circa un minuto, quindi anche se la sala d'attesa è frequentata da migliaia di utenti, gli aggiornamenti vengono effettuati solo una volta al minuto.
Caricamento di un modello
È possibile caricare un modello direttamente come allegato. Attenzione, si tratta solo di un file HTML. Qualsiasi file esterno utilizzato, compresi Javascript, CSS e immagini, deve essere ospitato separatamente su domini sicuri (https://) per evitare avvisi di contenuto non sicuro.
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.