Install the Buyer SDK

The browser SDK provides two primary single-Event surfaces and two multi-performance products:

All surfaces use the same chart and live inventory model.

Choose an installation

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

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

  picker.render();
</script>

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

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

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

  await picker.render();
</script>

npm i @seatlayer/js@0

yarn add @seatlayer/js@0

pnpm add @seatlayer/js@0

bun add @seatlayer/js@0

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

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

await picker.render();

npm i @seatlayer/react@0

yarn add @seatlayer/react@0

pnpm add @seatlayer/react@0

bun add @seatlayer/react@0

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

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

Vue and Angular package scope

@seatlayer/vue provides a native SeatingChart; @seatlayer/angular provides the native SeatLayerSeatingChartComponent. They also re-export the framework-agnostic SeatPickerWidget modal and attachPickerFrame helper from @seatlayer/js; they do not currently provide native Picker, Designer, or Manager components. Use @seatlayer/js directly when you need those full browser surfaces in a Vue or Angular application.

npm install @seatlayer/vue
npm install @seatlayer/angular

Use the headless chart

@seatlayer/js, @seatlayer/react, and @seatlayer/vue export SeatingChart. Angular exports SeatLayerSeatingChartComponent; use that component in an Angular template. The vanilla JavaScript example below uses @seatlayer/js.

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

const chart = new SeatingChart({
  container: "#chart",
  event: "ev_9f3a",
  publicKey: "pk_test_…",
  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.

Working in React? Walk through building a seating chart in React step by step, from install to checkout handoff.

Container requirements

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

#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

• Package-manager examples use the current 0.x line (@seatlayer/js@0); your lockfile records the exact release installed.
• The documentation’s seatlayer-js@0/ CDN alias follows the newest 0.x release. In production, replace it with that release’s exact version after testing so a later SDK publish cannot change your buyer flow unexpectedly.
• Update an exact CDN version deliberately after validating the newer SDK release.
• The bundle names are seatlayer-buyer.js for the global build and seatlayer-buyer.mjs for ESM. seatlayer.js and seatlayer.mjs are the same widget plus the organizer surfaces, and stay published for pages that mount them.

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

Official package destinations

Use the package that matches the application you are shipping. These are the official registry and source destinations, rather than third-party wrappers:

• JavaScript: @seatlayer/js on npm
• React: @seatlayer/react on npm
• Vue: @seatlayer/vue on npm
• Angular: @seatlayer/angular on npm
• Shared browser source: github.com/seatlayer/seatlayer-sdk

Choose the complete SeatPicker when you want a working buyer journey. Choose the headless chart only when your product is prepared to own the selection controls, confirmation, hold presentation, and recovery UI around the same live inventory.

API origin

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

const picker = new SeatPicker({
  container: "#picker",
  event: "ev_9f3a",
  publicKey: "pk_test_…",
  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.
• Public Platform embeds use publicKey; private audiences use a provider/token.
• Every bse_… bearer stays in memory, never storage or URLs.
• Narrow mobile and keyboard behavior are usable.

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