Seats.io is a collection of tools that make it easy to add reserved seating capabilities to your ticketing platform.
To embed interactive floor plans in your application, you need to take these steps:
Design your floor plan
Create an event
Render the floor plan on your page
Have your users select & book their seats
1. 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, aptly named Designer, that allows you to just point, click, drag and drop the elements on your floor plan.
Alternatively, you can get readymade seating charts from seatingcharts.io, straight into your Seats account!
There's much more to see than we could possibly explain in this simple article, so the simplest thing you can do is head over to the demo page.
2. Create an event
An event is what Seats uses to keep track of seat availability. You can create multiple events for a single seating chart. This allows you to re-use the same floor plan for multiple events, without having to go over the design process again.
You can create events either via the Seats web application (https://app.seats.io), or through the API.
An event, in seats.io speak, is always a single performance of a show, a single football match, a single concert.
3. Show the floor plan in your page
Embedding your seating chart requires a bit of coding. You'll need to:
add a <div> in which the floor plan will be rendered
include chart.js
configure and render the floor plan using a piece of javascript:
<!-- 1. the div in which the floor plan will be rendered -->
<div id="chartDiv"></div>
<!-- 2. load chart.js -->
<script src='https://cdn.seatsio.net/chart.js'></script>
<!-- 3. configure & render the floor plan -->
<script>
new seatsio.SeatingChart({
divId: "chartDiv",
publicKey: "publicDemoKey",
event: "smallTheatreEvent2"
}).render();
</script>
Note: Seats can automatically assign the best available seats too; you don't have to let your ticket buyers select their spot.
4. Let your ticket buyers select and book seats
A Seats floor plan is live and 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 about changes in seat availability, whenever is appropriate in your sales flow. For example, you could call the Seats API to book seats right before payment. Or you could pre-book some seats for VIPs before your big on-sale.
Whenever you update availability for a seat, seats.io will push this update out to every other ticket buyer that has the floor plan open for that given event. This means they'll see seats become unavailable in realtime, while it happens.
To update seat availability, you need to
pass the selected seats from your client-side to your server-side code (here's how)
from your server-side code, call the Seats API via one of its change status endpoints (typically
/book).
This does require a bit of backend programming, but we have server-side SDKs available in multiple languages (e.g. PHP, Java, python, Ruby and .NET) to make development life a bit easier. Check our Github page for the latest.