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="https://cdn.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: string
Default: en

Currently supported languages are English (‘en’), Spanish (‘es’) and French (‘fr’). If you want to help us to translate the designer in an other language, please let us know!


Type: object

By passing in a features object, you can control the availability (enabled/disabled) and behaviour (read-only vs editable) of features.

Enabled vs disabled

Enabled features have a button in the toolbar, disabled features are not visible to your users.

To control which features are available to your users, you have two options: either you have all features enabled by default and disable some, or you disable all features by default and explicitly enable those you want enabled. The difference between these options is that in the former case, new features will automatically be available to your users. In the latter, new features won’t be available until you explicitly enable them.

Features that can be enabled/disabled are:

To have all features enabled by default, and disable some, you need to pass in features.disabled, like so:

 features: {
     disabled: ['focalPoint', 'backgroundImage', 'rows', 'booths', 'tables']

To have all features disabled by default, and enable just some, you use features.enabled instead, like so:

features: {
    enabled: ['rows', 'booths', 'tables', 'texts', 'sections']

Note that you need to choose one of both: features.disabled cannot be used together with features.enabled. Doing so will result in a JavaScript error.


Some features’ behaviour can be made read-only: they are visible, but not editable. These features are:

features: {
    readOnly: ['chartName', 'categoryList']

Note that features.enabled and features.disabled can be used together with features.readOnly without any problem.


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.

Chart designer functions

Below are the functions you can use to interact with an embedded floor plan designer. You can invoke these functions directly on the seatsio.SeatingChartDesigner object you created.

var designer = new seatsio.SeatingChartDesigner({...}).render();
$('#myButton').on('click', function(){


Removes the chart designer iFrame from the DOM tree, removes DOM event listeners and removes the designer from the seatsio.charts array.

Use this method instead of removing DOM elements underneath the container div directly.

Calling destroy() twice results in an error. The same goes for calling render() after the chart designer has been destroyed.