Quickstart

0. Get a key

Seatpano is licensed per venue. Your API key is issued when a venue goes live under your agreement and is bound to the domains you name. It unlocks the SDK download, the venue data and the imagery; it stops working at the end of the licence term unless renewed. 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.0 (immutable, cached for a year); without v you get the current release. 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_…",
  event: "EVT123",       // enables inventory shading via the API
  theme: "flat",         // or "aerial"
});

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, views }) => {
  filterListing(section);           // your code
  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.