Skip to main content

4. Show the floor plan on your page

You have created a seating chart, and you've created an event for it. Great, you’re ready to show the seating chart to your users.

We made it very easy to do that for a number of frontend frameworks:

If your framework is not supported, you can embed the chart manually:

  1. add an empty div to your page and give it an id. chart is an excellent 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.SeatingChart 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"></div>
<script src="https://cdn-{region}.seatsio.net/chart.js"></script>
<script>
    new seatsio.SeatingChart({
        divId: 'chart',
        workspaceKey: 'your workspace key',
        event: 'your event key',
        session: 'continue',
        pricing: [
           {'category': 1, 'price': 30}, 
           {'category': 2, 'price': 40}, 
           {'category': 3, 'price': 50}
        ],
        priceFormatter: function(price) {
            return '$' + price;
        }
    }).render();
</script>

workspaceKey is the public workspace key, which you can find at https://app.seats.io/workspace-settings

event is the key of the event you created

The session parameter is optional, but most likely you'll want to pass it in. It enables 'hold-on-select': when a user clicks on a seat, that seat immediately becomes unavailable to other users.

This is only temporary: if you don't book the seat within 15 minutes, it gets released again.

Seats.io doesn't store pricing information. So you need to pass in prices when you show the chart to the ticket buyer. Use a combination of the pricing and priceFormatter parameters for that.