SeatLayer can feel native inside your product without forking the seating engine. Customize it in three layers: design the published chart, configure the buyer embed, and style the operator experience.
Choose the right layer
| What you want to change | Configure it in | Applies to |
|---|---|---|
| Seat, row, canvas, décor, font, and seat size | Designer chart theme | Every renderer of that published chart |
| Picker shell, buttons, panels, logo, and brand name | SeatPicker.theme |
One buyer embed |
| Language and product copy | locale and messages |
One buyer embed |
| Buyer-facing price presentation | SeatPicker.pricing |
Picker display and checkout handoff |
| Operator shell | SeatManager.theme |
One embedded control room |
Precedence at a glance
Unset values fall through to the next available source.
| Setting | Precedence |
|---|---|
| Buyer accent, background, text, font, logo, brand name | Host theme → chart theme → built-in default |
| Canvas colors, labels, décor, and seat size | Chart theme → built-in default |
| Badge visibility | Account white-label add-on only — not per chart, not a host option |
| Language | Explicit locale → stored buyer preference → browser language → English |
| Message text | Host messages → active locale → English → message key |
| Currency | Event/org data → SDK currency fallback → USD |
| Price shown and handed to host checkout | Host pricing override → event price |
| SeatLayer hold inspection and reports | Event price locked when the hold is created |
The last two rows intentionally describe different records. A host price book can control what your application shows and charges, but it does not mutate the price stored with SeatLayer’s hold.
Canvas and chrome are different
The canvas contains the seats, labels, sections, selection treatment, and décor. Its appearance comes from the published chart.
The chrome contains the picker header, side panel, buttons, cards, hold
timer, and checkout action. SeatPicker.theme can override this layer for one
mount.
const picker = new seatlayer.SeatPicker({
container: "#picker",
event: "ev_9f3a",
publicKey: "pk_test_…",
theme: {
accent: "#6d5dfc",
accentInk: "#ffffff",
surface: "#ffffff",
text: "#17151f",
fontFamily: "Inter, sans-serif",
radius: 12,
logoUrl: "https://cdn.example.com/logo.svg",
brandName: "Example Tickets",
},
locale: "en",
messages: {
"picker.holdSeats": "Continue to checkout",
},
});
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.
Hosted iframe limits
The hosted /e/:eventKey page uses the published chart theme. A parent page
cannot pass a SeatPicker.theme object across the iframe boundary. Use the
JavaScript SDK when you need per-mount branding, custom checkout, or analytics
callbacks.
Recommended setup
- Set reusable canvas and brand defaults in the Designer.
- Publish and test the chart in light, dark, narrow, and zoomed layouts.
- Add only the host overrides your product actually owns.
- Set locale and copy at the same boundary as the rest of your user preferences.
- Decide whether checkout charges the inspected event price or an intentional host price book, then enforce that decision on the server.
- Test color contrast, keyboard operation, reduced motion, and 200% zoom.