Bearbeit von älteren Vorlagen

Diese Vorlage ist veraltet. Aktualisieren Sie auf die neueste Vorlage. Vollständige Dokumentation zu den neuesten benutzerdefinierten Vorlagen

Bei einigen unserer Tarife haben Sie die Möglichkeit, eigene Vorlagen zu erstellen. Das ist zwar unkompliziert, doch um diese Funktion optimal nutzen zu können, ist es hilfreich, über gute Kenntnisse in HTML und/oder CSS zu verfügen.

Laden Sie zunächst die „Classic“-Vorlage aus dem Vorlagenbereich auf admin.crowdhandler.com herunter.

Das grundlegende Styling wird über eine CSS-Datei unter https://wait.crowdhandler.com/css/latest/ch-main.css bereitgestellt.

Fügen Sie im „head“-Bereich Ihrer benutzerdefinierten Vorlage Inline-Stile ein, um die Stile zu überschreiben, oder verweisen Sie auf eine selbst gehostete CSS-Datei.

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

Denken Sie daran, diese Zeile beim Hochladen Ihrer Vorlage aus den Kommentaren zu entfernen.

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

Aufbau einer Vorlage

Damit der Warteraum ordnungsgemäß funktioniert, müssen in CrowdHandler-Vorlagen mehrere Abschnitte vorhanden sein.

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

Das sind:

ch-logo

Zeigt das Logo an, das in Ihr Konto hochgeladen wurde.

ch-header

Zeigt den Titel Ihres Warteraums und die von Ihnen festgelegte Nachricht für Ihren Warteraum an.

Diese sind jeweils durch die IDs „ch-title“ und „ch-message“ gekennzeichnet.

<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

Falls Captcha in Ihrem Tarif aktiviert ist <div id="ch-captcha-form"></div> wird durch die ausgewählte CAPTCHA-Methode ausgefüllt und ist ein Pflichtfeld.

<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>

ch-blockiert

Wird angezeigt, wenn ein Benutzer aufgrund verdächtiger Aktivitäten gesperrt wurde.

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

ein ganzer Raum voller

Wird angezeigt, wenn in einem Warteraum keine Plätze mehr frei sind.

<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-präludium

Die Anzeige vor einem Warteraum ist aktiv, wenn der Countdown für den Warteraum auf ein Datum und eine Uhrzeit eingestellt ist, die vor dem Datum und der Uhrzeit der Aktivierung der Warteschlange liegen.

<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-aktiv

Wird angezeigt, wenn der Raum aktiv ist und eine Reihe wichtiger Elemente enthält.

„ch-count“ zeigt die Position des Benutzers in der Warteschlange an und zählt rückwärts, um ihm den Fortschritt in der Warteschlange anzuzeigen.

Wenn eine Position noch nicht zugewiesen wurde, zeigt das Tag das an, was Sie bei den Tags mit der ID „ch-count“ eingegeben haben.

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

ch-progress zeigt einen Fortschrittsbalken an. Es gibt zwei Arten von Fortschrittsbalken, die über CSS-Klassen festgelegt werden können: „progress-bar-stripes “ und „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“ zeigt an, wie lange die geschätzte Wartezeit für den Benutzer beträgt. Zunächst wird eine Platzhaltergrafik ( „ch-estimated-placeholder“) angezeigt, bis eine geschätzte Wartezeit vorliegt. Dies dauert in der Regel nur kurz, aber wenn Ihr Wert auf Null gesetzt ist, bleibt diese Anzeige für eine längere Zeit bestehen.

Die Tags „ch-estimated-hours“ und „ch-estimated-minutes“ geben die Stunden bzw. Minuten an.

<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>

Schließlich werden „ch-sessions-expire“ und „ch-sessions-no-expire“ verwendet, um dem Benutzer weitere Informationen anzuzeigen. Wenn Sie Sitzungen so eingestellt haben, dass sie während der Wartezeit nicht ablaufen, verwenden wir „ch-sessions-no-expire“, um dem Benutzer mitzuteilen, wie viele Minuten er Zeit hat, um seine Transaktion zu starten, sobald er an der Spitze der Warteschlange steht. Diese Information wird im Tag „ch-sessions-expiry“ hinterlegt.

<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-Aktie

Bei Plänen mit benutzerdefinierter Vorlage können wir einen Bestandswert anzeigen, der aus einem Feld im Warteraum übernommen wird.

Damit können Sie Kunden benachrichtigen, wenn der vorrätige Bestand aufgebraucht ist, damit sie nicht unnötig im Wartezimmer warten müssen.

<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-email-me

Bei Tarifen, bei denen die Funktion „Per E-Mail benachrichtigen“ verfügbar ist.

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

In diesem Abschnitt können Sie Ihre Allgemeinen Geschäftsbedingungen anpassen. Diese werden angezeigt, wenn ein Nutzer seine E-Mail-Adresse eingibt, und ermöglichen es ihm, der Erfassung seiner Adresse zuzustimmen.

<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>

ch-Priorität

Bei einigen Tarifen haben Sie die Möglichkeit, Nutzern Prioritätscodes zuzuweisen. In diesem Abschnitt finden Sie ein Formular, über das der Nutzer den Prioritätscode übermitteln kann.

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

Im Fußbereich werden das aktuelle Token des Benutzers und der Zeitpunkt angezeigt, zu dem er sich zuletzt bei der CrowdHandler-API angemeldet hat. Dies ist hilfreich für die Fehlersuche und bei Benutzeranfragen.