Plantilla multilingüe

Plantillas multilingües

Tu sala de espera puede mostrarse automáticamente en el idioma del visitante. Hay una plantilla multilingüe ya preparada que solo tienes que seleccionar; no hay que crear nada.

Esta guía explica qué incluye el producto tal y como viene de fábrica y qué debes saber si decides personalizarlo: qué funciones ya tiene la plantilla, qué elementos deben mantenerse intactos y cómo comprobar que tu diseño se adapta correctamente a 63 idiomas.

Índice

Lo que obtienes

La plantilla multilingüe es la sala de espera estándar con el texto traducido. Los estados, el diseño y el funcionamiento son los mismos; solo cambian las palabras.

Un visitante de Berlín ve la habitación en alemán. Un visitante de El Cairo la ve en árabe, de derecha a izquierda. Las fechas y las horas se ajustan a las convenciones regionales del propio visitante. No es necesario configurar nada de esto por idioma ni por visitante.

Se incluyen 63 idiomas: el inglés y 62 paquetes traducidos.

Cómo utilizarlo

Selecciona la plantilla multilingüe para tu sala de espera en el panel de control de CrowdHandler. Y ya está: no hay que editar ningún código, no hay que realizar ningún paso de compilación ni ninguna configuración por idioma.

Todo lo que aparece a partir de aquí sirve para personalizar el diseño. Si la plantilla predeterminada te conviene, ya has terminado.

Creación de una plantilla personalizada

En un plan que permita plantillas personalizadas, descárgate la plantilla multilingüe y utilízala como punto de partida. No empieces con la plantilla estándar e intentes añadirle la traducción: la versión multilingüe ya tiene toda la estructura necesaria, y copiarla a mano es la forma más lenta de hacerlo.

Hay dos elementos en esa descarga que hacen posible la traducción. Consérvalos ambos.

data-ch-i18n en el <html> etiqueta

<html lang="en" data-chVersion="2" data-ch-i18n>

Esto es lo que permite a CrowdHandler gestionar el idioma de la página, manteniendo <html lang> preciso y de ajuste <html dir="rtl"> cuando el idioma del visitante lo requiere. Si se elimina, la página deja de adaptarse, incluido el cambio de dirección de lectura de derecha a izquierda.

(También es la vía de escape, en sentido contrario: una plantilla personalizada que sea deliberadamente monolingüe, o una que cuente con su propio selector de idioma, omite ese atributo y CrowdHandler no la modificará) lang o dir (en absoluto.)

t() llamadas en lugar de texto literal

Mientras que en la plantilla estándar el inglés aparece codificado de forma fija, la plantilla multilingüe requiere una cadena traducida:

<!-- Standard template -->
<h2>Queue Full</h2>
<p>We're at capacity. You'll be let in when a spot opens up.</p>

<!-- Multi Language Template -->
<h2>{{ t('room-full-title') }}</h2>
<p>{{ t('room-full-description') }}</p>

Modifícalas como quieras, cámbialas de sitio, envuélvelas en tu propio código de marcado… pero no sustituyas un t() Introduce tu propio texto en inglés, o esa línea dejará de traducirse. Si quieres una redacción diferente, sobrescribir la cadena para que todos los idiomas sigan funcionando.

Trabajar con t()

Lo necesitarás cuando añadas tu propio marcado o modifiques el ya existente. La referencia clave recoge las 46 cadenas con su texto en inglés.

En el texto:

<div class="ch-position-label">{{ t('position-label') }}</div>

En los atributos: vincúlalos para que no se pierda nada de inglés:

<input :placeholder="t('email-placeholder')" :aria-label="t('email-aria')" />

Con un valor insertado en la frase:

<span>{{ t('estimate-minutes', { n: ch.estimate }) }}</span>
<span>{{ t('email-confirmation', { email: ch.email.value }) }}</span>

