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>
<script>
    new seatsio.SeatingChartDesigner({
        divId: "chartDesigner",
        designerKey: "[your designer key]",
        chartKey: "[your chart key]"
    }).render();
</script>

Configuration

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

divId

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.

chartKey

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.

baseColor

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

onChartCreated

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

onChartUpdated

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.

onExitRequested

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.