Picker Overview
The end-user seat selection interface for choosing seats, areas, and tables
What is the Picker?
The Picker is the end-user interface where attendees select their seats. It renders the layout you designed and lets users browse available seats, areas, and tables — view pricing, check availability, and build their selection before proceeding.
The Picker is optimized for performance, handling layouts with 1,000+ seats smoothly at 60fps.
What Can Be Selected
The Picker supports three types of bookable entities:
Row Seats
Individual seats within a row. Click a seat to see its details and add it to your selection. If the seat has multiple pricing categories (e.g., Adult and Child), you'll be prompted to choose one.
Areas
Bookable spaces like standing sections, VIP lounges, or general admission zones. Depending on the area's configuration:
- General admission areas — select how many spots you want (up to the area's capacity)
- Private/VIP areas — book the entire area for your group
Tables
Circular or rectangular tables with seats. Tables can be configured for:
- Individual seat booking — select specific seats at the table, just like row seats
- Whole-table booking — book the entire table as one unit, specifying how many guests
How Selection Works
- Hover over a seat, area, or table to see a tooltip with its details — label, pricing, characteristics, and availability
- Click to open the pricing selector (if multiple categories) or add directly to your selection
- Your selections appear in the Selection Panel on the right (or bottom drawer on mobile)
- Click an already-selected item to remove it
- Review your total and click Proceed when ready
Navigation
- Mouse wheel or pinch gesture (mobile): zoom in/out
- Click and drag on empty space: pan around the layout
- Zoom controls: use the on-screen buttons or keyboard shortcuts (Cmd/Ctrl+Plus, Cmd/Ctrl+Minus, Cmd/Ctrl+0 to reset)
- Fit to view: the layout automatically fits the screen when first loaded
Visual Indicators
Seats and areas display visual cues about their state:
- Color coding reflects pricing categories assigned by the organizer
- Checkmark appears on selected seats
- Dimmed/grayed items are unavailable or unbookable
- Characteristic badges in tooltips show accessibility info, restricted views, and more
Next Steps
- Selection Types — detailed guide to selecting seats, areas, and tables with pricing
- Picker Features — selection panel, mobile experience, availability states, and notices