Embed the floor plan designer

Want to show the chart designer inside your own website?
Easy - just include the following piece of JavaScript code:

<div id="chartDesigner"></div>

<script src="http://app.seats.io/chart.js"></script>
    new seatsio.SeatingChartDesigner({
        divId: "chartDesigner",
        designerKey: "[your designer key]",
        chartKey: "[your chart key]"


Here’s an overview of the options you can use when embedding the seats.io chart designer.


Type: string
the id of the div on your page in which you want seats.io to render the designer.

designerKey (required!)

Type: string
Your secret designer key. Read more below.

You can find it on your Settings page.


Type: string
An optional chart id. If you provide a chart id, the designer will load that chart and allow you to edit it.
If you don’t provide a chart key, a new chart will be created automatically.


Type: css color string
Optionally specify the baseColor, to match your own theme.
E.g. ‘baseColor’: ‘#8A2BE2’


Type: boolean
Default: false
By default, the chart designer opens the published version of a chart. So when a chart has a draft version, the published version is opened unless you pass in “openDraftDrawing: true”.

The published version of a chart is read only as long as there’s a draft version.


Type: function(chartKey)
Callback function that’s invoked when a new chart is created. Receives the newly created chart key as a parameter.


Type: function(chartKey)
Callback function that’s invoked when a chart is updated (i.e. an auto-save successfully completes). Receives the chart key as a parameter.


Type: function()
Callback function that’s invoked when the user does an action that will lead to exiting the floor plan designer. E.g. when the user clicks on the ‘Save & Exit’ button.
You could for example navigate back to an overview of all charts, using window.location = ….
When onExitRequested is not passed in, the ‘Save & Exit’ button will not be shown.

The designer key

To embed the seating chat designer in your page, you’ll need to use the designer key, not your secret key!
We decided to make a clear distinction between the two keys for security reasons:

Note that you can use either your own designer key, or the one of a user account you created through the API.

This is especially useful if you’re a ticketing company, and have many organisations using your website to sell tickets. Each organisation should be able to edit only it’s own charts.