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

> Documentation Index
> Fetch the complete documentation index at: https://docs.seatlayer.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Install the Buyer SDK

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.

> **Building a mobile application?**
>
> Install the public [`seatlayer`](https://pub.dev/packages/seatlayer) Flutter
> package, or review the native iOS and
> [Android](https://github.com/seatlayer/seatlayer-android) SDK previews in the
> [mobile applications guide](/buyer-sdk/mobile).

## Choose an installation

### 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.js"></script>
<script>
  const picker = new seatlayer.SeatPicker({
    container: "#picker",
    event: "ev_9f3a",
    onCheckout: (_, __, handoff) => {
      beginCheckout(handoff.holdId);
    },
  });

  picker.render();
</script>
```
### 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.mjs";

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

  await picker.render();
</script>
```
### npm

Install the JavaScript package with your package manager.

```sh
npm install @seatlayer/js@^0.30.0
pnpm add @seatlayer/js@^0.30.0
yarn add @seatlayer/js@^0.30.0
bun add @seatlayer/js@^0.30.0
```

```js title="checkout.js"
import { SeatPicker } from "@seatlayer/js";

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

await picker.render();
```
### React

Install the React wrapper:

```sh
npm install @seatlayer/react@^0.30.0
pnpm add @seatlayer/react@^0.30.0
yarn add @seatlayer/react@^0.30.0
bun add @seatlayer/react@^0.30.0
```

```tsx title="Checkout.tsx"
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`.

```js title="headless-chart.js"
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.

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

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

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

Source: https://docs.seatlayer.io/buyer-sdk/install/index.mdx