Modello multilingue

Modelli multilingue

La tua sala d'attesa può visualizzarsi automaticamente nella lingua del visitatore. È disponibile un modello multilingue già pronto che puoi semplicemente selezionare: non devi creare nulla.

Questa guida illustra cosa è incluso nella versione predefinita e cosa è importante sapere se si intende personalizzarla: quali sono le funzionalità già presenti nel modello, quali elementi devono rimanere invariati e come verificare che il proprio design sia compatibile con 63 lingue.

Indice

Cosa ottieni

Il modello multilingue è la sala d'attesa standard con i testi tradotti. Stessi stati, stesso layout, stesso comportamento: cambiano solo le parole.

Un visitatore proveniente da Berlino vede la pagina in tedesco. Un visitatore proveniente dal Cairo la vede in arabo, con la scrittura da destra a sinistra. Le date e gli orari seguono le convenzioni regionali del visitatore stesso. Non è necessario configurare nulla di tutto ciò per lingua o per visitatore.

Sono disponibili 63 lingue: l'inglese più 62 pacchetti tradotti.

Come utilizzarlo

Seleziona il modello multilingue per la tua sala d'attesa nella dashboard di CrowdHandler. Tutto qui: non occorre modificare alcun codice, non è necessaria alcuna fase di compilazione e non serve alcuna configurazione specifica per ogni lingua.

Tutto ciò che segue questo punto serve per la personalizzazione. Se il modello predefinito fa al caso tuo, hai finito.

Creazione di un modello personalizzato

Se disponi di un piano che consente l’uso di modelli personalizzati, scarica il modello multilingue e utilizzalo come punto di partenza. Non partire dal modello standard cercando di aggiungervi la traduzione: la versione multilingue ha già tutte le impostazioni necessarie, e copiarle manualmente è un metodo troppo lento.

Ci sono due elementi in quel file scaricato che rendono possibile la traduzione. Conservali entrambi.

data-ch-i18n sul <html> tag

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

È proprio questo che permette a CrowdHandler di gestire la lingua della pagina, mantenendo <html lang> preciso e impostazione <html dir="rtl"> quando la lingua del visitatore lo richiede. Se lo si rimuove, la pagina smette di adattarsi, compreso il ribaltamento da destra a sinistra.

