Modèle multilingue

Modèles multilingues

Votre salle d'attente peut s'afficher automatiquement dans la langue du visiteur. Il existe un modèle multilingue prêt à l'emploi que vous n'avez qu'à sélectionner : pas besoin de le créer vous-même.

Ce guide présente le contenu de la version standard et les éléments à prendre en compte si vous souhaitez la personnaliser : ce que le modèle propose déjà, ce qui doit rester inchangé et comment vérifier que votre conception s'adapte correctement aux 63 langues.

Table des matières

Ce que vous obtenez

Le modèle multilingue correspond à la salle d'attente standard dont le texte a été traduit. Mêmes états, même mise en page, même comportement : seuls les mots changent.

Un visiteur de Berlin voit la page en allemand. Un visiteur du Caire la voit en arabe, de droite à gauche. Les dates et les heures respectent les conventions régionales propres au visiteur. Aucun réglage n'est nécessaire, que ce soit par langue ou par visiteur.

63 langues sont prises en charge : l'anglais et 62 packs de traduction.

Comment l'utiliser

Sélectionnez le modèle multilingue pour votre salle d'attente dans votre tableau de bord CrowdHandler. Et voilà : pas de balisage à modifier, pas d'étape de compilation, pas de configuration spécifique à chaque langue.

Tout ce qui se trouve ci-dessous sert à personnaliser le modèle. Si le modèle par défaut vous convient, vous avez terminé.

Créer un modèle personnalisé

Si vous disposez d'un forfait permettant d'utiliser des modèles personnalisés, téléchargez le modèle multilingue et utilisez-le comme point de départ. Ne partez pas du modèle standard pour y ajouter une traduction : la version multilingue intègre déjà toute la structure nécessaire, et la recopier à la main serait beaucoup plus fastidieux.

Deux éléments de ce fichier téléchargé sont essentiels à la traduction. Conservez-les tous les deux.

data-ch-i18n sur le <html> balise

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

C'est ce qui permet à CrowdHandler de gérer la langue de la page — en conservant <html lang> précis et réglé <html dir="rtl"> lorsque la langue du visiteur l'exige. Si on le supprime, la page cesse de s'adapter, y compris le changement de sens d'écriture de droite à gauche.

(C'est aussi une porte de secours, dans l'autre sens : un modèle personnalisé qui est délibérément monolingue, ou qui dispose de son propre sélecteur de langue, omet cet attribut et CrowdHandler ne le modifie pas.) lang ou dir (pas du tout.)

t() des appels plutôt que du texte littéral

Alors que le modèle standard contient du texte en anglais codé en dur, le modèle multilingue nécessite une chaîne traduite :

<!-- 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>

N'hésitez pas à les personnaliser, à les déplacer, à les intégrer dans votre propre code HTML — mais ne remplacez surtout pas un t() remplacez cette ligne par votre propre texte en anglais, sinon la traduction s'arrêtera à cet endroit. Si vous souhaitez une formulation différente, remplacer la chaîne de caractères pour que toutes les langues continuent de fonctionner.

Travailler avec t()

Vous en aurez besoin lorsque vous ajouterez vos propres balises ou que vous déplacerez des balises existantes. Le tableau de référence répertorie les 46 chaînes de caractères avec leur libellé en anglais.

Dans le texte :

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

Dans les attributs — liez-les, pour que rien de ce qui est en anglais ne soit laissé de côté :

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

En insérant une valeur dans la phrase :

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

Le deuxième argument remplit le {placeholders} dans la chaîne. durée estimée en minutes est « Environ {n} minutes », donc en transmettant { n: 12 } indique « Environ 12 minutes » — et l'allemand « Environ {n} minutes » permet d'obtenir le même « 12 » à la bonne place, conformément à l'ordre des mots en allemand.

Deux comportements à connaître :

  • Si la valeur n'est pas encore disponible — ch.eta est vide alors que l'heure d'arrivée prévue est masquée, par exemple : le champ de remplacement disparaît tout simplement. Vous ne verrez jamais le mot « null » s'afficher sur la page.
  • Si vous oubliez de passer une valeur, la valeur brute {n} reste visible. C'est voulu, afin qu'une valeur manquante apparaisse pendant la phase de développement plutôt qu'en production.

Appeler t() avec une clé qui n'existe pas et la page affiche le nom de la clé lui-même — vous verrez le texte tel quel titre-de-la-salle là où votre texte devrait se trouver. Pratique pour repérer les fautes de frappe.

Quelle langue s'affiche pour un visiteur ?

CrowdHandler les parcourt dans l'ordre et utilise la première pour laquelle il dispose d'une traduction :

Commande Signal
1 ?lang= dans l'URL — prime sur tout le reste, c'est ainsi que l'on effectue le test
2 La langue sélectionnée dans le navigateur ou le système d'exploitation du visiteur
3 Le site d'où ils venaient — en arrivant depuis un .de Le nom de domaine suggère l'allemand
4 Anglais

