Skip to main content

How to embed the Chart Manager

To show the chart manager to your admins or box office managers, you need to do the following:

  1. add an empty div to your page and give it an id (‘chart-manager’ is a good choice)
  2. load https://cdn-{region}.seatsio.net/chart.js
  3. create a new seatsio.ChartManager object, configure it and call its render() method

So in short: just copy & paste this code snippet and adapt it to your needs.

<div id="chart-manager"></div>

<script src="https://cdn-{region}.seatsio.net/chart.js"></script>
<script>
    new seatsio.ChartManager({
        divId: 'chart-manager',
        secretKey: 'your workspace secret key', // never expose the secret key on a public web page!
        chart: 'your chart key',
        mode: 'manageRulesets'
    }).render();
</script>

The chart.js URL depends on the region of your account:

  • https://cdn-eu.seatsio.net/chart.js (Europe)
  • https://cdn-na.seatsio.net/chart.js (North America)
  • https://cdn-sa.seatsio.net/chart.js (South America)
  • https://cdn-oc.seatsio.net/chart.js (Oceania)
A special note to Android or framework users

The easiest way to show this component is to use the official wrapper package:

Using TypeScript?
Type definitions for seats.io are available at https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/seatsio