Best available

Buyers say how many seats they need. SeatLayer finds the best block of seats together and holds it in one call.

Try it

Test mode

Choose how many seats: From 1 to 8
Press Find best seats: The seats are held for you
See them on the map: Release them to try again

No real money moves.Seats reset every night.

How many seats2

SeatLayer finds the best seats next to each other and holds them.

Loading the seat map

Copy this code

components/BestAvailableFlow.tsx

"use client";
import { useRef } from "react";
import { SeatingChart, type SeatingChartHandle } from "@seatlayer/react";

export function BestAvailable() {
  const chart = useRef<SeatingChartHandle>(null);

  async function findSeats(quantity: number) {
    // Finds the best block of seats together and holds it in one call.
    const found = await chart.current?.bestAvailable(quantity);
    if (!found) return showMessage("No block that size is free right now.");
    startCheckout({ holdId: found.holdId });
  }

  return (
    <>
      <button onClick={() => findSeats(2)}>Find 2 seats</button>
      <SeatingChart ref={chart} event="<YOUR_EVENT_KEY>" publicKey="pk_test_..." />
    </>
  );
}