Quickstart
Install the SeatBuilder SDK and render your first seat map in under two minutes.
Quickstart
Install the SeatBuilder SDK, point it at the SeatBuilder API, and render an
interactive seat map for one of your events. Load it via a <script> tag
(no build step, no third-party CDN), install @seatbuilder/sdk from npm,
or drop in the <SeatBuilderChart> React component — pick whichever fits
your stack.
At a glance: drop https://seatbuilder.org/sdk/latest/seatbuilder.iife.min.js into a <script> tag, or npm install @seatbuilder/sdk — full snippets below.
Install and render
Drop the IIFE bundle into any HTML page. SeatBuilder serves it at
/sdk/latest/seatbuilder.iife.min.js (5-minute cache) and at a
version-pinned, immutable URL /sdk/v{X.Y.Z}/seatbuilder.iife.min.js
(1-year cache). The script exposes a global SeatBuilder with a single
render(config) entry point. For production, pin to a version
(/sdk/v4.0.0/...) so a bundle rotation can't change behaviour under
you — see Versioning.
<div id="seats-container" style="width: 800px; height: 600px;"></div>
<script src="https://seatbuilder.org/sdk/latest/seatbuilder.iife.min.js"></script>
<script>
const chart = SeatBuilder.render({
publicKey: 'pk_live_xxx',
eventKey: 'evt_xxx',
container: 'seats-container',
apiUrl: 'https://seatbuilder.org',
});
</script>Install the package and import it in your bundler-driven app (ESM, TypeScript types included).
npm install @seatbuilder/sdkimport SeatBuilder from '@seatbuilder/sdk';
const chart = SeatBuilder.render({
publicKey: 'pk_live_xxx',
eventKey: 'evt_xxx',
container: 'seats-container',
apiUrl: 'https://seatbuilder.org',
// A bare number is a total cap. For per-category caps pass an
// object, e.g. { total: 6, perCategory: { vip: 2 } } — see the
// Render a seat map recipe.
maxSelectedObjects: 4,
onObjectSelected: ({ objectLabel, holdToken }) => {
console.log('Selected', objectLabel, 'with hold', holdToken);
},
});Use the <SeatBuilderChart> component from @seatbuilder/sdk/react
(React ≥ 18). See React & Next.js for the
full recipe, including the App Router pattern and the props reference.
npm install @seatbuilder/sdk'use client';
import { SeatBuilderChart } from '@seatbuilder/sdk/react';
export function SeatMap({ eventKey }: { eventKey: string }) {
return (
<SeatBuilderChart
publicKey="pk_live_xxx"
eventKey={eventKey}
apiUrl="https://seatbuilder.org"
style={{ height: 600 }}
onObjectSelected={(e) => console.log('Selected', e.objectLabel, 'with hold', e.holdToken)}
/>
);
}Expected result
You should see the rendered seat map inside #seats-container. Free seats
respond to hover and click; selecting a seat fires onObjectSelected with
the seat label and a short-lived hold token. The chart honours the
category palette you set in the editor.
Don't worry if the screenshot above 404s in your local clone — the committed PNGs are regenerated by hand and are not a blocker for the docs site to render.
What's next
- Integration walkthrough — the full create-chart → publish → render → hold → book → webhook flow.
- Authentication — the
X-Api-Keyheader, public vs secret keys, and workspace scope. Your publishable key (pk_live_*) is seeded automatically and is ready to use above; to make server-side calls you first create a secret key (sk_live_*) from the dashboard API keys page, where it is shown exactly once. - Charts API — REST reference for managing charts programmatically.