---
title: "Install the Buyer SDK"
description: "Add SeatLayer through a hosted script, browser ESM, JavaScript, React, Vue, or Angular and choose between the complete picker and headless chart."
---

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

<CardGrid>
  <Card title="SeatPicker" icon="ph:shopping-cart">
    The complete buyer experience: map, confirmation, pricing, selection tray, holds, expiry, success state, mobile layout, and optional 3D.
  </Card>
  <Card title="SeatingChart" icon="ph:map-trifold">
    The headless seating canvas. Use it when your product owns the surrounding controls and checkout UI.
  </Card>
  <Card title="PerformanceGroupPicker" icon="ph:calendar-dots">
    One accessible buyer flow that holds assigned seats across every performance in a fixed run; your Platform checkout remains external.
  </Card>
  <Card title="SeasonPicker" icon="ph:ticket">
    The released browser baseline selects exact seats for one same-seat package
    across a published 2–20-performance Plan, with package review, Seat Rights,
    and renewal support. Season Best Available and native Season pickers are not
    supported.
  </Card>
</CardGrid>

All surfaces use the same chart and live inventory model.

<Aside type="note" title="Current public browser packages">
  The current public JavaScript/TypeScript package (`@seatlayer/js`) is `0.87.0`
  (verified 11 September 2026). React, Vue, and Angular wrappers are `0.87.0`.
  Start from the official
  [`@seatlayer/js` npm package](https://www.npmjs.com/package/@seatlayer/js)
  or [source repository](https://github.com/seatlayer/seatlayer-sdk), then use
  the framework-specific package below. The browser SDK renders the venue and
  manages live selection; your application still owns its checkout and server.
</Aside>

<Aside type="note" title="Choose the audience credential">
  Public Platform events use the event's account `publicKey`. SeatLayer verifies
  the exact registered browser origin and returns a Public-only in-memory bearer,
  chart, and compact inventory status in one direct bootstrap. Login, presale,
  partner, and channel inventory use `buyerAccessTokenProvider` or
  `buyerAccessToken` from your authenticated backend instead; either explicit
  buyer credential takes precedence. Managed public/unlisted event pages retain
  anonymous event-key access.
</Aside>

<Aside type="tip" title="Building a mobile application?">
  Flutter, React Native, iOS, and Android publish independently maintained
  native packages. Compare their current catalog entries in the
  [mobile SDK guide](/buyer-sdk/mobile), then choose a
  ready-made picker, branded picker, custom native layout, or raw map.
</Aside>

## Choose an installation

<Tabs syncKey="seatlayer-install">
  <TabItem label="Script tag">
    No build tool is required. The IIFE bundle exposes the `seatlayer` global.

    ```html title="checkout.html"
    <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>
    ```
  </TabItem>
  <TabItem label="Browser ESM">
    Import the hosted module directly from a module script.

    ```html title="checkout.html"
    <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>
    ```
  </TabItem>
  <TabItem label="npm">
    Install the JavaScript package with your package manager.

    <PackageManagers pkg="@seatlayer/js@0" />

    ```js title="checkout.js"
    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();
    ```
  </TabItem>
  <TabItem label="React">
    Install the React wrapper:

    <PackageManagers pkg="@seatlayer/react@0" />

    ```tsx title="Checkout.tsx"
    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);
          }}
        />
      );
    }
    ```
  </TabItem>
</Tabs>

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

```bash
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`.

```js title="headless-chart.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](/buyer-sdk/react-seating-chart),
from install to checkout handoff.

## Container requirements

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

```css title="picker.css"
#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](https://www.npmjs.com/package/@seatlayer/js)
- React: [`@seatlayer/react` on npm](https://www.npmjs.com/package/@seatlayer/react)
- Vue: [`@seatlayer/vue` on npm](https://www.npmjs.com/package/@seatlayer/vue)
- Angular: [`@seatlayer/angular` on npm](https://www.npmjs.com/package/@seatlayer/angular)
- Shared browser source: [github.com/seatlayer/seatlayer-sdk](https://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`.

```js title="custom-origin.js"
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](/start/quickstart), or learn the [core hold and booking model](/start/how-it-works).