This feature is currently in beta. Documentation for Version 1 templates is here

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. 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. Ensure "dev": true to enable preview mode. This 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,
    "onsale":"2026-03-13T16:00:00Z",
    "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.

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 & Testing — 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.
  • Styling & CSS Variables — The full list of CSS custom properties and how to override style properties.