Moving from seats.io means rebuilding each chart in the SeatLayer Designer, then pointing your events, holds, bookings, and webhooks at the SeatLayer API. This page covers how to build the chart and how seats.io concepts map to SeatLayer.
Build your chart in the Designer
Start a new floor plan in the dashboard and pick the fastest starting point:
- From your floor plan. Upload a PDF or picture of the venue and click each block of printed seats. See designer guides.
- From a template. Theatres, arenas, dinners, expos and more, ready to edit.
- From a file. SVG, DXF, or a SeatLayer venue file (JSON).
- From a description. Describe the room to ChatGPT, Claude, or any chat AI, then paste its venue file into the Designer and check it.
Then match your seats.io chart: sections, rows, seat labels, tables, general admission areas, and categories. Set category prices, check accessibility flags, and publish the chart.
Map seats.io concepts to SeatLayer
| seats.io | SeatLayer | Where |
|---|---|---|
| Chart | Chart. Edited as a draft, then published | Designer |
| Event | Event, created from a published chart with its own inventory | POST /v1/events |
| Category (key, label, color) | Chart category. Its key appears as categoryKey on every line item |
Pricing and offers |
| Object label | Object label, such as A-12, used in every hold, booking, and webhook |
Inventory models |
| Hold token | Hold with a holdId, created when the buyer selects seats and expiring after 15 minutes by default |
How seat holds work |
| Booking objects | POST /v1/events/:key/book with holdId and your bookingRef |
Booking |
| Releasing booked objects | POST /v1/events/:key/unbook with the bookingRef that owns them |
Cancellations and box office |
| Objects taken off sale | Blocks, optionally released at a set time | Blocking |
| Best available | POST /v1/events/:key/best-available |
Holds |
| Channels | Sales channels on one event | Sales channels |
| Seasons | Fixed Renewable Seasons | Seasons |
| Resale | Resale listings on booked seats | Resale |
| Public workspace key | Publishable key pk_test_… or pk_live_… |
Authentication |
| Secret key | Secret key sk_test_… or sk_live_… |
Authentication |
If your order records store seats.io labels, compare them with the labels in the published SeatLayer chart before you move live orders.
Replace your webhook handlers
Point the handlers that react to seat changes at these SeatLayer events:
| Your system needs to know | Subscribe to |
|---|---|
| Seats were booked | seat.booked, with bookingRef and priced items |
| Seats became free again | seat.released |
| A buyer’s hold ran out | hold.expired |
| The event sold out | event.soldout |
| An operator blocked seats | seat.blocked |
| A resale seat changed hands | object.resale.sold |
Every delivery is signed with HMAC SHA-256 and carries an occurrenceId to
deduplicate retries. See webhook events and
signature verification.
Swap the buyer SDK
Replace the seats.io chart renderer with the SeatLayer SeatingChart:
import { SeatingChart } from "@seatlayer/js";
const chart = new SeatingChart({
container: "#chart",
event: "<YOUR_EVENT_KEY>",
publicKey: "<YOUR_PUBLIC_KEY>",
onSelectionChange: renderCart,
onHold: (hold) => saveHoldId(hold),
});
await chart.render();The chart holds seats as the buyer selects them. Send the holdId to your
server, check the price there, take payment, and book with your secret key.
React, Vue, Angular, and the mobile SDKs follow the same pattern; see
choose an integration and the
SeatingChart reference.
Cut over one event at a time
- Build the chart in the Designer, set prices, and publish it.
- Create a test-mode event with a
sk_test_…key and run a full buy: select, hold, pay, book, and receiveseat.booked. - Create the live event with a
sk_live_…key. - For seats already sold elsewhere, book them in SeatLayer with their original order references using box office booking, so they are not sold twice. Each seat booked this way uses a credit, like any sale.
- Switch the buyer page to the SeatLayer chart.