Embed a floor plan in your page
With a client library
The easiest way to show a chart is to use one of our client libraries:
- 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
- Android: https://github.com/seatsio/seatsio-android
- iOS: https://github.com/seatsio/seatsio-ios
Without a client library
If we don't offer a library for your frontend framework, you can embed a chart using plain HTML and JS.
Insert one of following scripts in your HTML page (for instance inside
<head>
) based on your account region:- Europe:
<script src="https://cdn-eu.seatsio.net/chart.js"></script>
- North America:
<script src="https://cdn-na.seatsio.net/chart.js"></script>
- South America:
<script src="https://cdn-sa.seatsio.net/chart.js"></script>
- Oceania:
<script src="https://cdn-oc.seatsio.net/chart.js"></script>
- Europe:
Add an empty element to your page to act as a container for the embed, for instance:
<div id="chart"></div>
Add the following snippet at the end of the HTML page:
<script>
new seatsio.SeatingChart({
divId: 'chart',
workspaceKey: 'PUBLIC_WORKSPACE_KEY',
event: 'EVENT_KEY'
}).render();
</script>Where:
PUBLIC_WORKSPACE_KEY
is your public workspace key, found at your accounts Workspace Settings.EVENT_KEY
is the floor plans event you want to display.
Below you will find a live example of this.