Creación de plantillas personalizadas
Algunos de nuestros planes te permiten crear plantillas personalizadas y, aunque es un proceso sencillo, resulta útil tener buenos conocimientos de HTML y/o CSS para sacar el máximo partido a esta función.
Empieza descargando la plantilla estándar de la sección de plantillas de admin.crowdhandler.com
El estilo básico se define en un archivo .css disponible en 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> -->
Anatomía de una
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.
Te encuentras en nuestra sala de espera virtual
En estos momentos hay mucho tráfico en nuestra página web.
```bloqueado por ch
<section class="ch-section" id="ch-blocked"><br></br> <p class="alert alert-danger" role="alert">You have been blocked due to suspicious activity</p><br></br></section>
ch-sala-llena
Aparece cuando una sala de espera ya no tiene plazas disponibles.
<section class="ch-section" id="ch-room-full"><br></br> <p class="lead">We're sorry, the waiting room is full. We will let you in if a position becomes available.</p><br></br></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.
Esta sala de espera abrirápronto
Esta sala de espera abre el
, fecha de comprobación
No es necesario actualizar esta página; se te asignará automáticamente un número aleatorio en la cola cuando se abra la sala. Los usuarios que lleguen más tarde se incorporarán al final de la cola.
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"><br></br> <div id="ch-progress" class="progress-bar progress-bar-pulse" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div><br></br></div>
ch-estimated-wait muestra cuál es el tiempo de espera estimado para el usuario. Inicialmente, se muestra un gráfico de marcador de posición, ch-estimated-placeholder, hasta que dispongamos de un tiempo de espera estimado. Normalmente, esto dura muy poco, pero si tu tasa está fijada en cero, este marcador de posición permanecerá visible durante bastante tiempo.
Las etiquetas «ch-estimated-hours» y «ch-estimated-minutes» muestran las horas y los minutos, respectivamente.
Tiempo de espera estimado:
horas
minutos
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><br></br><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><br></br>
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.
Puedes utilizar esto para avisar a los clientes cuando se haya agotado el stock disponible, para que no tengan que esperar en la sala de espera sin motivo.
<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.
Tu dirección de correo electrónico se almacenará temporalmente para avisarte cuando finalice tu sesión en la cola. Solo se utilizará para este fin y se eliminará inmediatamente después.
Para más información, consulta crowdhandler.com/privacy.
Se enviará una notificación por correo electrónico a
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 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><br></br> <div class="ch-priority-group"><br></br> <input id="ch-priority-input" type="text" class="ch-priority-input" placeholder="Enter Code" aria-label="Enter Code" /><br></br> <span class="input-group-btn"><br></br> <button id="ch-priority-btn-action" class="btn btn-default" type="submit"><span class="ch-show">Apply</span></button><br></br> </span><br></br> <span id="ch-priority-success" class="ch-icon ch-hide ch-priority-group-add-item"><br></br> <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><br></br> </span><br></br> <span id="ch-priority-error" class="ch-icon ch-hide ch-priority-group-add-item"><br></br> <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><br></br> </span><br></br> </div><br></br></form>
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.