El segundo argumento rellena el {marcadores de posición} en la cadena. estimación-en minutos es «Aproximadamente {n} minutos», así que pasar { n: 12 } indica «Aproximadamente 12 minutos» — y el alemán «Aproximadamente {n} minutos» coloca esos mismos 12 en el orden correcto según el orden sintáctico del alemán.

Dos comportamientos que conviene conocer:

  • Si el valor aún no está listo — ch.eta está vacío mientras la hora prevista de llegada (ETA) está oculta, por ejemplo; el marcador de posición simplemente desaparece. Nunca verás la palabra «null» en la página.
  • Si te olvidas de pasar un valor, el dato sin procesar {n} permanece visible. Es algo intencionado, para que un valor que falte se detecte durante la compilación y no en el entorno de producción.

Llamar t() con una clave que no existe y la página muestra el propio nombre de la clave; verás el texto tal cual título-de-la-sala-llena donde debería estar tu texto. Es muy útil para detectar errores ortográficos.

El idioma que ve un visitante

CrowdHandler los revisa en este orden y utiliza el primero para el que disponga de traducción:

Pedido Señal
1 ?lang= en la URL: es lo que más cuenta, y así es como se comprueba
2 La configuración de idioma del navegador o del sistema operativo del visitante
3 El lugar del que procedían —llegaban desde un .de El dominio sugiere que es alemán
4 Inglés

Las variantes regionales se adaptan de forma fluida. Si alguien tiene el idioma configurado en portugués de Brasil, se le asigna el paquete brasileño; si no existiera, se le asignaría el portugués estándar; y, en su defecto, el inglés. Así que de-AT y es-AR quedar en alemán y español, en lugar de bajar directamente al inglés.

Si por cualquier motivo no se puede cargar una traducción —por ejemplo, por una conexión inestable—, la sala se muestra discretamente en inglés en lugar de mostrar una página con errores.

Idiomas disponibles

63 en total: el inglés, más 62 paquetes traducidos.

Idioma Código
Árabe ar
Azerbaiyano az
bengalí bn
Portugués de Brasil pt-BR
búlgaro bg
Francés canadiense fr-CA
catalán ca
Chino (simplificado) zh
Chino (Hong Kong) zh-HK
Chino (Taiwán) zh-TW
Croata hr
checo cs
danés da
holandés nl
Inglés es
estonio y
faroés fo
filipino tl
Finlandés fi
Francés fr
gallego gl
georgiano ka
Alemán de
Griego el
gujarati gu
criollo haitiano ht
hebreo él
hindi Hola
húngaro hu
islandés es
Indonesio id
Italiano eso
Japonés ja
Kannada kn
kazajo kk kk
Coreano ko
letón lv
lituano lt
malayalam ml
marathi Sr.
Español de México es-MX
Bokmål noruego nb
Persa / farsi fa
Polaco pl
Portugués pt
punjabi pa
rumano ro
Ruso ru
Serbio (cirílico) sr
Serbio (alfabeto latino) sr-Latn
Eslovaco sk
Esloveno sl
Español es
suaíli sw
Sueco sv
Tamil ta
Telugu te
tailandés th
Turco tr
ucraniano uk
Urdu ur
Vietnamita vi
galés cy

¿Necesitas uno que no esté aquí? Ponte en contacto con nosotros: añadir un idioma es un cambio que se realiza desde CrowdHandler, no es algo que se haga en la plantilla.

Idiomas que se escriben de derecha a izquierda

El árabe, el hebreo, el persa y el urdu se escriben de derecha a izquierda. CrowdHandler establece dir="rtl" en la página; reflejar el diseño es tarea del CSS.

La hoja de estilo predeterminada ya se encarga de ello, por lo que una plantilla sin modificar no necesita nada más. Si escribes tu propio CSS, hay dos hábitos que garantizan que siga funcionando:

Utiliza propiedades lógicas en lugar de «izquierda»/«derecha». Se invierten automáticamente:

/* Cambia según la dirección de la página */
margin-inline-start: 1rem;
padding-inline: 2rem;
text-align: start;

