Modifica dei modelli preesistenti

Questo modello è obsoleto. Aggiorna al modello più recente. Documentazione completa sui modelli personalizzati più recenti

Alcuni dei nostri piani ti offrono la possibilità di creare modelli personalizzati e, sebbene sia un’operazione semplice, è utile avere una buona conoscenza dell’HTML e/o dei CSS per sfruttare al meglio questa funzionalità.

Inizia scaricando il modello "Classic" dalla sezione "Modelli" su admin.crowdhandler.com.

Lo stile di base è definito in un file .css disponibile all'indirizzo https://wait.crowdhandler.com/css/latest/ch-main.css

Aggiungi gli stili inline nella sezione del tuo modello personalizzato per sovrascrivere gli stili oppure inserisci un link a un file .css ospitato sul tuo server.

When editing the file locally comment out the <script> tag at the bottom of the file to disable API calls and any protocol errors.

Ricordati di rimuovere il commento da questa riga quando carichi il tuo modello

<!-- <script src="https://wait.crowdhandler.com/js/latest/main.js?id=ch-public-key"></script> -->

Anatomia di un modello

I modelli di CrowdHandler richiedono la presenza di diverse sezioni affinché la sala d'attesa funzioni correttamente.

These are represented by <section> tags in the Standard template and have ids that are prefixed by 'ch-'.

Queste sono:

ch-logo

Visualizza il logo che è stato caricato sul tuo account.

ch-intestazione

Mostra il titolo della tua sala d'attesa e il messaggio che hai impostato per essa.

Questi sono identificati rispettivamente dagli ID ch-title e ch-message.

<section class="ch-section" id="ch-header">
         <h2 id="ch-title">You are in our virtual waiting room</h2>
         <p id="ch-message" class="alert alert-info" role="alert">Our website is very busy at the moment.</p>
      </section>

captcha

Se nel tuo piano è attivato il captcha <div id="ch-captcha-form"></div> viene compilato automaticamente in base al metodo CAPTCHA selezionato ed è obbligatorio.

<section class="ch-section" id="ch-captcha">
         <p id="ch-captcha-message">Please complete the captcha to proceed</p>
         <div id="ch-captcha-form"></div>
      </section>

bloccato da ch

Viene visualizzato quando un utente è stato bloccato a causa di attività sospette.

<section class="ch-section" id="ch-blocked">
         <p class="alert alert-danger" role="alert">You have been blocked due to suspicious activity.</p>
      </section>

una stanza piena di...

Viene visualizzato quando una sala d'attesa non ha più posti disponibili.

<section class="ch-section" id="ch-room-full">
         <p class="lead">We're sorry, the waiting room is full. We will let you in if a position becomes available.</p>
      </section>

ch-preludio

La scritta "In attesa" viene visualizzata davanti a una sala d'attesa attiva se il conto alla rovescia della sala d'attesa è impostato su una data e un'ora precedenti alla data e all'ora di attivazione della coda.

<section class="ch-section" id="ch-prelude">
         <div id="ch-sooner">
            <p class="lead">This waiting room opens <br><strong id="ch-countdown">soon</strong></p>
         </div>
         <div id="ch-later">
            <p class="lead">This waiting room opens on <br><strong id="ch-datetime">checking date</strong></p>
         </div>
         <small>There is no need to refresh this page; you will automatically receive a random queue position when the
            room opens.
            Users who arrive later will join the back of the queue.</small>
      </section>

ch-attivo

Viene visualizzato quando la stanza è attiva e contiene una serie di elementi importanti.

ch-count mostra la posizione dell'utente nella coda e visualizza un conto alla rovescia per informarlo sull'avanzamento della coda.

Se una posizione non è ancora stata assegnata, il tag mostrerà ciò che hai inserito nei tag con l'ID ch-count.

<h1>Position: <strong id="ch-count">estimating</strong></h1>

ch-progress visualizza una barra di avanzamento. Esistono 2 tipi di barra di avanzamento, che possono essere specificati tramite le classi CSS: progress-bar-stripes e progress-bar-pulse

<div class="progress">
            <div id="ch-progress" class="progress-bar progress-bar-pulse" role="progressbar" aria-valuenow="25"
               aria-valuemin="0" aria-valuemax="100"></div>
         </div>

ch-estimated-wait mostra la durata stimata dell'attesa per l'utente. Inizialmente viene visualizzata un'immagine segnaposto, ch-estimated-placeholder, finché non si dispone di una stima del tempo di attesa. Di solito si tratta di un intervallo piuttosto breve, ma se la frequenza è impostata su zero, questa immagine rimarrà visibile per un bel po' di tempo.

I tag " ch-estimated-hours " e " ch-estimated-minutes " visualizzano rispettivamente le ore e i minuti.

