How to embed the Event Manager

With a client library

The easiest way to show the event manager to your admins or box office managers is to use one of our client libraries:

• React: https://github.com/seatsio/seatsio-react
• Vue: https://github.com/seatsio/seatsio-vue
• Angular: https://github.com/seatsio/seatsio-angular
• React-native: https://github.com/seatsio/seatsio-react-native
• Android: https://github.com/seatsio/seatsio-android
• iOS: https://github.com/seatsio/seatsio-ios

Without a client library

If we don't offer a library for your frontend framework, you can embed a chart using plain HTML and JS.

1. add an empty div to your page and give it an id (‘event-manager’ is a good choice)

2. load chart.js from our CDN. The 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)

3. create a new seatsio.EventManager 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="event-manager"></div>

<script src="https://cdn-{region}.seatsio.net/chart.js"></script>
<script>
    new seatsio.EventManager({
        divId: 'event-manager',
        secretKey: '<your-workspace-secret-key>', // Never expose the secret key on a public web page!
        event: '<your-event-key>',
        mode: 'manageForSaleConfig' // For other modes, see "Modes" on the sidebar.
    }).render();
</script>