Mehrsprachige Vorlage

Mehrsprachige Vorlagen

Ihr Wartezimmer kann automatisch in der Sprache des Besuchers angezeigt werden. Es gibt eine vorgefertigte mehrsprachige Vorlage, die Sie einfach auswählen können – Sie müssen nichts selbst erstellen.

Dieser Leitfaden beschreibt, was Sie direkt nach der Installation erhalten und was Sie beachten sollten, wenn Sie Anpassungen vornehmen: welche Funktionen die Vorlage bereits bietet, was unverändert bleiben muss und wie Sie überprüfen können, ob Ihr Design in 63 Sprachen einwandfrei funktioniert.

Inhaltsverzeichnis

Was Sie erhalten

Die mehrsprachige Vorlage ist die Standard-Wartezimmeransicht, deren Text übersetzt wurde. Gleiche Zustände, gleiches Layout, gleiches Verhalten – nur die Wörter ändern sich.

Ein Besucher aus Berlin sieht den Raum auf Deutsch. Ein Besucher aus Kairo sieht ihn auf Arabisch, von rechts nach links. Datums- und Zeitangaben richten sich nach den regionalen Gepflogenheiten des jeweiligen Besuchers. All dies muss weder pro Sprache noch pro Besucher konfiguriert werden.

Es werden 63 Sprachen unterstützt: Englisch sowie 62 übersetzte Sprachpakete.

Verwendung

Wählen Sie in Ihrem CrowdHandler-Dashboard die mehrsprachige Vorlage für Ihren Warteraum aus. Das war’s schon – kein Markup bearbeiten, kein Build-Schritt, keine sprachbezogene Einrichtung.

Alles unterhalb dieser Stelle dient der individuellen Anpassung. Wenn Ihnen die Standardvorlage gefällt, sind Sie fertig.

Erstellen einer benutzerdefinierten Vorlage

Wenn Ihr Tarif benutzerdefinierte Vorlagen zulässt, laden Sie die mehrsprachige Vorlage herunter und nutzen Sie diese als Ausgangspunkt. Beginnen Sie nicht mit der Standardvorlage und versuchen Sie nicht, Übersetzungen hinzuzufügen – die mehrsprachige Version verfügt bereits über die erforderlichen Verknüpfungen, und das manuelle Kopieren ist sehr zeitaufwendig.

Zwei Elemente in diesem Download sind für die Übersetzung entscheidend. Behalte beide bei.

data-ch-i18n auf der <html> Tag

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

Auf diese Weise kann CrowdHandler die Sprache der Seite verwalten – und dabei <html lang> genau und Einstellung <html dir="rtl"> wenn die Sprache des Besuchers dies erfordert. Entfernt man diesen Code, passt sich die Seite nicht mehr an, einschließlich der Umkehrung von rechts nach links.

(Das ist auch der Ausweg in die andere Richtung: Eine benutzerdefinierte Vorlage, die bewusst nur eine Sprache enthält oder über einen eigenen Sprachumschalter verfügt, lässt das Attribut weg, und CrowdHandler greift nicht darauf zu.) lang oder dir überhaupt.)

t() Aufrufe statt Literaltext

Während in der Standardvorlage „Englisch“ fest codiert ist, erfordert die mehrsprachige Vorlage eine übersetzte Zeichenfolge:

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

Gestalte diese nach Belieben um, verschiebe sie, binde sie in dein eigenes Markup ein – ersetze nur nicht ein t() Geben Sie Ihren eigenen englischen Text ein, sonst wird diese Zeile nicht mehr übersetzt. Wenn Sie einen anderen Wortlaut wünschen, die Zeichenfolge überschreiben damit stattdessen alle Sprachen weiterhin funktionieren.

Zusammenarbeit mit t()

Das benötigen Sie, wenn Sie eigene Markups hinzufügen oder vorhandene Markups verschieben. Die Schlüsselreferenz listet alle 46 Zeichenfolgen mit ihrem englischen Wortlaut auf.

Im Text:

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

In Attributen – binde sie ein, damit nichts Englisches auf der Strecke bleibt:

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

Mit einem Wert, der in den Satz eingefügt wurde:

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

Das zweite Argument füllt die {Platzhalter} in der Zeichenfolge. geschätzte-Minuten ist „Etwa {n} Minuten“, also die Übergabe von { n: 12 } gibt „Etwa 12 Minuten“ an – und die deutsche „Ungefähr {n} Minuten“ stellt die gleichen 12 an die richtige Stelle für die deutsche Wortstellung.

