Introducción a las plantillas

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

Véase también: Marcado y estructura de plantillas | Estado y métodos de Vue | Estilo y variables CSS

Tres pasos para crear una de espera con identidad de marca

Personalizar la plantilla de la sala de espera es muy sencillo. Abre el archivo HTML en un editor de texto, modifica unas cuantas variables CSS para adaptarlas a tu marca y ya está. Sin herramientas de desarrollo, sin marcos de trabajo que aprender: solo tienes que editar y actualizar.

1. Abre la

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>

Cambia los valores hexadecimales por los colores de tu marca, guarda los cambios y actualiza la página. Ya está: el motor del tema genera automáticamente el resto de colores (contraste del texto, estados al pasar el cursor, bordes y sombras).

2. Configura tus fuentes (opcional)

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. Previsualiza los

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.

Profundizando

Los pasos anteriores son todo lo que necesitas para crear una sala de espera con la imagen de tu marca. Si quieres tener un control total sobre el diseño, el funcionamiento y las funciones, las guías detalladas lo explican todo:

  • 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.
  • Referencia del modo de vista previa — Todas las propiedades de configuración de la vista previa disponibles, los escenarios predefinidos y las opciones de sondeo simuladas.