Adding Templates : CrowdHandler Virtual Waiting Room

Note: Custom Templates are a paid plan feature.

The Templates Screen allows you to download, preview and update Custom Templates.

Changing the logo

You can use the upload logo panel to upload your logo. This will be used in all standard templates. The logo upload box supports PNGs, GIFs and JPEGs. The logo will be inserted into the template at actual size, so crop and resize your logo to suit the waiting room layout before uploading. We recommend in the region of 300 pixels for height and width.

Previewing a Template

Click on the preview icon to see how the template looks in action. You are provided with buttons to simulate various waiting room states, e.g. 'waiting', 'pre-sale'.

Download a template

You can download a standard template to see how it is constructed, or download one of your own custom templates in case you've mislaid your GitHub password.

Templates will download as zip files. You can edit the template in your favourite HTML editor, and re-upload as a custom template. CrowdHandler templates use standard HTML tags, there is no special tag format to learn or code required. CrowdHandler variables are inserted into spaces in the template using only HTML IDs. For example:

<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 this block, the content within the tags with ID #ch-message, #ch-count, #ch-wait are all replaced with the real values supplied by CrowdHandler. The defaults in the template are used whilst the connection is being established. This means that all of the language on the page either comes directly from the template, or from the content you have added to the control panel, or is numeric, making templates language-agnostic.

Upload a template

Templates can be uploaded as a file, or can be live-loaded from a URL.

Incorporating a template by URL

The key advantage of loading by URL, is that you can create the template on your own website as a plain HTML file, and once you add the URL to the control panel, any changes you make to your template will automatically update within CrowdHandler. That means that you can incorporate the template design into your website.

Even better - if you use a CMS, the URL can be a dynamic URL, which means you can content manage your waiting room page just like any other page on your site. Just make sure you're using all the right IDs and not disrupting the waiting room JavaScript.

We will cache your page content for approximately one minute, so even if thousands of users are hitting your waiting room, we'll only hit you once per minute for updates.

Uploading a template

You can upload a template directly as an attachment. Please be aware, this is HTML file only. Any external files you may use including Javascript, CSS and Images must be hosted separately on secure (https://) domains to avoid insecure content warnings.

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.

Adding Templates