Render a seat map

The smallest useful Seats integration is two steps: drop a <div> container into your page and call SeatsIO.render with your public key, the event key, and the container id.

1. Add a container

Reserve a sized region of the page for the chart. The SDK fills the container — give it explicit width and height (or constrain it with flex / grid) so Konva can compute the canvas viewport.

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

2. Call render

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);
  },
});

Every option except publicKey, eventKey, and container has a sensible default. apiUrl defaults to the same origin as the page in a typical SSR / proxy setup, but most self-hosted deployments set it explicitly to the API host.

What you get

The rendered chart is interactive out of the box:

• Free seats highlight on hover.
• Click on a free seat fires onObjectSelected with the seat label and a short-lived holdToken. Stash the token — you'll need it to promote the hold to a booking server-side.
• Held / booked seats are not selectable and visually dim.
• maxSelectedObjects caps the buyer's selection; the SDK rejects clicks beyond the cap and surfaces a toast.

The full e-commerce variant — adding-to-cart, confirming at checkout, recovering from expired holds — is documented in Hold seats and confirm at checkout.

Callbacks reference

onObjectSelected fires once per seat. To track the whole selection, listen for onSelectionValid — it fires on every change and hands you the complete array of currently-held labels.

const chart = SeatsIO.render({
  publicKey: 'pk_live_xxx',
  eventKey: 'evt_xxx',
  container: 'seats-container',
  apiUrl: 'https://api.your-host.example',
  maxSelectedObjects: 4,
  onSelectionValid: ({ selectedObjectLabels }) => {
    // The complete current selection, e.g. ['A-12', 'A-13'].
    console.log('Selected so far:', selectedObjectLabels);
  },
  onSelectionInvalid: ({ reason }) => {
    if (reason === 'hold_expired') promptReselect();
  },
});

Configuration reference

Instance API

SeatsIO.render() returns a ChartInstance for imperative control: