Introducción a las plantillas

Inicio rápido: pon en marcha una sala de espera con tu imagen corporativa en cuestión de minutos.

See also: Template Markup & Structure | Template State & Methods | Styling & CSS Variables

Three Steps to a Branded Waiting Room

Customizing the waiting room template is straightforward. Open the HTML file in a text editor, change a few CSS variables to match your brand, and you're done. No build tools, no frameworks to learn — just edit and refresh.

1. Open the template

Abrir index.html tanto en un editor de texto y un navegador. Cerca del principio del archivo encontrarás un <style> bloque con propiedades personalizadas de CSS: estas controlan el aspecto general de la sala de espera:

<style>
  :root {
    --ch-brand-primary:    #424242;   /* Title, accent, stock pill */
    --ch-brand-secondary:  #4b4b4b;   /* Buttons, focus rings */
    --ch-bg:               #FFFFFF;   /* Page background */
    --ch-surface:          #F0F4F8;   /* Card / panel backgrounds */
    --ch-progress-color:   #004f84;   /* Progress bar colour */
  }
</style>

Change the hex values to your brand colours, save, and refresh the browser. That's it — the theme engine derives all other colors (text contrast, hover states, borders, shadows) automatically.

2. Set your fonts (optional)

Para utilizar una fuente personalizada, añade un @import en la parte superior de la misma <style> bloquear y anular la variable de fuente:

<style>
  /* Import your fonts first */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

  :root {
    --ch-font-primary: 'Inter', -apple-system, BlinkMacSystemFont,
                       'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
</style>

Incluye siempre fuentes alternativas del sistema después de tu fuente personalizada, para que la página se vea correctamente mientras se cargan las fuentes. Si te saltas el @import, el navegador no dispondrá de los archivos de fuentes y recurrirá a la primera alternativa disponible.

3. Preview your changes

La plantilla incluye un <script id="crowdhandler-data"> etiqueta con un objeto de configuración JSON. Añade "dev": true para acceder al modo de vista previa, que te permite probar todos los estados de la cola sin conectarte a la API en producción:

<script id="crowdhandler-data" type="application/ld+json">
{
    "dev": true,
    "status": 1,
    "title": "My Event",
    "position": 150,
    "estimate": 12,
    "simulatePolling": true
}
</script>

Cambiar estado para ver los distintos estados (1 = cola activa, 3 = bloqueada, 4 = cuenta atrás, 5 = sala llena). Guarda y actualiza la página para ver una vista previa de cada uno. Eliminar «dev» cuando estés listo para ponerlo en marcha.

Going Deeper

The steps above are all you need for a branded waiting room. If you want full control over the layout, behavior, and features, the detailed guides cover everything:

  • Marcado y estructura de las plantillas — Estructura HTML, directivas de Vue, jerarquía de estados de la cola y cómo añadir o eliminar funciones como notificaciones por correo electrónico, códigos de prioridad e indicadores de existencias.
  • Estado y métodos de Vue — La versión completa ch Referencia del objeto: cada propiedad, su tipo y lo que controla. Incluye los métodos del formulario y las funciones auxiliares disponibles en la plantilla.
  • Estilo y variables CSS — La lista completa de propiedades CSS personalizadas, cómo funciona el motor de temas de dos niveles y cómo anular propiedades estructurales como el espaciado, el radio de los bordes y la altura de la barra de progreso.