Picker Features

Selection Panel

The Selection Panel appears on the right side of the Picker (on desktop) and shows everything you've selected so far.

Header

Shows a cart icon, "Your Selection" title, and an item count (e.g., "3 items").

Selected Items

Each selected item shows:

Row seats — Row label, seat label, characteristic badges (accessible, restricted view), custom metadata, pricing category color swatch with label and price.

Table seats (individual booking) — Table label, seat label, custom metadata, pricing category and price.

Whole tables — Table label, number of people (if per-person pricing). For multi-category bookings, each category is listed with its quantity and subtotal, followed by a total line.

Areas — Area label, custom metadata. For multi-category bookings, each category shows quantity and subtotal. Single-category bookings show category, quantity multiplier, and total price.

Each item has a remove button (X) on the right side.

Footer

• Total — sum of all item prices, formatted in the layout's currency
• Proceed button — advances to the next step (disabled when selection is empty or proceeding is not allowed)
• Clear Selection — removes all items at once

If some items don't have pricing information, a note appears: "Some selected items do not have a displayed price yet."

---

Mobile Experience

On mobile devices, the Picker adapts its layout:

Bottom Drawer

The Selection Panel is presented as a bottom drawer that slides up from the bottom of the screen:

• Maximum height of 60% of the viewport
• Rounded top corners with a drag handle bar
• Tap the backdrop (dimmed area behind the drawer) to close
• Smooth 300ms slide animation

Mobile Pricing Popups

When you tap a seat, area, or table on mobile, the pricing popup renders as a centered modal (fixed position) rather than appearing next to the tapped item. This ensures the popup is always fully visible regardless of where you tapped.

---

Availability States

Items in the Picker can be in different availability states:

• Unavailable means the item has already been booked or the organizer has marked it as not available for this event.
• Unbookable means the organizer has permanently blocked this item from booking (e.g., a seat that's structurally unusable).
• No valid pricing occurs when the Picker requires pricing categories but none are assigned to the item.

---

Notices

The Selection Panel supports notice banners that the integrating application can display to communicate information to the user. There are two notice positions:

• Cart top — appears at the top of the selection list, below the header
• Before proceed — appears in the footer area, just above the Proceed button

Each notice can be styled as info, warning, error, or success, and may include:

• A title and optional description
• A dismiss button (if the notice is dismissable)
• An action button (for custom interactions)

Notices are controlled by the application embedding the Picker — they are not part of the layout configuration.

---

Smart Seating

When enabled, the picker prevents a guest from finalising a selection that would leave a single empty seat in a row. Detection runs live as the user selects — orphaned empty seats highlight on the canvas the moment the guest's selection would strand them.

Hovering a highlighted seat opens the standard seat tooltip with an explanation ("Your selection would leave this seat empty. Add it to your selection, or remove an adjacent pick, to continue.") and the usual Add-to-selection controls so the guest can fix the issue in place. The Continue / Proceed button stays disabled with a short hint until no orphans remain. There is no blocking modal.

Scope and limits:

• Row seats only. Tables and areas are not subject to the rule.
• Row ends count as walls. A single empty seat at the start or end of a row is also blocked — leaving the last seat in a row stranded next to a booking is the same problem as a mid-row gap.
• Sandwich orphans are always blocked. If the user places two of their own selections with exactly one empty seat between them, the gap is always flagged — they can avoid it by picking adjacently.
• Mixed orphans (one wall is pre-existing, the other is the user's selection) are accepted when unavoidable. If every sandwich-free placement of the same number of seats in that row would leave at least as many mixed orphans, the selection is allowed — the user couldn't have done better.
• Only the user's own selection is checked. Orphans that already existed before the user started selecting are not flagged.

How to enable:

• Hosted events: organisers toggle "Smart seating" in the event settings. Off by default.
• Cloud-hosted picker embed: pass smartSeating: true in the SDK options. The SDK option overrides the event setting.
• Self-hosted standalone: set window.SeatSquirrelConfig.smartSeating = true.
• Self-hosted iframe: pass smartSeating: true in new SeatSquirrel.StatelessPicker({ ... }) options.

---

Price Category Filter

A "Filter categories" control sits in the top-left of the canvas. Opening it reveals the pricing categories present in the current view — each with its colour swatch, label, and price, plus a checkbox. Checking one or more categories does two things: it fades every bookable that doesn't belong to a checked category to ~25% opacity, and it repaints each matching bookable in its checked category's colour — so the matching seats, tables, and areas both stand out and read in the filtered colour. This makes it easy to answer "where are the €30 seats?" at a glance.

It is a visual aid — nothing about availability, pricing, or what you can select changes:

• Dimmed objects stay fully selectable and keep their normal (primary) colour — they are just faded.
• Multiple categories can be checked (union): an object stays bright if it belongs to any checked category.
• Matching objects recolour to the checked category. A bookable can belong to several categories; while the filter is active it takes the colour of the checked category that sits highest in the list (the same order shown in the filter dropdown), even if that isn't its normal primary category.
• Selected and highlighted objects are never dimmed or recoloured (selected stays blue), and hand-picked custom colours and state styling (unavailable, accessible, restricted view) always win.

Scope and limits:

• Current view only. The list shows the categories used by bookables in the view you're looking at. At the root layout this includes the categories used inside Sections (so you can filter before drilling in); once you've drilled into a Section it shows that Section's categories. The checked filters reset when you enter or leave a Section.
• Auto-hidden when there's nothing to filter. The control only appears when the current view has two or more pricing categories. For hosted events it also hides when pricing is disabled.
• Sections reflect the filter at the root level. A Section frame fades to ~25% opacity when it contains none of the checked categories, and keeps its normal appearance when it contains at least one — the same fade applied to individual bookables, so you can see at a glance which Sections hold the price tier you're after.

How to enable:

• Hosted events: organisers toggle "Price category filter" in the event settings. On by default.
• Cloud-hosted picker embed: pass pricingCategoryFilter: true (or false) in the SDK options. The SDK option overrides the event setting.
• Self-hosted standalone: set window.SeatSquirrelConfig.ui.pricingCategoryFilter = false to hide it (shown by default).
• Self-hosted iframe: pass ui: { pricingCategoryFilter: false } in new SeatSquirrel.StatelessPicker({ ... }) options.

---

Next Steps

• Selection Types — detailed guide to selecting seats, areas, and tables
• Picker Overview — general introduction