<div id="ch-estimated-wait" class="ch-show">
            Estimated wait:
            <span id="ch-estimated-placeholder">
               <img src="https://wait.crowdhandler.com/img/ellipse-dots.gif" />
            </span>
            <span id="ch-estimated-hours" class="ch-hide"><strong class="ch-number"></strong> hours</span>
            <span id="ch-estimated-minutes" class="ch-hide"><strong class="ch-number"></strong> minutes</span>
         </div>

Infine, i tag `ch-sessions-expire` e `ch-sessions-no-expire` vengono utilizzati per mostrare ulteriori informazioni all'utente. Se le sessioni sono configurate in modo da non scadere durante l'attesa, utilizziamo il tag `ch-sessions-no-expire` per indicare all'utente quanti minuti ha a disposizione per avviare la transazione una volta raggiunta la testa della coda. Questa informazione viene inserita nel tag `ch-sessions-expiry`.

<p id="ch-sessions-expire" class="ch-hide">You will move to the front of the queue automatically. There is no
            need to refresh this page but please keep this window open, and if you are using a mobile device, do not
            allow it to go to sleep for too long</p>
         <p id="ch-sessions-no-expire" class="ch-hide">You will move to the front of the queue automatically. There is
            no need to refresh this page. Once you reach the front of the line you will have <span
               id="ch-sessions-expiry">15</span> minutes to start your transaction.</p>

ch-stock

Nei piani con modello personalizzato è possibile visualizzare un valore di magazzino che viene compilato da un campo nella sala d'attesa.

Puoi utilizzarlo per avvisare i clienti quando le scorte disponibili sono esaurite, in modo che non rimangano in sala d'attesa inutilmente.

<section class="ch-section ch-hide" id="ch-stock">
         <p id="ch-stock-available" class="">Availability <span id="ch-stock-value">X</span> items</p>
         <p id="ch-stock-unavailable" class="ch-hide">
            We’re all sold out, sorry please come again next time!
         </p>
      </section>

ch-scrivimi-via-e-mail

Sui piani che dispongono della funzione “Inviami un’e-mail”.

<section class="ch-section ch-hide" id="ch-email-me"> ... </section>

Questa sezione ti consente di modificare i tuoi termini e condizioni. Questi vengono visualizzati quando un utente inserisce il proprio indirizzo e-mail e gli consentono di confermare il consenso alla raccolta del proprio indirizzo.

<section class="ch-section ch-hide" id="ch-email-me">
         <form>
            <div class="ch-email-me-group">
               <input id="ch-email-me-input" type="text" class="ch-email-me-input" placeholder="Enter email address"
                  aria-label="Enter email address">
               <span class="input-group-btn">
                  <button id="ch-email-me-btn-action" class="btn btn-default" type="submit">
                     <span class="ch-show">
                        Email Me
                     </span>
                  </button>
               </span>
            </div>
         </form>
         <div id="ch-email-terms" class="ch-hide">
            <p>Your email address will be stored temporarily to notify you when your queue session ends. It will only be
               used for this purpose and deleted immediately after.</p>
            <p>See crowdhandler.com/privacy for details.</p>
            </p>
         </div>
         <div id="ch-email-notification" class="">
            <p>An email notification will be sent to <span class="ch-email-notification-message"></span></p>
            <button id="ch-email-me-btn-reset" class="btn btn-default ch-email-me-btn-reset" type="button">
               <span class="ch-show">
                  Change address
               </span>
            </button>
         </div>
      </section>

priorità-ch

In alcuni piani è possibile assegnare codici di priorità agli utenti. Questa sezione mette a disposizione un modulo che consente all'utente di inserire il codice di priorità.

The form is comprised of an input field ch-priority-input, a button ch-priority-btn-action and two elements to show success and error states, ch-priority-success and ch-priority-error. In the standard template these are <span> tags that contain svgs, but these can be anything you want.

<section class="ch-section" id="ch-priority">
         <h3>Got a priority code?</h3>
         <form>
            <div class="ch-priority-group">
               <input id="ch-priority-input" type="text" class="ch-priority-input" placeholder="Enter Code"
                  aria-label="Enter Code">
               <span class="input-group-btn">
                  <button id="ch-priority-btn-action" class="btn btn-default" type="submit">
                     <span class="ch-show">
                        Apply
                     </span>
                  </button>
               </span>
               <span id="ch-priority-success" class="ch-icon ch-hide ch-priority-group-add-item">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="feather feather-check">
                     <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
               </span>
               <span id="ch-priority-error" class="ch-icon ch-hide ch-priority-group-add-item">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="feather feather-x">
                     <line x1="18" y1="6" x2="6" y2="18"></line>
                     <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
               </span>
            </div>
         </form>

      </section>

ch-footer

La sezione a piè di pagina mostra il token corrente dell'utente e l'ora dell'ultimo accesso all'API di CrowdHandler. Ciò è utile per il debug e per le richieste degli utenti.