Quickstart: your own button (core)

Mode A. Your page has a seat map and a button (or a seat click); our script shows the view from that seat, in our own dialog or in an element you choose.

1. Load the script

<script src="https://assets.seatpreevue.com/sdk/v1/seatpreevue-core.js" crossorigin="anonymous"></script>

It defines window.SeatPreevue. /sdk/v1/ is always the latest release; to pin one, use /sdk/v<version>/ with its integrity hash from the changelog.

Or as an ES module

The same SDK, with the same names as named exports and no global (from 1.0.0-alpha.22). Pin a version, and give its integrity hash (from the changelog) on a modulepreload link, which also starts the download early:

<link rel="modulepreload" crossorigin="anonymous"
      href="https://assets.seatpreevue.com/sdk/v1.0.0-alpha.22/seatpreevue-core-esm.js"
      integrity="sha384-…" />
<script type="module">
  import { init, show } from 'https://assets.seatpreevue.com/sdk/v1.0.0-alpha.22/seatpreevue-core-esm.js';
  init({ key: 'pk_live_…', context: { venueRef: 'your-venue' } });
  seatButton.addEventListener('click', () => show(document.body, 'dress-circle-e-20'));
</script>

Load one or the other on a page, not both: each makes its own session.

2. Start a session

<script>
  SeatPreevue.init({
    key: 'pk_live_…',              // or leave it out once we've registered your domain
    context: { venueRef: 'your-venue' },
  });
</script>

• key: your publishable key. Without one, the session is keyless: it works only from a domain we've registered for you.
• context: what your page knows about the venue and the performance. venueRef is the venue reference we agree with you; add platform and the facts your platform has (for example attributes, sections, mapId), and we use them to choose the right imagery for each layout. It can also be a function, called before each view, if those facts change on the page.
• locale: your visitors' language, as a tag such as 'cy-GB', for the words our dialog shows. Leave it out to use the venue's.
• onReady(session): called once the session is ready (an error in it is ignored).
• consent: true only once the visitor has agreed to analytics storage on your site; otherwise nothing is kept between pages.

init returns a promise; you don't need to wait for it before calling show.

3. Show a seat

In our dialog: pass the page itself as the target.

seatButton.addEventListener('click', () => {
  SeatPreevue.show(document.body, { tokens: { section: 'Dress Circle', row: 'E', seat: '20' } });
});

The dialog is a modal over your page, titled with the seat ("View from seat Dress Circle E20"). It shows a loading state, "No view for this seat yet." when there's none, and "Try again" when it fails; its close button, Escape and a click outside close it, and focus goes back where it was. Here show never rejects: the dialog says what happened, and the events below still fire.

In your own element: pass the element (or its id).

const container = document.getElementById('seat-view');
seatButton.addEventListener('click', () => {
  SeatPreevue.show(container, { tokens: { section: 'Dress Circle', row: 'E', seat: '20' } });
});

The view fills the element, which you size (16:9 suits it). The element may be on the page later than the call: it's looked up when the view is drawn. Here show rejects when there's no view or it fails, with a SeatPreevueError (see errors), so show your own message.

{ inline: false } uses the dialog for any target; { inline: true } always draws in the target.

A seat can be given as:

• { tokens: { section, row, seat } } (and area, zone, label… as your platform names them), which we turn into our seat key with the venue's rules;
• a seat key string, 'dress-circle-e-20', when you already have ours;
• { namedView: 'stage-left' }, for a named view (a box, a bench) from SeatPreevue.namedViews().

SeatPreevue.close() closes the view (and the dialog). show returns a handle with destroy().

4. Optional: react to what happened

SeatPreevue.on('load', (e) => { /* the view is showing */ });
SeatPreevue.on('unavailable', (e) => { /* no view for this seat */ });
SeatPreevue.on('error', (e) => { /* couldn't load it */ });
SeatPreevue.on('close', (e) => { /* closed */ });

5. Optional: ask about a seat without showing it

const url = await SeatPreevue.previewUrl(seat);           // a signed preview image, or null
const has = await SeatPreevue.isAvailable(seat);          // true when our manifest lists a view for the seat
const { key, candidates, matched } =
  await SeatPreevue.resolveSeatKey({ section: 'Dress Circle', row: 'E', seat: '20' });

Use previewUrl for a thumbnail on hover, and isAvailable to hide a button for seats with no view. "No view" is an answer (null, false, a null key), never an error; they reject only when the service can't be reached or refuses your page. A seat asked about and then shown is one request. await SeatPreevue.resolve(seat) gives the whole answer, { matched, key, previewUrl, … }, and rejects for a seat with no view.

6. Register your domain and check

Send us the address of a page that will show views (live and staging). Then open it, click a seat, and check the Network tab: seatpreevue-core.js from assets.seatpreevue.com, a POST to connect.seatpreevue.com/v1/sessions answering 201, and images from assets.seatpreevue.com/v/….

If your page has a Content Security Policy, see CSP: our dialog adds its styles as one <style> element.