Customize the Buyer Seat Picker

Brand SeatPicker chrome, understand chart-versus-host precedence, and keep the buyer experience accessible.

SeatPicker combines the chart’s published theme with optional host overrides. The chart continues to paint the seating canvas; the host theme restyles the surrounding buyer interface.

Add a host theme

buyer/theme.jsjs

const picker = new seatlayer.SeatPicker({
  container: "#picker",
  event: "ev_9f3a",
  publicKey: "pk_test_…",
  theme: {
    accent: "#e5484d",
    accentInk: "#ffffff",
    background: "#0b0f1a",
    surface: "#161d2e",
    text: "#eef1f8",
    muted: "#9ba3b5",
    line: "rgba(255,255,255,.14)",
    fontFamily: "Inter, sans-serif",
    radius: 12,
    logoUrl: "https://cdn.example.com/tickets-logo.svg",
    brandName: "Example Tickets",
  },
});

await picker.render();

For a public Platform event, use a publishable key that matches the event mode (pk_test_… for test or pk_live_… for live) and register the page’s exact Embed origin. The SDK obtains Public-only access directly and keeps the grant in memory, so your server does not mint a buyer token when the chart loads. For a login, presale, partner, or channel audience, replace publicKey with an async buyerAccessTokenProvider backed by your authenticated server; an explicit provider or token takes precedence.

All theme fields are optional.

Host field	Controls	Chart fallback
`accent`	Buttons, links, active controls, hold status	`accent`
`accentInk`	Text and icons on the accent	`accentInk`
`background`	Widget shell	`background`
`surface`	Cards and panels	None
`text`	Primary chrome text	`textColor`
`muted`	Secondary chrome text	None
`line`	Dividers and borders	None
`fontFamily`	Chrome typography	`fontFamily`
`radius`	Chrome corner radius in pixels	None
`logoUrl`	Header logo	`logoUrl`
`brandName`	Brand label or monogram source	`brandName`

Host values resolve to the widget’s --sl-* CSS tokens. Do not target internal picker class names; those are implementation details and may change.

Configure the canvas in Designer

These controls belong to the chart theme and apply everywhere the chart is rendered:

Designer control	Chart field	Notes
Canvas background	`background`	Canvas only; also seeds host background
Row labels	`rowLabelColor`	Falls back to general text color
Seat numbers	`seatLabelColor`	Checked for readable contrast
Selection	`selectionColor`	Hover and selected treatment
Décor	`decorFill`	Stages and shape blocks
Other chart text	`textColor`	Text objects
Brand accent	`accent`	Also seeds buyer chrome
Label font	`fontFamily`	Canvas labels
Seat size	`seatScale`	Clamped from `0.7` to `1.6`

SeatPicker.theme does not recolor individual seats or categories. Category colors, accessible-seat treatment, and the colorblind-safe palette stay part of the chart and picker rendering contract.

Logo, brand name, and attribution

The host logo wins over the chart logo. Without a logo, the picker can derive a monogram from the host brand name, chart brand name, or event name.

The “Powered by SeatLayer” badge follows one switch: your account’s white-label add-on. When the add-on is active the badge is hidden on every chart and every event, immediately — there is nothing to tick per chart and nothing to republish. Without it the badge is shown, and no client-side option can remove it: the server applies the entitlement to the chart document it serves.

The hideBadge option is deprecated and has no effect since 0.81. It is still accepted so existing embeds keep compiling.

Accessible branding checklist

Accent text and icons retain sufficient contrast.
Category colors remain distinguishable in the colorblind-safe view.
Focus rings are visible on every themed surface.
Logos include enough clear space and do not carry essential instructions.
Layout works at 320 CSS pixels and 200% browser zoom.
Light and dark host pages do not make the embedded boundary disappear.
Meaning is never communicated by color alone.

When to use each surface

Use host theming for a complete buyer flow with cart, timer, states, 3D, and checkout handoff.

Build your own surrounding controls. The map still uses the published chart theme and does not accept a SeatPickerTheme.

Use the published chart theme. The parent cannot pass host theme overrides into the framed page.

See Customization overview, localization, and the SeatPicker reference.