Editing legacy templates
This template is deprecated. Update to the latest template. Full documentation for latest Custom Templates
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 Classic Template from the templates section on admin.crowdhandler.com.
Basic styling is provided from a .css file at https://wait.crowdhandler.com/css/latest/ch-main.css
Añade estilos en línea en la sección «head» de tu plantilla personalizada para anular los estilos predeterminados o incluye un enlace a un archivo .css alojado en tu propio servidor.
When editing the file locally comment out the <script> tag at the bottom of the file to disable API calls and any protocol errors.
Recuerda quitar el comentario de esta línea cuando subas tu plantilla
<!-- <script src="https://wait.crowdhandler.com/js/latest/main.js?id=ch-public-key"></script> -->
Anatomy of a Template
Las plantillas de CrowdHandler requieren que estén presentes varias secciones para que la sala de espera funcione correctamente.
These are represented by <section> tags in the Standard template and have ids that are prefixed by 'ch-'.
Son las siguientes:
ch-logo
Muestra el logotipo que se ha subido a tu cuenta.
ch-header
Muestra el título de tu sala de espera y el mensaje que hayas configurado para ella.
Se identifican mediante los identificadores «ch-title» y «ch-message», respectivamente.
<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
If captcha is enabled on your plan <div id="ch-captcha-form"></div> is populated by the selected captcha method and is required.
<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>
bloqueado por ch
Aparece cuando se ha bloqueado a un usuario por actividad sospechosa.
<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
Aparece cuando una sala de espera ya no tiene plazas disponibles.
<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
La pantalla situada delante de la sala de espera está activa si la cuenta atrás de la sala de espera está configurada para una fecha y hora anteriores a la fecha y hora de activación de la cola.
<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-activo
Se muestra cuando la sala está activa y contiene una serie de elementos importantes.
«ch-count» muestra la posición del usuario en la cola y realiza una cuenta atrás para que pueda seguir el avance de la cola.
Si aún no se ha asignado una posición, la etiqueta mostrará lo que hayas introducido en las etiquetas con el identificador «ch-count».
<h1>Position: <strong id="ch-count">estimating</strong></h1>
ch-progress muestra una barra de progreso. Hay dos tipos de barra de progreso que se pueden especificar mediante clases CSS: «progress-bar-stripes » y «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 hang around for quite some time.
Las etiquetas «ch-estimated-hours» y «ch-estimated-minutes» muestran las horas y los minutos, respectivamente.
<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>
Por último, las etiquetas «ch-sessions-expire» y «ch-sessions-no-expire» se utilizan para mostrar información adicional al usuario. Si tienes configuradas las sesiones para que no caduquen mientras se espera, utilizamos «ch-sessions-no-expire» para indicar al usuario cuántos minutos dispone para iniciar su transacción una vez que llegue al principio de la cola. Esta información se muestra en la etiqueta «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
En los planos con plantilla personalizada, podemos mostrar un valor de stock que se rellena a partir de un campo de la sala de espera.
You can use this to notify customers when available stock has gone, so they are not sitting in the 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
En los planes que incluyen la función «Enviarme un correo electrónico».
<section class="ch-section ch-hide" id="ch-email-me"> ... </section>
Esta sección te permite modificar tus términos y condiciones. Estos se muestran cuando un usuario introduce su dirección de correo electrónico y le permiten confirmar la recogida de dicha dirección.
<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>
prioridad-ch
En algunos planes, tienes la posibilidad de asignar códigos de prioridad a los usuarios. En esta sección se ofrece un formulario que permite al usuario introducir el código de prioridad.
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 sección del pie de página muestra el token actual del usuario y la hora en la que se conectó por última vez a la API de CrowdHandler. Esto resulta útil para la depuración y para responder a las consultas de los usuarios.