Quickstart

0. Get a key

Your API key is issued per venue and bound to the domains you name. It unlocks the SDK download, the venue data and the imagery for those venues. Want to try first? Use the Sandbox.

1. Add the script

The SDK is served by the API to licensed keys only:

<div id="venue-map" style="--vm-accent:#1414dc"></div>
<script src="https://api.seatpano.com/v1/sdk/seatpano.global.js?key=YOUR_KEY"></script>

Pin a version with &v=0.1.15 (immutable, cached for a year); without v you get the current release, and Seatpano.version tells you which one loaded. npm access to @seatpano/sdk (private registry) is available on request for bundler-based integrations.

2. Load a venue

const map = await Seatpano.load({
  container: "#venue-map",
  venue: "united-center",
  apiBase: "https://api.seatpano.com",
  apiKey: "vm_live_…",
  product: "bulls",      // the page's event configuration: renders, geometry, surface
  event: "EVT123",       // the map fetches this event's sellable sections and shades them
});

Your API key is bound to your domains. Requests from other origins are refused, so do not send Referrer-Policy: no-referrer on pages that embed the map.

3. React to selection

map.on("select", ({ section, sections, views }) => {
  filterListing(sections ?? [section]); // your code; an area click covers several sections
  console.log(views.thumb, views.iomediaUrl);
});
map.on("deselect", () => filterListing(null));

4. Drive the map from your page

map.select("122");                  // from a "View" button on a listing card
map.setAvailability(["122", "124"]); // override what the API returned
map.openViewer("122");              // open the seat view

Full option and method list: sdk-reference.md.