Zwei Verhaltensweisen, die man kennen sollte:

  • Falls der Wert noch nicht vorliegt — ch.eta ist beispielsweise leer, während die voraussichtliche Ankunftszeit ausgeblendet ist – der Platzhalter verschwindet einfach. Das Wort „null“ wird auf der Seite niemals angezeigt.
  • Wenn Sie vergessen, einen Wert zu übergeben, wird der Rohwert {n} bleibt sichtbar. Das ist beabsichtigt, damit ein fehlender Wert bereits während der Entwicklung und nicht erst in der Produktion auffällt.

Anruf t() mit einem Schlüssel, der nicht existiert, und die Seite gibt den Schlüsselnamen selbst aus – du siehst dann den Text im Originallaut Titel des Raums wo Ihr Text stehen sollte. Praktisch, um Tippfehler zu entdecken.

Welche Sprache einem Besucher angezeigt wird

CrowdHandler geht diese der Reihe nach durch und verwendet die erste, für die eine Übersetzung vorliegt:

Bestellung Signal
1 ?lang= in der URL – hat Vorrang vor allem anderen, und so testet man es
2 Die Spracheinstellung des Browsers oder des Betriebssystems des Besuchers
3 Die Seite, von der sie kamen – sie kamen von einer .de Die Domain lässt auf Deutsch schließen
4 Englisch

Regionale Varianten werden nahtlos angepasst. Wer „Brasilianisches Portugiesisch“ als Sprache eingestellt hat, erhält das brasilianische Sprachpaket; falls es kein solches gibt, erhält er Standard-Portugiesisch; und falls auch das nicht verfügbar ist, Englisch. Also de-AT und es-AR sich eher auf Deutsch und Spanisch konzentrieren, anstatt ganz auf Englisch zurückzugreifen.

Sollte eine Übersetzung aus irgendeinem Grund nicht geladen werden können – beispielsweise aufgrund einer instabilen Verbindung –, wird der Raum unauffällig auf Englisch angezeigt, anstatt eine fehlerhafte Seite zu zeigen.

Verfügbare Sprachen

Insgesamt 63: Englisch sowie 62 übersetzte Pakete.

Sprache Code
Arabisch ar
Aserbaidschanisch az
Bangla bn
brasilianisches Portugiesisch pt-BR
Bulgarisch bg
Kanadisches Französisch fr-CA
Katalanisch ca
Chinesisch (vereinfacht) zh
Chinesisch (Hongkong) zh-HK
Chinesisch (Taiwan) zh-TW
Kroatisch hr
Tschechisch cs
Dänisch da
Niederländisch nl
Englisch de
Estnisch et
Färöisch fo
Filipino tl
Finnisch fi
Französisch fr
galizisch gl
Georgisch ka
Deutsch de
Griechisch el
Gujarati gu
Haitianisches Kreolisch ht
Hebräisch er
Hindi Hallo
Ungarisch hu
Isländisch ist
Indonesisch id
Italienisch es
Japanisch ja
Kannada kn
Kasachisch kk
Koreanisch ko
Lettisch lv
Litauisch lt
Malayalam ml
Marathi Herr
Mexikanisches Spanisch es-MX
Norwegisch (Bokmål) Anmerkung
Persisch / Farsi fa
Polnisch pl
Portugiesisch pt
Punjabi pa
Rumänisch ro
Russisch ru
Serbisch (kyrillisch) sr
Serbisch (lateinische Schrift) sr-Latn
Slowakisch sk
Slowenisch sl
Spanisch es
Suaheli sw
Schwedisch sv
Tamilisch ta
Telugu te
Thailändisch th
Türkisch tr
Ukrainisch uk
Urdu ur
Vietnamesisch vi
Walisisch cy

Ist die gewünschte Sprache nicht dabei? Melden Sie sich bei uns – das Hinzufügen einer Sprache erfolgt auf CrowdHandler-Seite und nicht in der Vorlage.

Sprachen, die von rechts nach links geschrieben werden

Arabisch, Hebräisch, Persisch und Urdu werden von rechts nach links dargestellt. CrowdHandler legt fest dir="rtl" auf der Seite; die Anpassung des Layouts ist Aufgabe Ihres CSS.

Das Standard-Stylesheet kümmert sich bereits darum, sodass bei einer unveränderten Vorlage keine weiteren Maßnahmen erforderlich sind. Wenn Sie Ihr eigenes CSS schreiben, sollten Sie zwei Dinge beachten, damit es weiterhin funktioniert:

Verwenden Sie logische Eigenschaften anstelle von „links/rechts“. Diese werden automatisch gespiegelt:

