Some of our plans give you the ability to create custom templates and while straightforward it helps to have a good understanding of html and/or css to get the most from this feature.
Start by downloading the Standard Template from the templates section on admin.crowdhandler.com
Basic stying is provided from a .css file at https://wait.crowdhandler.com/css/latest/ch-main.css
Add inline styles in the head of your custom template to override the styles or link to a self hosted .css file.
When editing the file locally comment out the <script> tag at the bottom of the file to disable api calls and any protocol errors.
Remember to uncomment this line when uploading your template
<!-- <script src="https://wait.crowdhandler.com/js/latest/main.js?id=ch-public-key"></script> -->
Anatomy of a Template
CrowdHandler templates require several sections to be present in order for the waiting room to function correctly.
These are represented by <section> tags in the Standard template and have ids that are prefixed by 'ch-'.
Il s'agit de
ch-logo
Displays the logo that has been uploaded to your account.
ch-header
Displays the title of your Waiting Room and the message that you set for your waiting room.
These are identified by the ids ch-title and ch-message respectively.
<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>
ch-blocked
Displayed when a user has been blocked for suspicious activity.
<section class="ch-section" id="ch-blocked">
<p class="alert alert-danger" role="alert">You have been blocked due to suspicious activity</p>
</section>
ch-room-full
Displayed when a waiting room no longer has capacity.
<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-prelude
Displayed before a waiting room is active if the waiting room countdown is set to a date/time prior to the queue activates date/time.
<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-active
Displayed when the room is active and contains a number of important elements.
ch-count displays the users position in the queue and counts down to let them know their queue progression.
If a position has yet to be allocated then the tag will display whatever you have entered with the tags with the ch-count id.
<h1>Position: <strong id="ch-count">estimating</strong></h1>
ch-progress displays a progress bar. There are 2 types of progress bar which can be designated by css classes: progress-bar-stripes and 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 displays how long the estimated wait time is for the user. Initially a placeholder graphic, ch-estimated-placeholder, is displayed until we have an estimated wait time. This is usually quite brief but if your rate is set to zero then this will hand around for quite some time.
The ch-estimated-hours and ch-estimated-minutes tags display the hours and minutes respectively.
<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>
Finally ch-sessions-expire and ch-sessions-no-expire are used to display a further information to the user. If you have sessions set not to expire while waiting we use ch-sessions-no-expire to tell the user how many minutes the user has to start their transacting once they reach the front of the queue. This is populated in the ch-sessions-expiry tag.
<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
On plans with custom template we can display a stock value which is populated by a field on the waiting room.
You can use this to notify customers when available stock has gone, so they are not sitting in he waiting room unnecessarily.
<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
On plans that have the email me feature available.
<section class="ch-section ch-hide" id="ch-email-me"> ... </section>
This section allows you to amend your terms and conditions. These are displayed when a user enters their email address, and allows them to confirm the collection of their address.
<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>ch-priority
On some plans you have the ability to give users priority codes. This section provides a form which allows the user to submit the priority code.
The form in 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.
<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"><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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</span>
</div>
</form>
ch-footer
The footer section displays the current token of the user and the time that they last checked into the CrowdHandler api. This is useful for debugging and user queries.