V2 Template Preview Mode Setup

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

Preview Mode — Test every queue state locally without connecting to the live API.

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

Enabling Preview Mode

Ensure "dev": true is set in the <script id="crowdhandler-data"> JSON object in your template. The application will use these values instead of making real API calls.

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

Status Codes

The status property determines which queue state is displayed.

Properties Reference

Core

Display

Queue Position

Stock

Countdown

Features

Captcha

Session

Simulated Polling

Example Configurations

Active Queue with All Features

Position, progress, stock, email form, priority code form, and simulated polling.

{
    "dev": true,
    "status": 1,
    "title": "Summer Music Festival",
    "message": "General admission tickets",
    "logo": "https://example.com/festival-logo.png",
    "position": 247,
    "estimate": 18,
    "stock": 500,
    "emailAvailable": true,
    "priorityAvailable": true,
    "sessionsTimeout": 10,
    "simulatePolling": true,
    "positionDecrement": 8
}

Almost There

Low position triggers "Almost there!" in the progress info.

{
    "dev": true,
    "status": 1,
    "title": "Flash Sale",
    "position": 3,
    "estimate": 1,
    "progress": 98
}

Long Wait

Estimate above 60 minutes shows "More than an hour".

{
    "dev": true,
    "status": 1,
    "title": "High Demand Event",
    "position": 8500,
    "estimate": 180,
    "progress": 5
}

Countdown

Set onsale to a future ISO date. The timer counts down automatically.

{
    "dev": true,
    "status": 4,
    "title": "Exclusive Drop",
    "message": "Limited edition items",
    "onsale": "2026-06-01T09:00:00Z"
}

Blocked

{
    "dev": true,
    "status": 3,
    "title": "Event Name"
}

Room Full

{
    "dev": true,
    "status": 5,
    "title": "Popular Event",
    "message": "Please check back later"
}

Low Stock

Stock values ≤ 50 apply the low-stock styling to the badge.

{
    "dev": true,
    "status": 1,
    "title": "Limited Run",
    "position": 12,
    "estimate": 2,
    "progress": 90,
    "stock": 3
}

Sold Out

{
    "dev": true,
    "status": 1,
    "title": "Sold Out Event",
    "position": 50,
    "estimate": 5,
    "stock": 0
}

Captcha

Shows the captcha container. The widget won't be fully interactive without a valid key.

{
    "dev": true,
    "status": 100,
    "title": "Secure Event",
    "captchaRequired": true,
    "captchaType": "recaptcha",
    "captchaKeyPublic": "1234567890"
}

Testing Checklist

When developing a template, verify each of these scenarios:

Debugging

In-Template Debug Panel

Add this anywhere in your template for a floating state inspector:

<pre style="position:fixed; bottom:0; right:0; background:#000; color:#0f0;
  padding:10px; font-size:10px; max-height:300px; max-width:400px;
  overflow:auto; z-index:9999; border-radius:8px 0 0 0;">
  {{ JSON.stringify(ch, null, 2) }}
</pre>