/* Passt sich der Seitenausrichtung an */
margin-inline-start: 1rem;
padding-inline: 2rem;
text-align: start;

/* Bleibt bei RTL unverändert – vermeiden */
margin-left: 1rem;
text-align: left;

Fügen Sie Richtungsanimationen eine RTL-Variante hinzu. Alles, was sich sichtbar in eine Richtung bewegt, benötigt ein Spiegelbild, so wie es auch bei der integrierten Fortschrittsanzeige der Fall ist:

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

Termine und Uhrzeiten

Anruf formatDate(date, format) und die Ländereinstellung dabei außer Acht lassen:

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

CrowdHandler wählt das für Sie passende regionale Format aus und richtet sich dabei nach dem Besucher und nicht nur nach der Sprache des Raums. In einem englischsprachigen Raum sieht ein Amerikaner 14:30 Uhr und 27.01.2026 während jemand in Großbritannien sieht, dass 14:30 Uhr und 27.01.2026. Auf einer französischen Seite wird für alle Nutzer die französische Formatierung angezeigt, unabhängig davon, von wo aus sie die Seite aufrufen, sodass die Seite intern einheitlich bleibt.

Praktische Konsequenz für Ihr Design: Gehen Sie nicht von einer festen Breite für eine Uhrzeit oder ein Datum aus. 14:30 Uhr und 14:30 Uhr sind deutlich unterschiedlich lang, und manche Sprachvarianten sind sogar noch länger.

Änderung des Wortlauts

Jede Zeichenfolge kann in jeder Sprache, einschließlich Englisch, überschrieben werden. Dazu ist eine benutzerdefinierte Vorlage erforderlich, da ein Block zum Markup hinzugefügt werden muss – drop window.CH_languages in oben Das „wait“-Skript:

<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>
  • Führen Sie nur die Schlüssel auf, die Sie ändern. Alle anderen behalten ihre Übersetzung bei.
  • Deine Formulierung ist immer besser als die systemeigene Übersetzung für diesen Schlüssel.
  • Behalte die {Platzhalter}. Das Weglassen des {time} aus Schätzung-ETA entfernt die Zeitangabe stillschweigend aus dem Satz.
  • So ändert man Formulierungen richtig. Das Ersetzen eines t() Ein Aufruf mit eigenen Textumbrüchen führt in jeder anderen Sprache zu einem Zeilenumbruch; durch eine Überschreibung funktionieren alle 63 weiterhin.

Jede Zeichenkette, die du verwenden kannst

46 Tasten. Die englische Spalte ist das, was ein Besucher sieht, wenn keine Übersetzung vorliegt und Sie diese nicht überschrieben haben.

Captcha

Schlüssel Englisch
Captcha-Meldung Bitte bestätigen Sie, dass Sie ein Mensch sind, um fortzufahren

Gesperrt

Schlüssel Englisch
blockierter Titel Zugriff verweigert
blockierte-Beschreibung Sie wurden aufgrund verdächtiger Aktivitäten gesperrt.

Raum voll

Schlüssel Englisch
Titel für den gesamten Raum Warteschlange voll
Ausführliche Beschreibung des Raums Wir sind voll besetzt. Sie können hereinkommen, sobald ein Platz frei wird.

Countdown

Schlüssel Englisch
Countdown-Beschriftung Die Warteschlange öffnet sich in
Countdown-Stunden Std.
Countdown-Minuten min
Countdown-Sekunden Sek.
Countdown-Meldung Bleiben Sie auf dieser Seite. Sobald die Warteschlange geöffnet wird, erhalten Sie eine zufällige Position.

Die drei Einheitenbezeichnungen sind diejenigen, die ein enges Countdown-Layout am ehesten zerstören – „hrs“ besteht im Englischen aus 3 Zeichen und im Finnischen aus 8.

Position

Schlüssel Englisch
Positionsbezeichnung Ihre Position
Einchecken Ich melde mich an!
Positionen-Mischen Positionen werden neu gemischt!

Einchecken und Positionen-Mischen sich einen Platz teilen — Kapitel-Mischen Die Auswahl fällt auf eines von beiden, daher müssen beide in denselben Platz passen.

Schätzungen

Schlüssel Englisch
Schätzung – fast Fast geschafft!
Schätzung pro Stunde Mehr als eine Stunde
geschätzte-Minuten Etwa {n} Minuten
Schätzung-ETA ETA: {time}

Prioritätscode