/* Se mantiene fijo en RTL — evitar */
margin-left: 1rem;
text-align: left;

Añade una variante RTL a las animaciones direccionales. Cualquier elemento que se desplace visiblemente en una dirección necesita su imagen especular, tal y como ocurre con el efecto de progresión integrado:

[dir="rtl"] .ch-progress-fill {
  animation-name: ch-shimmer-rtl;
}

Fechas y horarios

Llamar formatDate(fecha, formato) y no tengas en cuenta la configuración regional:

<code>{{ formatDate(ch.requested, 'toLocaleTimeString') }}</code>

CrowdHandler elige el formato regional adecuado para ti y se adapta al visitante, en lugar de limitarse únicamente al idioma de la sala. En una sala en inglés, un estadounidense ve 14:30 y 27/1/2026 mientras que alguien en el Reino Unido ve 14:30 y 27/01/2026. En una página en francés, todos los usuarios ven el formato en francés independientemente del lugar desde el que naveguen, por lo que la página mantiene su coherencia interna.

Consecuencias prácticas para tu diseño: No des por sentado que la hora o la fecha tienen una anchura fija. 14:30 y 14:30 tienen longitudes notablemente diferentes, y algunas zonas son incluso más largas.

Modificación de la redacción

Cualquier cadena se puede sobrescribir, en cualquier idioma, incluido el inglés. Para ello se necesita una plantilla personalizada, ya que implica añadir un bloque al código de marcado — soltar window.CH_languages en arriba El script «wait»:

<script>
  window.CH_languages = {
    "en": {
      "position-label": "You are number",
      "estimate-eta": "So close: {time}"
    },
    "fr": {
      "position-label": "Vous êtes numéro"
    }
  };
</script>

<script src="https://wait.crowdhandler.com/js/latest/wait.js"></script>
  • Indica únicamente las claves que vas a modificar. El resto mantiene su traducción.
  • Tu redacción siempre prevalece sobre la traducción predeterminada de esa clave.
  • Mantén el {marcadores de posición}. Eliminar el {time} de estimación-eta elimina silenciosamente la hora de la frase.
  • Esta es la forma correcta de modificar el texto. Sustituir un t() Si utilizas tus propios saltos de texto, esa línea deja de funcionar en todos los demás idiomas; una configuración de anulación hace que las 63 sigan funcionando.

Todas las cadenas que puedes utilizar

46 teclas. La columna en inglés es la que ve el visitante si no hay traducción y no la has sustituido.

Captcha

Clave Inglés
mensaje-captcha Por favor, confirma que eres una persona para continuar

Bloqueado

Clave Inglés
título-bloqueado Acceso denegado
descripción-bloqueada Te han bloqueado debido a una actividad sospechosa.

Sala llena

Clave Inglés
título-de-la-sala Cola llena
descripción-completa-de-la-habitación Estamos al completo. Podrás entrar cuando quede una plaza libre.

Cuenta atrás

Clave Inglés
etiqueta de cuenta atrás La cola se abre en
cuenta atrás en horas horas
cuenta atrás en minutos min
cuenta atrás en segundos seg
mensaje de cuenta atrás Quédate en esta página. Se te asignará un puesto aleatorio cuando se abra la cola.

Las tres etiquetas de unidad son las que más probabilidades tienen de alterar un diseño de cuenta atrás ajustado: «hrs» tiene 3 caracteres en inglés y 8 en finés.

Puesto

Clave Inglés
etiqueta de posición Tu puesto
registro de entrada ¡Ya estoy aquí!
cambio de posiciones ¡Cambio de posiciones!

registro de entrada y cambio de posiciones compartir una plaza — ch.shuffling se eligen entre ellas, por lo que ambas deben caber en el mismo espacio.

Estimaciones

Clave Inglés
estimación - casi ¡Ya casi estamos!
presupuesto por hora Más de una hora
estimación-en minutos Aproximadamente {n} minutos
estimación-eta ETA: {time}

