Install the Buyer SDK | SeatLayer Developer Docs

Add SeatLayer through a hosted script, browser ESM, npm, or React and choose between the complete picker and headless chart.

The browser SDK provides two primary surfaces:

SeatPicker

The complete buyer experience: map, confirmation, pricing, selection tray, holds, expiry, success state, mobile layout, and optional 3D.

SeatingChart

The headless seating canvas. Use it when your product owns the surrounding controls and checkout UI.

Both use the same event and live inventory model.

Choose an installation

No build tool is required. The IIFE bundle exposes the seatlayer global.

checkout.htmlhtml

<div id="picker" style="width: 100%; height: 640px"></div>

<script src="https://cdn.seatlayer.io/seatlayer-js@0/seatlayer.js"></script>
<script>
  const picker = new seatlayer.SeatPicker({
    container: "#picker",
    event: "ev_9f3a",
    onCheckout: (_, __, handoff) => {
      beginCheckout(handoff.holdId);
    },
  });

  picker.render();
</script>

Import the hosted module directly from a module script.

checkout.htmlhtml

<div id="picker" style="width: 100%; height: 640px"></div>

<script type="module">
  import {
    SeatPicker,
  } from "https://cdn.seatlayer.io/seatlayer-js@0/seatlayer.mjs";

  const picker = new SeatPicker({
    container: "#picker",
    event: "ev_9f3a",
  });

  await picker.render();
</script>

Install the JavaScript package with your package manager.

npm i @seatlayer/js@^0.30.0

yarn add @seatlayer/js@^0.30.0

pnpm add @seatlayer/js@^0.30.0

bun add @seatlayer/js@^0.30.0

checkout.jsjs

import { SeatPicker } from "@seatlayer/js";

const picker = new SeatPicker({
  container: "#picker",
  event: "ev_9f3a",
  onCheckout: (_, __, handoff) => {
    beginCheckout(handoff.holdId);
  },
});

await picker.render();

Install the React wrapper:

npm i @seatlayer/react@^0.30.0

yarn add @seatlayer/react@^0.30.0

pnpm add @seatlayer/react@^0.30.0

bun add @seatlayer/react@^0.30.0

Checkout.tsxtsx

import { SeatPicker } from "@seatlayer/react";

export function Checkout() {
  return (
    <SeatPicker
      event="ev_9f3a"
      style={{ width: "100%", height: 640 }}
      onCheckout={(_, __, handoff) => {
        beginCheckout(handoff.holdId);
      }}
    />
  );
}

Use the headless chart

The same JavaScript and React packages export SeatingChart.

headless-chart.jsjs

import { SeatingChart } from "@seatlayer/js";

const chart = new SeatingChart({
  container: "#chart",
  event: "ev_9f3a",
  onSelectionChange: (seats) => {
    updateYourSelectionUI(seats);
  },
});

await chart.render();

Choose SeatPicker unless your application has a clear reason to own selection controls, confirmation, hold timing, pricing presentation, and mobile behavior.

Container requirements

The SDK is container-responsive. Give its mount element an explicit width and height.

picker.csscss

#picker {
  width: 100%;
  height: min(720px, 75vh);
  min-height: 480px;
}

Test the actual embed container—not only the full browser viewport—at desktop and mobile widths.

Versioning

npm packages use SDK release versions such as @seatlayer/js@^0.30.0.
seatlayer-js@0/ is the rolling compatible CDN major alias.
Pin an exact CDN version only when you deliberately need a frozen asset.
The bundle names are seatlayer.js for the global build and seatlayer.mjs for ESM.

The legacy global seatmap remains an alias for compatibility. New integrations should use seatlayer.

API origin

The default API origin is https://api.seatlayer.io. Most integrations should not set apiBase.

custom-origin.jsjs

const picker = new SeatPicker({
  container: "#picker",
  event: "ev_9f3a",
  apiBase: "https://api.seatlayer.io",
});

Only override it for a SeatLayer environment you intentionally control.

Installation checklist

The package or hosted asset loads without browser errors.
The mount container has an explicit usable size.
A test event renders.
Selection changes appear immediately.
Checkout produces a holdId.
No sk_… credential exists in the client bundle.
Narrow mobile and keyboard behavior are usable.

Continue to the Quickstart, or learn the core hold and booking model.