Quickstart

Install the SeatBuilder SDK, point it at your self-hosted API, and render an interactive seat map for one of your events. Two paths are supported: load the IIFE bundle from a CDN (no build step) or install the npm package (bundler-friendly, types included).

At a glance: drop https://cdn.jsdelivr.net/npm/@seats/sdk@2/dist/index.iife.min.js into a <script> tag, or run npm install @seats/sdk in a bundler-driven project. Full snippets below.

Install and render

<div id="seats-container" style="width: 800px; height: 600px;"></div>

<script src="https://cdn.jsdelivr.net/npm/@seats/sdk@2/dist/index.iife.min.js"></script>
<script>
  const chart = SeatsIO.render({
    publicKey: 'pk_live_xxx',
    eventKey: 'evt_xxx',
    container: 'seats-container',
    apiUrl: 'https://api.your-host.example',
  });
</script>

npm install @seats/sdk

import SeatsIO from '@seats/sdk';

const chart = SeatsIO.render({
  publicKey: 'pk_live_xxx',
  eventKey: 'evt_xxx',
  container: 'seats-container',
  apiUrl: 'https://api.your-host.example',
  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.
• Charts API — REST reference for managing charts programmatically.