Note: This article is only relevant if you have embedded the floor plan designer in your back office application, so that your users - event organisers - can create their own floor plans. If you haven't, read more here.
The Seats Designer is packed with many features, to make it possible to design floor plans of any type and size: with or without tables, booths, sections, a focal point for best available seating, etc.
However, you may want to limit the available features for your users. For example, you can remove the possibility to draw tables and booths, if you want your users to only draw theatre layouts.
The Seats Designer is configurable: you can switch some features and buttons off if need be.
Enabled vs disabled features
To control which features are available to your users, you have a choice:
either you have all features enabled by default and disable just some specific ones,
or you disable all features by default and explicitly enable those you want to be accessible to your users.
The difference between the two is important. If you choose to enable features, any new features we add at some point in the future will not automatically be available for your users. If you disable features instead, then newly added features will be automatically available to your users.
To have all features enabled by default, and disable some, you need to pass in features.disabled:
<div id="chartDesigner"></div>
<script src="https://cdn.seatsio.net/chart.js"></script>
<script>
new seatsio.SeatingChartDesigner({
divId: "chartDesigner",
secretKey: "[your secret key]",
// this is an example that disables both booths and tables
features: {
disabled: ['booths', 'tables']
}
}).render();
</script>
To have all features disabled by default, and enable just some, you use features.enabled instead, like so:
<div id="chartDesigner"></div>
<script src="https://cdn.seatsio.net/chart.js"></script>
<script>
new seatsio.SeatingChartDesigner({
divId: "chartDesigner",
secretKey: "[your secret key]",
features: {
enabled: ['rows', 'booths', 'tables', 'texts', 'sections']
}
}).render();
</script>
Note: 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 of the features that can be enabled or disabled are:
nodes (node tool)
labeling (labeling tool)
focalPoint (focal point tool)
rows (rows tool)
tables (tables tool)
booths (booths tool)
generalAdmissionAreas (general admission tool)
shapes (shapes tool)
texts (texts tool)
sections (sections tool)
viewFromYourSeat
firstTimeTutorial
backgroundImage
referenceChart
objectProperties (properties of selected objects on the right, such as row curve, number of seats at a table etc.)
contextActions (buttons on the top right, such as flip, duplicate and delete.
For the full list, check this page.
Read-only vs Editable features
Some features cannot be enabled/disabled, but instead can be made read-only. This is notably the case for chartName and categoryList.
To make these features read-only, do this:
<div id="chartDesigner"></div>
<script src="https://cdn.seatsio.net/chart.js"></script>
<script>
new seatsio.SeatingChartDesigner({
divId: "chartDesigner",
secretKey: "[your secret key]",
features: {
readOnly: ['chartName', 'categoryList']
}
}).render();
</script>
chartName: The chart name is visible, but it’s not editable by the user. This is useful if you want to manage chart names in your own web application (by using the seats.io API).
categoryList: the user can assign existing categories to seats and other objects, but the category list itself is not editable: categories can’t be added or deleted, nor can category labels or colors be edited.
Note: features.enabled or features.disabled can be used together with features.readOnly.