Código de prioridad

Clave Inglés
título-prioritario ¿Tienes un código de prioridad?
marcador de prioridad Introduce el código
prioridad-aplicar Solicitar
prioridad-éxito ¡Código aplicado!
error de prioridad Código no válido

Existencias

Clave Inglés
stock-restante artículos restantes
agotado Agotado

Información sobre la sesión

Clave Inglés
mensaje-de-caducidad-de-sesiones Deja esta ventana abierta. Avanzarás automáticamente.
mensaje-de-tiempo-de-espera-de-sesión Se te redirigirá cuando sea tu turno. Tienes {n} minutos para completar tu transacción.

Notificación por correo electrónico

Clave Inglés
cambio-de-correo-electrónico-título Correo electrónico de notificación de cambios
título-de-la-notificación-por-correo-electrónico Recibe una notificación cuando sea tu turno
marcador de correo electrónico your@email.com
botón-de-notificación-por-correo-electrónico Avísame
botón-cancelar-correo-electrónico Cancelar
confirmación por correo electrónico Te enviaremos un correo electrónico a {email}
botón-cambiar-correo-electrónico Cambiar
condiciones de uso del correo electrónico 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.

Pie de página

Clave Inglés
etiqueta-id-pie-de-página ID:
pie de página - copiado ¡Copiado!
título del pie de página Pulsa Intro para copiar
pie de página - última solicitud Última conexión:
pie de página - desarrollado por Desarrollado por
pie-de-página-nueva-pestaña-sr (se abre en una pestaña nueva)

Cadenas para lectores de pantalla

Clave Inglés
progress-aria Progreso de la cola
registro-aria Comprobación en curso
email-aria Dirección de correo electrónico
envío-de-correo-electrónico-aria Enviar
anuncio-puesto Puesto {puesto}
anuncio-puesto-presupuesto Posición {position}, tiempo de espera estimado {estimate} minutos

Los dos anuncio-* Las cadenas se generan automáticamente y se almacenan en ch.anuncio — Solo necesitas incluir la región activa en tu código:

<div class="ch-sr-only" aria-live="polite" aria-atomic="true">{{ ch.announcement }}</div>

Probar tu plantilla

Establecer un idioma de forma obligatoria

Añadir ?lang= a la URL. Es más eficaz que cualquier otra señal, por lo que no hace falta que cambies la configuración de tu navegador:

https://wait.example.com/my-event?lang=de
https://wait.example.com/my-event?lang=pt-BR
https://wait.example.com/my-event?lang=ar

En tu ordenador, antes de subir el archivo

La plantilla que has descargado es un archivo HTML independiente que carga el script de CrowdHandler alojado, por lo que puedes abrirla directamente desde tu escritorio en un navegador, sin necesidad de un servidor.

Se inicia en modo de vista previa, que permite gestionar la sala sin que haya una cola activa. Añadir ?lang= a la URL del archivo local para cambiar de idioma, y modifica estado en el datos-de-gestión-de-multitudes bloque situado al principio del archivo para comprobar tu traducción en cada estado:

estado Estado
1 Cola activa
3 Bloqueado
4 Cuenta atrás
5 Sala llena
100 Captcha

Una lista de comprobación que vale la pena seguir

  • Alemán y finés para las palabras más largas. Si los botones, la insignia de las acciones o las unidades de la cuenta atrás van a reventar, será aquí.
  • Árabe o hebreo para las instrucciones. Comprueba que la maquetación refleje fielmente el contenido y que nada quede en el lado equivocado.
  • Japonés o tailandés para el salto de línea y la sustitución de fuentes, que se comportan de forma diferente a los alfabetos latinos.
  • ?lang=de-AT para confirmar que los códigos regionales recurren a su idioma base en lugar del inglés.
  • La marca de tiempo del pie de página en varios idiomas, ya que su anchura varía en función de la región del visitante.