(È anche una via d'uscita, nell'altro senso: un template personalizzato che è volutamente monolingue, o che dispone di un proprio selettore di lingua, omette l'attributo e CrowdHandler non lo modificherà) lang oppure dir (per niente.)

t() chiamate anziché testo letterale

Laddove nel modello standard l'inglese è hardcoded, quello multilingue richiede una stringa tradotta:

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

Modificale liberamente, spostale, inseriscile nel tuo codice HTML… ma non sostituire un t() inserisci il tuo testo in inglese, altrimenti quella riga non verrà più tradotta. Se desideri una formulazione diversa, sovrascrivere la stringa in modo che ogni lingua continui a funzionare.

Collaborare con t()

Ti servirà quando aggiungerai dei tag personalizzati o sposterai quelli esistenti. Il riferimento chiave elenca tutte le 46 stringhe con la relativa dicitura in inglese.

Nel testo:

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

Negli attributi: associarli, in modo che nulla di inglese venga tralasciato:

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

Con un valore inserito nella frase:

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

Il secondo argomento riempie il {segnaposto} nella stringa. stima-minuti è "Circa {n} minuti", quindi passando { n: 12 } indica "Circa 12 minuti" — e il tedesco "Circa {n} minuti" posiziona le stesse 12 parole nel posto giusto secondo l'ordine delle parole in tedesco.

Due comportamenti che vale la pena conoscere:

  • Se il valore non è ancora disponibile — ch.eta è vuoto mentre l'ETA è nascosta, ad esempio: il segnaposto scompare semplicemente. Non vedrai mai la parola "null" sulla pagina.
  • Se si dimentica di passare un valore, il dato grezzo {n} rimane visibile. È una scelta voluta, in modo che un valore mancante venga segnalato durante la fase di sviluppo piuttosto che in produzione.

Chiama t() con una chiave che non esiste e la pagina visualizza il nome stesso della chiave — vedrai il testo letterale titolo-della-stanza dove dovrebbe trovarsi il tuo testo. Utile per individuare eventuali errori di battitura.

Quale lingua viene visualizzata al visitatore

CrowdHandler li elabora in ordine e utilizza il primo per cui dispone di una traduzione:

Ordine Segnale
1 ?lang= nell'URL — ha la precedenza su tutto, ed è così che si verifica
2 L'impostazione della lingua del browser o del sistema operativo del visitatore
3 Il sito da cui provenivano — arrivando da un .de il dominio fa pensare al tedesco
4 Inglese

Le varianti regionali vengono gestite in modo flessibile. Chi imposta il portoghese brasiliano riceve il pacchetto brasiliano; se non fosse disponibile, riceverebbe il portoghese standard; in mancanza anche di quello, l'inglese. Quindi de-AT e es-AR concentrarsi sul tedesco e sullo spagnolo, anziché scendere fino all’inglese.

Se per qualsiasi motivo non è possibile caricare una traduzione — ad esempio a causa di una connessione instabile — la pagina viene visualizzata in inglese senza dare alcun avviso, anziché mostrare una pagina errata.

Lingue disponibili

63 in totale: l'inglese, più 62 pacchetti tradotti.

Lingua Codice
Arabo ar
azero az
Bangla bn
portoghese brasiliano pt-BR
bulgaro bg
francese canadese fr-CA
catalano ca
Cinese (semplificato) zh
Cinese (Hong Kong) zh-HK
Cinese (Taiwan) zh-TW
croato hr
Ceco cs
danese da
olandese nl
Inglese en
estone e
faroese fo
filippino tl
finlandese fi
Francese fr
galiziano gl
georgiano ka
Tedesco de
Greco el
gujarati gu
creolo haitiano ht
Ebraico lui
Hindi Ciao
ungherese hu
islandese è
Indonesiano id
italiano quello
giapponese ja
Kannada kn
kazako kk
coreano ko
lettone lv
Lituano lt
malayalam ml
marathi sig.
Spagnolo messicano es-MX
Norvegese (Bokmål) n.b.
Persiano / Farsi fa
polacco pl
Portoghese pt
punjabi pa
rumeno ro
Russo ru
Serbo (cirillico) sr
Serbo (alfabeto latino) sr-Latn
slovacco sk
sloveno sl
Spagnolo es
swahili sw
Svedese sv
Tamil ta
Telugu te
tailandese th
Turco tr
ucraino uk
Urdu ur
Vietnamita vi
gallese cy

Ne cerchi una che non è presente? Contattaci: l'aggiunta di una lingua è una modifica che va effettuata da CrowdHandler, non è qualcosa che si fa nel modello.

Lingue che si scrivono da destra a sinistra

L'arabo, l'ebraico, il persiano e l'urdu vengono visualizzati da destra a sinistra. CrowdHandler imposta dir="rtl" nella pagina; riprodurre il layout è compito dei tuoi CSS.

Il foglio di stile predefinito se ne occupa già, quindi un modello non modificato non richiede nulla. Se stai scrivendo il tuo CSS, due accorgimenti ti consentono di mantenerne il corretto funzionamento:

Usa le proprietà logiche invece di "sinistra/destra". Si invertono automaticamente:

/* Si inverte in base alla direzione di visualizzazione della pagina */
margin-inline-start: 1rem;
padding-inline: 2rem;
text-align: start;

/* Rimane fisso in RTL — da evitare */
margin-left: 1rem;
text-align: left;

Aggiungi una variante RTL alle animazioni direzionali. Qualsiasi elemento che si sposti visibilmente in una direzione necessita di un’immagine speculare, proprio come avviene per l’animazione di avanzamento integrata:

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

Date e orari

Chiama formatDate(data, formato) e non tenere conto delle impostazioni locali:

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

CrowdHandler sceglie il formato regionale più adatto a te e si adatta al visitatore anziché limitarsi alla lingua della chat. In una chat in inglese, un utente americano vede 14:30 e 27/01/2026 mentre qualcuno nel Regno Unito vede 14:30 e 27/01/2026. Su una pagina in francese, a tutti viene applicata la formattazione in francese, indipendentemente dal luogo da cui si sta navigando, in modo che la pagina mantenga la coerenza interna.

Conseguenze pratiche per il tuo progetto: Non dare per scontato che la larghezza di un'ora o di una data sia fissa. 14:30 e 14:30 hanno lunghezze notevolmente diverse, e alcune località sono ancora più lunghe.

Modifica della formulazione

È possibile sovrascrivere qualsiasi stringa, in qualsiasi lingua, compreso l'inglese. Ciò richiede un modello personalizzato, poiché comporta l'aggiunta di un blocco al codice di markup — drop window.CH_lingue in sopra lo 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>
  • Elenca solo i tasti che stai modificando. Per tutto il resto, la traduzione rimane invariata.
  • La tua formulazione è sempre migliore rispetto alla traduzione predefinita per quella chiave.
  • Conserva il {segnaposto}. Eliminando il {ora} da stima-eta rimuove silenziosamente l'ora dalla frase.
  • Questo è il modo corretto di modificare la formulazione. Sostituendo un t() Se si utilizza il proprio testo, quella riga non funziona in tutte le altre lingue; un'impostazione personalizzata garantisce il corretto funzionamento di tutte e 63.

Tutte le stringhe che puoi usare

46 tasti. La colonna in inglese è quella che vede un visitatore se non è presente alcuna traduzione e se non l'hai sovrascritta.

Captcha

Chiave Inglese
messaggio-captcha Per continuare, verifica di essere un utente umano

Bloccato

Chiave Inglese
titolo-bloccato Accesso negato
descrizione-bloccata Sei stato bloccato a causa di attività sospette.

Sala al completo

Chiave Inglese
titolo-completo-della-stanza Coda piena
descrizione-completa-della-stanza Siamo al completo. Potrai entrare non appena si libererà un posto.

Conto alla rovescia

Chiave Inglese
etichetta-conto alla rovescia La coda si apre in
conto alla rovescia - ore ore
conto alla rovescia - minuti min
conto alla rovescia - secondi sec
messaggio-conto alla rovescia Rimani su questa pagina. Ti verrà assegnata una posizione casuale all'apertura della coda.

Le tre etichette delle unità sono quelle che rischiano maggiormente di compromettere il layout di un conto alla rovescia ben strutturato: "hrs" è composta da 3 caratteri in inglese e da 8 in finlandese.

Posizione

Chiave Inglese
etichetta-posizione La tua posizione
registrazione Sono arrivato!
scambio di posizioni Cambio di posizioni!

registrazione e scambio di posizioni condividere uno slot — ch.shuffling scelte tra loro, quindi entrambe devono rientrare nello stesso spazio.

Stime

Chiave Inglese
stima - quasi Ci siamo quasi!
stima oraria Più di un’ora
stima-minuti Circa {n} minuti
stima-eta ETA: {time}

Codice di priorità

Chiave Inglese
titolo-prioritario Hai un codice prioritario?
priorità-segnaposto Inserisci il codice
priorità-applicare Candidati
priorità-successo Codice applicato!
errore di priorità Codice non valido

Scorte

Chiave Inglese
scorte rimanenti articoli rimanenti
prodotto esaurito Esaurito

Informazioni sulla sessione

Chiave Inglese
messaggio-scadenza-sessioni Tieni aperta questa finestra. Andrai avanti automaticamente.
messaggio-di-timeout-delle-sessioni Verrai reindirizzato quando sarà il tuo turno. Hai {n} minuti per completare la transazione.

Notifica via e-mail

Chiave Inglese
titolo-modifica-email E-mail di notifica delle modifiche
titolo-notifica-via-e-mail Ricevi una notifica quando è il tuo turno
segnaposto per l'indirizzo e-mail your@email.com
pulsante-di-notifica-via-e-mail Avvisami
pulsante di annullamento dell'e-mail Annulla
conferma via e-mail Invieremo un’e-mail a {email}
pulsante-modifica-email Modifica
condizioni relative alle e-mail Il tuo indirizzo e-mail verrà memorizzato temporaneamente per avvisarti al termine della tua sessione in coda. Verrà utilizzato esclusivamente a questo scopo e cancellato immediatamente dopo.

Piè di pagina

Chiave Inglese
etichetta-id-piè-di-pagina ID:
footer-copiato Copiato!
titolo del piè di pagina Premi Invio per copiare
footer-ultima-richiesta Ultimo accesso:
footer-powered-by Realizzato da
footer-new-tab-sr (si apre in una nuova scheda)

Stringhe per lettori di schermo

Chiave Inglese
progress-aria Stato della coda
check-in-aria Verifica in corso
email-aria Indirizzo e-mail
invio-via-e-mail-aria Invio
annuncio-posizione Posizione {position}
annuncio-posizione-stima Posizione {position}, tempo di attesa stimato {estimate} minuti

I due annuncio-* Le stringhe vengono generate automaticamente e vengono inserite in ch.annuncio — basta inserire la regione attiva nel codice:

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

Verifica del modello

Imposta una lingua

Aggiungi ?lang= all'URL. È più efficace di qualsiasi altro segnale, quindi non è necessario modificare le impostazioni del browser:

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

A livello locale, prima di caricare

Il modello che hai scaricato è un file HTML autonomo che carica lo script CrowdHandler ospitato, quindi puoi aprirlo direttamente dal tuo desktop in un browser, senza bisogno di un server.

Viene visualizzato in modalità anteprima, che gestisce la sala senza una coda in tempo reale. Aggiungi ?lang= all'URL del file locale per cambiare lingua e modificare stato nel crowdhandler-data blocco all'inizio del file per controllare la versione tradotta in ogni fase:

stato Stato
1 Coda attiva
3 Bloccato
4 Conto alla rovescia
5 Sala al completo
100 Captcha

Una lista di controllo che vale la pena consultare

  • Tedesco e finlandese per le parole più lunghe. Se i pulsanti, il badge delle azioni o le unità del conto alla rovescia stanno per esplodere, succederà proprio qui.
  • Arabo o ebraico per le indicazioni. Verificare che il layout rispecchi fedelmente il testo e che nulla sia finito dal lato sbagliato.
  • Giapponese o tailandese per quanto riguarda l’interruzione di riga e il fallback dei caratteri, che si comportano in modo diverso rispetto agli alfabeti latini.
  • ?lang=de-AT per verificare che, in assenza dei codici regionali, venga utilizzata la lingua di base anziché l'inglese.
  • La data e l'ora nel piè di pagina in diverse lingue, poiché la loro larghezza varia a seconda della regione del visitatore.