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 | Hidden when the entitled chart setting or host hideBadge applies |
| 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 → chart price |
| SeatLayer hold inspection and reports | Chart price snapshot |
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",
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();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 chart price or an intentional host price book, then enforce that decision on the server.
- Test color contrast, keyboard operation, reduced motion, and 200% zoom.