Getting Started

Seats.io is a plug-in for event registration software that simplifies interactive and mobile-friendly floor
plans for reserved seating.

Essentially, there’s three things you need to do to add an interactive seats.io floor plan to your website:

  1. Use our in-browser designer tool to draw your floor plan
  2. embed it within your web app (e.g. your registration form) with just a couple of lines of JavaScript
  3. use our REST API to book seats

The quickest place for experiments with an interactive floor plan is our demo page, where you can enter some code and directly test it for yourself.

Design your floor plan

First things first: you need to create a floor plan. To make this easy, we developed an in-browser designer tool, allowing you to just point and click, drag and drop the elements on your floor plan.
You can try it out for yourself using the online demo.

Alternatively, you can get readymade seating charts from seatingcharts.io, straight into your seats.io account!

design your floor plan

Render the floor plan

Once you have your floor plan, it’s time to start showing it to your users. Here is how it works:

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

<script src="https://cdn.seatsio.net/chart.js"></script>
<script>
new seatsio.SeatingChart({
    divId: "chart",
    publicKey: "publicDemoKey",
    event: "smallTheatreEvent2"
}).render();
</script>

Select seats

After the chart is rendered, your user can start selecting seats. There are 3 ways to retrieve the seats he selected:

1) through chart.selectedObjects, which is a JavaScript array of strings that contains the selected object labels
2) or through a hidden input field that we add to your form if you pass in the selectedObjectsInputName parameter when rendering the chart
3) or by listening to onObjectSelected and onObjectDeselected events, and keeping track of the selected objects yourself

You then need to submit the selected seats to your server, as described below.

Book seats

A seats.io floor plan is interactive: it shows the current availability for seats and other bookable objects, and it allows users to select free seats. This means that you’ll need to tell seats.io about changes in seat availability, whenever is appropriate in your sales flow, by means of an API call.

For example, you could call the seats.io API to book seats after you received confirmation of payment. Or you could pre-book some seats for VIPs before you even open up ticket sales.

And what’s more, if you change availability for a seat, we will push out this change to everyone who has the floor plan for your event open in their browser, in near real-time.

In other words: you can look at the seats on a floor plan as a collection of on/off switches, controllable via the REST API. You decide when you switch seats on and off, and by doing so, everyone who is looking at the floor plan will see the availability changes happening live.

Read more on how to change object statuses via the API here.