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 your account's region:

    • 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

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 you'll most likely 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.

The session expires 15 minutes after rendering the chart. So if you hadn't booked the seats, they get 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.