Einführung in Vorlagen

Schnellstart – Richten Sie innerhalb weniger Minuten einen Wartezimmerbereich mit Ihrem eigenen Branding ein.

Siehe auch: Markup und Struktur von Vorlagen | Zustand und Methoden von Vorlagen | Gestaltung und CSS-Variablen

Drei Schritte zu einem markengerechten Wartezimmer

Das Anpassen der Vorlage für den Warteraum ist ganz einfach. Öffnen Sie die HTML-Datei in einem Texteditor, ändern Sie ein paar CSS-Variablen entsprechend Ihrem Markenbild – und schon sind Sie fertig. Keine Build-Tools, keine Frameworks, die Sie erst erlernen müssen – einfach bearbeiten und aktualisieren.

1. Öffnen Sie die Vorlage

Öffnen index.html sowohl in einem Texteditor und ein Browser. Ganz oben in der Datei findest du eine <style> Block mit benutzerdefinierten CSS-Eigenschaften – diese bestimmen das gesamte Erscheinungsbild des Wartezimmers:

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

Passen Sie die Hex-Werte an Ihre Markenfarben an, speichern Sie die Änderungen und aktualisieren Sie den Browser. Das war’s schon – die Theme-Engine leitet alle anderen Farben (Textkontrast, Hover-Zustände, Rahmen, Schatten) automatisch ab.

2. Legen Sie Ihre Schriftarten fest (optional)

Um eine benutzerdefinierte Schriftart zu verwenden, fügen Sie ein @import ganz oben auf derselben Seite <style> Die Schriftartvariable blockieren und überschreiben:

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

Fügen Sie nach Ihrer benutzerdefinierten Schriftart immer System-Fallbacks ein, damit die Seite auch während des Ladens der Schriftarten korrekt angezeigt wird. Wenn Sie den @import, verfügt der Browser nicht über die Schriftartdateien und greift auf die erste verfügbare Ausweichschriftart zurück.

3. Zeigen Sie eine Vorschau Ihrer Änderungen an

Die Vorlage enthält eine <script id="crowdhandler-data"> Tag mit einem JSON-Konfigurationsobjekt. Fügen Sie Folgendes hinzu: "dev": true Um in den Vorschaumodus zu wechseln, in dem Sie jeden Warteschlangenstatus testen können, ohne eine Verbindung zur Live-API herzustellen:

<script id="crowdhandler-data" type="application/ld+json">
{
    "dev": true,
    "status": 1,
    "title": "My Event",
    "position": 150,
    "estimate": 12,
    "simulatePolling": true
}
</script>

Ändern Status um verschiedene Zustände anzuzeigen (1 = aktive Warteschlange, 3 = gesperrt, 4 = Countdown, 5 = Raum voll). Speichern und aktualisieren Sie die Seite, um jeweils eine Vorschau anzuzeigen. Entfernen „dev“ wenn Sie bereit sind, live zu gehen.

Tiefer einsteigen

Die oben genannten Schritte sind alles, was Sie für einen individuell gestalteten Warteraum benötigen. Wenn Sie die volle Kontrolle über das Layout, das Verhalten und die Funktionen haben möchten, finden Sie in den ausführlichen Anleitungen alle Informationen dazu:

  • Markup und Struktur der Vorlagen — HTML-Struktur, Vue-Direktiven, Hierarchie des Warteschlangenstatus sowie das Hinzufügen oder Entfernen von Funktionen wie E-Mail-Benachrichtigungen, Prioritätscodes und Lagerbestandsanzeigen.
  • Vue-Zustand und Methoden — Die vollständige ch Objektreferenz: Jede Eigenschaft, ihr Typ und was sie steuert. Enthält Formularmethoden und Hilfsfunktionen, die in der Vorlage verfügbar sind.
  • Styling und CSS-Variablen — Die vollständige Liste der benutzerdefinierten CSS-Eigenschaften, die Funktionsweise der zweistufigen Theme-Engine und wie man strukturelle Eigenschaften wie Abstände, Rahmenradius und die Höhe des Fortschrittsbalkens überschreibt.