Les variantes régionales sont gérées de manière fluide. Une personne dont la langue est définie sur le portugais brésilien obtient le pack brésilien ; s’il n’en existe pas, elle obtient le portugais standard ; à défaut, l’anglais. Donc de-AT et es-AR se tourner vers l’allemand et l’espagnol plutôt que de se rabattre complètement sur l’anglais.

Si, pour une raison quelconque (une connexion instable, par exemple), la traduction ne peut pas être chargée, la page s'affiche discrètement en anglais au lieu de vous présenter une page erronée.

Langues disponibles

63 au total : la version anglaise, plus 62 packs traduits.

Langue Code
Arabe ar
azerbaïdjanais az
Bangla bn
portugais brésilien pt-BR
bulgare bg
français du Canada fr-CA
catalan ca
Chinois (simplifié) zh
Chinois (Hong Kong) zh-HK
Chinois (Taïwan) zh-TW
croate hr
tchèque cs
danois da
néerlandais nl
Anglais fr
estonien et
féroïen fo
philippin tl
finnois fi
Français fr
galicien gl
géorgien ka
Allemand de
grec el
gujarati gu
créole haïtien ht
Hébreu il
hindi Salut
hongrois hu
islandais est
Indonésien id
italien ça
Japonais ja
Kannada kn
kazakh kk
coréen ko
letton lv
lituanien lt
malayalam ml
marathi M.
Espagnol mexicain es-MX
Norvégien (Bokmål) nb
Persan / Farsi fa
polonais pl
portugais pt
pendjabi pa
roumain ro
Russe ru
Serbe (cyrillique) sr
Serbe (alphabet latin) sr-Latn
slovaque sk
slovène sl
Espagnol es
swahili sw
suédois sv
tamoul ta
télougou te
thaï e
Turc tr
ukrainien uk
ourdou ur
Vietnamien vi
gallois cy

Vous en cherchez une qui ne figure pas ici ? Contactez-nous : l'ajout d'une langue relève d'une modification effectuée par CrowdHandler, et non d'une intervention au niveau du modèle.

Langues s'écrivant de droite à gauche

L'arabe, l'hébreu, le persan et l'ourdou s'écrivent de droite à gauche. CrowdHandler définit dir="rtl" sur la page ; c'est à votre feuille de style (CSS) de reproduire la mise en page.

La feuille de style par défaut s'en charge déjà ; un modèle non modifié ne nécessite donc aucune intervention. Si vous écrivez votre propre CSS, deux bonnes pratiques vous permettront de garantir son bon fonctionnement :

Utilisez les propriétés logiques plutôt que « gauche » et « droite ». Elles s'inversent automatiquement :

/* S'inverse en fonction du sens de la page */
margin-inline-start: 1rem;
padding-inline: 2rem;
text-align: start;

/* Reste inchangé en RTL — à éviter */
margin-left: 1rem;
text-align: left;

Prévoyez une variante RTL pour les animations directionnelles. Tout élément qui se déplace visiblement dans un sens doit avoir son image miroir, à l'instar de l'effet de scintillement intégré de la barre de progression :

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

Dates et horaires

Appeler formatDate(date, format) et ne tenez pas compte des paramètres régionaux :

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

CrowdHandler choisit le format régional qui vous convient et s'adapte au visiteur plutôt qu'à la seule langue de la salle. Dans une salle anglophone, un Américain voit 14 h 30 et 27 janvier 2026 alors qu'au Royaume-Uni, quelqu'un voit 14 h 30 et 27 janvier 2026. Sur une page en français, tout le monde bénéficie d'une mise en page en français, quel que soit l'endroit d'où l'on navigue, ce qui permet à la page de rester cohérente en interne.

Conséquences pratiques pour votre conception : Ne partez pas du principe que la largeur d'une heure ou d'une date est fixe. 14 h 30 et 14 h 30 ont des longueurs nettement différentes, et certaines localisations sont encore plus longues.

Modification de la formulation

N'importe quelle chaîne de caractères peut être remplacée, dans n'importe quelle langue, y compris l'anglais. Cela nécessite un modèle personnalisé, car cela implique d'ajouter un bloc au balisage — drop window.CH_languages dans ci-dessus le 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>
  • N'indiquez que les clés que vous modifiez. Toutes les autres conservent leur traduction.
  • Votre formulation l'emporte toujours sur la traduction intégrée pour cette clé.
  • Conservez le {placeholders}. En supprimant le {time} à partir de estimation-ETA supprime discrètement l'heure de la phrase.
  • C'est la bonne façon de modifier un texte. Remplacer un t() Si vous utilisez vos propres sauts de ligne, cela perturbe l'affichage dans toutes les autres langues ; une modification permet de garantir le bon fonctionnement des 63 langues.

Toutes les chaînes que vous pouvez utiliser

46 touches. La colonne en anglais est celle que voit un visiteur s'il n'y a pas de traduction et si vous ne l'avez pas remplacée.

Captcha

Clé Anglais
message-captcha Veuillez confirmer que vous êtes bien un utilisateur humain pour continuer

Bloqué

Clé Anglais
titre-bloqué Accès refusé
description-bloquée Vous avez été bloqué en raison d'une activité suspecte.