Schlüssel Englisch
Prioritäts-Titel Hast du einen Prioritätscode?
Prioritäts-Platzhalter Code eingeben
Priorität anwenden Bewerben
Priorität-Erfolg Code wurde angewendet!
Prioritätsfehler Ungültiger Code

Lagerbestand

Schlüssel Englisch
Lagerbestand noch verfügbare Artikel
ausverkauft Ausverkauft

Informationen zur Sitzung

Schlüssel Englisch
Meldung zum Ablauf von Sitzungen Lassen Sie dieses Fenster geöffnet. Sie gelangen automatisch weiter.
Meldung zum Ablauf der Sitzungsdauer Sie werden weitergeleitet, sobald Sie an der Reihe sind. Sie haben {n} Minuten Zeit, um Ihre Transaktion abzuschließen.

E-Mail-Benachrichtigung

Schlüssel Englisch
E-Mail-Titel ändern E-Mail zur Änderungsbenachrichtigung
E-Mail-Benachrichtigung – Titel Lass dich benachrichtigen, wenn du an der Reihe bist
E-Mail-Platzhalter your@email.com
E-Mail-Benachrichtigungs-Schaltfläche Benachrichtigen Sie mich
E-Mail-Abmelde-Schaltfläche Abbrechen
E-Mail-Bestätigung Wir senden eine E-Mail an {email}
E-Mail-ändern-Schaltfläche Ändern
E-Mail-Bedingungen Ihre E-Mail-Adresse wird vorübergehend gespeichert, um Sie zu benachrichtigen, wenn Ihre Warteschlangensitzung endet. Sie wird ausschließlich zu diesem Zweck verwendet und anschließend umgehend gelöscht.

Fußzeile

Schlüssel Englisch
Fußzeilen-ID-Bezeichnung ID:
Fußzeile – kopiert Kopiert!
Titel der Fußzeile Drücken Sie die Eingabetaste, um den Text zu kopieren
Fußzeile – Letzte Anfrage Letzter Check-in:
Fußzeile – bereitgestellt von Unterstützt von
footer-new-tab-sr (wird in einem neuen Tab geöffnet)

Texte für Bildschirmleseprogramme

Schlüssel Englisch
progress-aria Fortschritt in der Warteschlange
Check-in-ARIA Überprüfung läuft
E-Mail-ARIA E-Mail-Adresse
E-Mail-Übermittlung-ARIA Einreichen
Stellenausschreibung Position {position}
Bekanntmachung – Positionsschätzung Position {position}, voraussichtliche Wartezeit {estimate} Minuten

Die beiden Ankündigung-* Die Zeichenfolgen werden für Sie erstellt und landen in ch.ankündigung — du brauchst lediglich den Live-Bereich in deinem Markup:

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

Testen Ihrer Vorlage

Eine Sprache vorschreiben

Hinzufügen ?lang= zur URL. Es ist allen anderen Signalen überlegen, sodass Sie Ihre Browsereinstellungen nicht ändern müssen:

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

Lokal, bevor Sie die Datei hochladen

Die von Ihnen heruntergeladene Vorlage ist eine eigenständige HTML-Datei, die das gehostete CrowdHandler-Skript lädt, sodass Sie sie direkt von Ihrem Desktop aus in einem Browser öffnen können – ganz ohne Server.

Es wird im Vorschaumodus gestartet, in dem der Raum ohne Live-Warteschlange betrieben wird. Hinzufügen ?lang= zur URL der lokalen Datei, um die Sprache zu wechseln, und ändern Sie Status in der crowdhandler-data Block am Anfang der Datei, um Ihre übersetzte Fassung in jedem Status zu überprüfen:

Status Bundesland
1 Aktive Warteschlange
3 Gesperrt
4 Countdown
5 Raum voll
100 Captcha

Eine Checkliste, die es sich lohnt, durchzugehen

  • Deutsch und Finnisch bei den längsten Wörtern. Wenn Schaltflächen, das Aktienabzeichen oder die Countdown-Einheiten platzen sollten, dann wird es hier passieren.
  • Arabisch oder Hebräisch für die Ausrichtung. Vergewissern Sie sich, dass das Layout originalgetreu wiedergegeben wird und nichts auf der falschen Seite landet.
  • Japanisch oder Thailändisch hinsichtlich Zeilenumbruch und Schriftart-Fallback, da sich diese Sprachen anders verhalten als lateinische Schriften.
  • ?lang=de-AT um sicherzustellen, dass bei regionalen Codes auf die Basissprache statt auf Englisch zurückgegriffen wird.
  • Der Zeitstempel in der Fußzeile in mehreren Sprachen, da sich seine Breite je nach Region des Besuchers ändert.