Introduction to Templates

Quick Start — Get a branded waiting room running in minutes.

See also: Template Markup & Structure | Vue State & Methods | Styling & CSS Variables

Three Steps to a Branded Waiting Room

Customising the waiting room template is straightforward. Open the HTML file in a text editor, change a few CSS variables to match your brand, and you're done. No build tools, no frameworks to learn — just edit and refresh.

1. Open the template

Open index.html in both a text editor and a browser. Near the top of the file you'll find a <style> block with CSS custom properties — these control the entire look of the waiting room:

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

Change the hex values to your brand colours, save, and refresh the browser. That's it — the theme engine derives all other colours (text contrast, hover states, borders, shadows) automatically.

2. Set your fonts (optional)

To use a custom font, add an @import at the top of the same <style> block and override the font variable:

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

Always include system fallbacks after your custom font so the page looks right while fonts load. If you skip the @import, the browser won't have the font files and will fall through to the first available fallback.

3. Preview your changes

The template includes a <script id="crowdhandler-data"> tag with a JSON configuration object. Add "dev": true to enter preview mode, which lets you test every queue state without connecting to the live API:

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

Change status to see different states (1 = active queue, 3 = blocked, 4 = countdown, 5 = room full). Save and refresh to preview each one. Remove "dev" when you're ready to go live.

Going Deeper

The steps above are all you need for a branded waiting room. If you want full control over the layout, behaviour, and features, the detailed guides cover everything:

  • Template Markup & Structure — HTML structure, Vue directives, queue state hierarchy, and how to add or remove features like email notifications, priority codes, and stock indicators.
  • Vue State & Methods — The complete ch object reference: every property, its type, and what it controls. Includes form methods and helper functions available in the template.
  • Styling & CSS Variables — The full list of CSS custom properties, how the two-tier theme engine works, and how to override structural properties like spacing, border-radius, and progress bar height.
  • Preview Mode Reference — All available preview configuration properties, preset scenarios, and simulated polling options.