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:
- 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
- Flutter: https://github.com/seatsio/seatsio-flutter
- Android: https://github.com/seatsio/seatsio-android
- iOS: https://github.com/seatsio/seatsio-ios
If your framework is not supported, you can embed the chart manually:
Add an empty div to your page and give it an id.
chart
is an excellent choice.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)
Create a new
seatsio.SeatingChart
object, configure it, and call itsrender()
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.