Salle comble

Clé Anglais
titre-de-la-salle File d'attente pleine
description-complète-de-la-chambre Nous sommes complets. Vous pourrez entrer dès qu'une place se libérera.

Compte à rebours

Clé Anglais
étiquette de compte à rebours La file d'attente s'ouvre dans
compte à rebours en heures heures
compte à rebours - minutes min
compte à rebours - secondes sec
message-de-compte-à-rebours Restez sur cette page. Vous obtiendrez un numéro aléatoire dès l'ouverture de la file d'attente.

Ces trois unités de mesure sont celles qui risquent le plus de perturber la mise en page d'un compte à rebours serré : « hrs » compte 3 caractères en anglais et 8 en finnois.

Poste

Clé Anglais
étiquette de position Votre poste
enregistrement Je passe dire bonjour !
changement de place Changement de places !

enregistrement et changement de place partager un emplacement — ch.shuffling choix entre les deux, donc les deux doivent tenir dans le même espace.

Estimations

Clé Anglais
estimation - presque On y est presque !
estimation par heure Plus d'une heure
durée estimée en minutes Environ {n} minutes
estimation-ETA ETA: {time}

Code de priorité

Clé Anglais
titre-prioritaire Tu as un code prioritaire ?
priorité-placeholder Saisir le code
priorité-appliquer Postuler
priorité-réussite Code appliqué !
erreur de priorité Code non valide

Stock

Clé Anglais
stock restant nombre d'articles restants
rupture de stock Épuisé

Informations sur la session

Clé Anglais
message-d'expiration-des-sessions Laissez cette fenêtre ouverte. Vous avancerez automatiquement.
message-de-délai-d'expiration-des-sessions Vous serez redirigé(e) lorsque ce sera votre tour. Vous disposez de {n} minutes pour effectuer votre transaction.

Notification par e-mail

Clé Anglais
modification-du-titre-de-l'e-mail E-mail de notification de modification
titre-de-l'alerte-par-e-mail Recevez une notification lorsque c'est votre tour
champ d'adresse e-mail your@email.com
bouton-de-notification-par-e-mail M'avertir
bouton-d'annulation-e-mail Annuler
confirmation par e-mail Nous enverrons un e-mail à {email}
bouton-de-modification-d'adresse-e-mail Modifier
conditions d'utilisation des e-mails Votre adresse e-mail sera conservée temporairement afin de vous avertir lorsque votre session en file d'attente prendra fin. Elle ne sera utilisée qu'à cette fin et sera supprimée immédiatement après.

Pied de page

Clé Anglais
footer-id-label ID :
pied de page - copié Copié !
titre-du-pied-de-page Appuyez sur Entrée pour copier
footer-dernière-requête Dernière connexion :
pied de page - propulse par Réalisé par
footer-new-tab-sr (s'ouvre dans un nouvel onglet)

Chaînes destinées aux lecteurs d'écran

Clé Anglais
progress-aria Progression de la file d'attente
enregistrement-aria Vérification en cours
email-aria Adresse e-mail
envoi-par-e-mail-aria Envoyer
annonce-poste Poste {position}
annonce-poste-estimation Position {position}, temps d'attente estimé {estimate} minutes

Les deux annonce-* les chaînes sont générées automatiquement et se retrouvent dans ch.annonce — il vous suffit d'inclure la zone active dans votre code :

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

Tester votre modèle

Imposer une langue

Ajouter ?lang= à l'URL. Ce signal est prioritaire par rapport à tous les autres, vous n'avez donc pas besoin de modifier les paramètres de votre navigateur :

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

Sur votre ordinateur, avant de mettre en ligne

Le modèle que vous avez téléchargé est un fichier HTML autonome qui charge le script CrowdHandler hébergé ; vous pouvez donc l'ouvrir directement depuis votre bureau dans un navigateur, sans avoir besoin d'un serveur.

Il s'affiche en mode « aperçu », qui permet de gérer la salle sans file d'attente en direct. Ajouter ?lang= à l'URL du fichier local pour changer de langue, puis modifiez statut dans le données-gestion-foules bloc situé en haut du fichier pour vérifier votre traduction à chaque étape :

statut État
1 File d'attente active
3 Bloqué
4 Compte à rebours
5 Salle comble
100 Captcha

Une liste de contrôle qui vaut le coup d'être consultée

  • L'allemand et le finnois pour les mots les plus longs. Si les boutons, l'icône de stock ou les unités du compte à rebours doivent exploser, ce sera ici.
  • En arabe ou en hébreu pour les indications. Vérifiez que la mise en page correspond bien au modèle et qu'aucun élément ne se trouve du mauvais côté.
  • Le japonais ou le thaï pour le retour à la ligne et la police de secours, dont le comportement diffère de celui des alphabets latins.
  • ?lang=de-AT pour s'assurer que les codes régionaux utilisent leur langue de base plutôt que l'anglais.
  • L'horodatage du pied de page dans plusieurs langues, car sa largeur varie en fonction de la région du visiteur.