Quickstart

Install the SeatBuilder SDK, point it at the SeatBuilder API, and render an interactive seat map for one of your events. The IIFE bundle is served straight from the SeatBuilder API's /sdk/ route — no build step and no third-party CDN. (An npm package for bundler-driven projects is coming soon.)

At a glance: drop https://seatbuilder.org/sdk/latest/seatbuilder.iife.min.js into a <script> tag — SeatBuilder serves it. Full snippets below.

Install and render

<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>

// Coming soon — not yet available on npm.
import 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);
  },
});

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-Key header, 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.