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>
<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.

language

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!

features

Type: object
By passing in a ‘features’ object, you can control which features are enabled, disabled or read-only.

features.enabled

features: {
    enabled: ['focalPoint', 'backgroundImage', 'rows', 'booths', 'tables', 'texts', 'shapes', 'generalAdmissionAreas', 'sections']
}

By default, all features are enabled. But if you pass in an array to features.enabled, only those features will be enabled. All other features are disabled. That means there’s no button for them in the toolbar.

features.enabled cannot be used together with features.disabled.

features.disabled

features: {
    disabled: ['focalPoint', 'backgroundImage', 'rows', 'booths', 'tables', 'texts', 'shapes', 'generalAdmissionAreas', 'sections']
}

By default, all features are enabled. But the features you pass in to features.disabled will be disabled. That means there’s no button for them in the toolbar.

features.disabled cannot be used together with features.enabled.

features.readOnly

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

baseColor

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

openDraftDrawing

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.

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.

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(){
   designer.destroy();
});

designer.destroy()

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.