Modification des modèles hérités
Ce modèle est obsolète. Passez au modèle le plus récent. Documentation complète sur les derniers modèles personnalisés
Certaines de nos formules vous permettent de créer des modèles personnalisés. Bien que cette fonctionnalité soit simple à utiliser, il est utile d'avoir de bonnes connaissances en HTML et/ou CSS pour en tirer pleinement parti.
Commencez par télécharger le modèle « Classic » dans la section « Modèles » du site admin.crowdhandler.com.
La mise en forme de base est fournie par un fichier .css disponible à l'adresse https://wait.crowdhandler.com/css/latest/ch-main.css
Ajoutez des styles en ligne dans la balise
de votre modèle personnalisé pour remplacer les styles par défaut ou créez un lien vers un fichier .css hébergé sur votre propre serveur.When editing the file locally comment out the <script> tag at the bottom of the file to disable API calls and any protocol errors.
N'oubliez pas de décommenter cette ligne lorsque vous téléversez votre modèle
<!-- <script src="https://wait.crowdhandler.com/js/latest/main.js?id=ch-public-key"></script> -->
Anatomie d'un modèle
Les modèles CrowdHandler doivent comporter plusieurs sections pour que la salle d'attente fonctionne correctement.
These are represented by <section> tags in the Standard template and have ids that are prefixed by 'ch-'.
Il s'agit de :
ch-logo
Affiche le logo que vous avez téléchargé sur votre compte.
ch-en-tête
Affiche le titre de votre salle d'attente et le message que vous avez défini pour celle-ci.
Ils sont identifiés respectivement par les identifiants « ch-title » et « 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
Si le captcha est activé dans votre forfait <div id="ch-captcha-form"></div> Ce champ est renseigné automatiquement en fonction de la méthode de captcha sélectionnée et est obligatoire.
<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>
bloqué par ch
S'affiche lorsqu'un utilisateur a été bloqué en raison d'une activité suspecte.
<section class="ch-section" id="ch-blocked">
<p class="alert alert-danger" role="alert">You have been blocked due to suspicious activity.</p>
</section>
une salle pleine
S'affiche lorsqu'une salle d'attente n'a plus de place disponible.
<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élude
L'affichage devant une salle d'attente est actif si le compte à rebours de la salle d'attente est réglé sur une date et une heure antérieures à celles d'activation de la file d'attente.
<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-actif
S'affiche lorsque la pièce est active et contient plusieurs éléments importants.
ch-count affiche la position de l'utilisateur dans la file d'attente et effectue un compte à rebours pour lui permettre de suivre l'avancement de la file d'attente.
Si un poste n'a pas encore été attribué, la balise affichera la valeur que vous avez saisie dans les balises associées à l'identifiant « ch-count ».
<h1>Position: <strong id="ch-count">estimating</strong></h1>
ch-progress affiche une barre de progression. Il existe deux types de barres de progression, que l'on peut définir à l'aide des classes CSS suivantes : progress-bar-stripes et 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 affiche la durée estimée de l'attente pour l'utilisateur. Au départ, une image de remplacement, ch-estimated-placeholder, s'affiche jusqu'à ce que nous disposions d'une estimation du temps d'attente. Cela ne dure généralement pas très longtemps, mais si votre débit est réglé sur zéro, cette image restera affichée pendant un certain temps.
Les balises « ch-estimated-hours » et « ch-estimated-minutes » indiquent respectivement les heures et les minutes.
<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>
Enfin, les paramètres `ch-sessions-expire` et `ch-sessions-no-expire` servent à afficher des informations complémentaires à l’utilisateur. Si vous avez configuré les sessions pour qu’elles n’expirent pas pendant l’attente, nous utilisons `ch-sessions-no-expire` pour indiquer à l’utilisateur le nombre de minutes dont il dispose pour lancer sa transaction une fois qu’il est en tête de la file d’attente. Cette information est renseignée dans la balise `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
Sur les plans utilisant un modèle personnalisé, il est possible d'afficher une valeur de stock qui est renseignée à partir d'un champ de la salle d'attente.
Vous pouvez utiliser cette fonctionnalité pour avertir les clients lorsque le stock disponible est épuisé, afin qu'ils ne restent pas inutilement dans la salle d'attente.
<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-envoyez-moi un e-mail
Pour les formules proposant la fonctionnalité « M'envoyer un e-mail ».
<section class="ch-section ch-hide" id="ch-email-me"> ... </section>
Cette section vous permet de modifier vos conditions générales. Celles-ci s'affichent lorsqu'un utilisateur saisit son adresse e-mail et lui permettent de valider la collecte de cette adresse.
<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
Dans certaines formules, vous avez la possibilité d'attribuer des codes de priorité aux utilisateurs. Cette section propose un formulaire permettant à l'utilisateur de saisir son code de 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 section de pied de page affiche le jeton actuel de l'utilisateur ainsi que l'heure de sa dernière connexion à l'API CrowdHandler. Cette information est utile pour le débogage et pour répondre aux demandes des utilisateurs.