The Seat Plan widget is the simplest way to deliver a fully interactive seat plan to your customers, allowing them to visualise the layout of a venue, where their seats would be and select the seats, which they'd like to purchase.
Note: you can add only one reservation per basket. In case you are trying to add more items to the existing basket, you will see a warning popup.
Benefits
Visualised Seat Plans
All seat plans have been meticulously constructed for the vast majority of theatre and attraction venues which Encore support - allowing customers to see before they buy!
Fully Interactive
Pan, zoom in, zoom out, choose your sections, choose your seats - all seat plans offer super intuitive controls for your customers to choose their seats as easily as possible
Optimized across Devices
The Seat Plan widget has been optimized across all channels - desktop, mobile, tablet - with full responsiveness and device-specific actions, like "pinch to zoom"
Built-in Availability
All seat plans come built-in with your assigned performance-level availability - no need to make extra calls for availability and manipulate this data for display
Embedding the widget
To embed the Seat Plan widget:
- Ensure you've got a valid channel Id. This should be provided to you as part of your account setup.
- Create a new HTML page and add the following markup:
<!doctype html>
<html lang="en">
<head>
<title>Seat Plan example</title>
<!-- CSS file is optional and needed only if you want to use default styling -->
<link rel="stylesheet" href="https://venue-service.tixuk.io/v4/css/main.css" />
</head>
<body>
<div
data-app="venue-app"
data-view-name="seat-plan"
data-channel-id="{your-channel-id}"
data-product-id="{product-id}"
data-product-type="{show|attraction}"
data-performance-type="{A|M|E}"
data-performance-date="{date of performance e.g. 2019-01-10}"
data-performance-time="{time of performance e.g. 19:30}"
data-quantity="{number of tickets e.g. 2}"
data-api-path="{url where the booking will be made e.g. http://your-website-url}"
></div>
<script type="text/javascript" src="https://venue-service.tixuk.io/v4/js/venue-app.js"></script>
</body>
</html>
- This will display the Seat Plan widget, allowing users to select some seats. Doing so will display details of the selected seat and provide a button to add these to their basket, like so:
In case the seat chart is not available or cannot be rendered, widget will render Seat List view
Supported data attributes
In addition to the standard data attributes used by all widgets, the following data attributes are used to customise the behaviour of the Seat Plan widget.
| Name | Mandatory | Type | Sourced from Query String | Description |
|---|---|---|---|---|
| data-app | Yes | String | n/a | Indicates the host app to communicate with. It should be "venue-app" |
| data-api-path | Yes | String | n/a | The host for the data service to use. This should be the fully qualified domain for the relevant capability service. Example: https://venue-service.tixuk.io/ |
| data-channel-id | Yes | String | n/a | The id of the affiliate for which the embedding context (i.e. website) belongs. |
| data-performance-date | Yes* | Date | date | Date of the performance in the format YYYY-MM-DD e.g. 2019-01-10. * Data-attr can be omitted in favor of property being supplied via query string. Query string values override data-attrs. |
| data-performance-time | Yes* | Time | slot | Start time of the performance in 24-hour format HH:MM e.g. 19:30. * Data-attr can be omitted in favor of property being supplied via query string. Query string values override data-attrs. |
| data-product-id | Yes* | Number | product_id | Identifier of the product Id using for requests. *Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs. |
| data-view-name | No | String | n/a | Identifies the view for the app to load. Default value - "seat-plan" |
| data-performance-type | No* | String | performance_type | Indicates the type of performance, based on the part of day. Valid values are:A - indicates "all"M - indicates "matinee"E - indicates "evening"* Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs. |
| data-product-id-for-content | No* | Number | content_product_id | Identifier of the product for content-service api calls. Default value: data-product-id * Data-attr can be omitted in favor of property being supplied via query string. Query string values override data-attrs. |
| data-product-type | No* | String | product_type | Valid values are:show (default)attraction * Data-attr can be omitted in favor of property being supplied via query string. Query string values override data-attrs. |
| data-quantity | No* | Number | qt | Number of tickets to be selected e.g. "2". * Data-attr can be omitted in favor of property being supplied via query string. Query string values override data-attrs. |
| data-suppress-addtobasket | No | Boolean | n/a | Suppresses the redirection on add to basket CTA to allow custom handling of users selected ticket data. Default value: FalseEvent: venue-app_selected-seats-summary-on-addtobasket |
| data-without-seat-summary | No | Boolean | n/a | Prevent displaying seat summary on seat selection. |
| data-user-locale | No | String | n/a | Identifies user locale for labels from data-labels-config. Used to format prices for custom currencies ('en-GB' used by default). |
| data-labels-config | No | String (JSON Object) | n/a | Identifies user labels. |
| data-hide-spinner | No | Boolean | n/a | Hides loading spinner. |
| data-use-external-availability | No | Boolean | n/a | Uses external availability. |
| data-hide-price-decimals | No | Boolean | n/a | Hide decimal part from prices. |
| data-defer-rendering | No | Boolean | n/a | Defer rendering until user call venue-apprender event. _Example: window.dispatchEvent(new CustomEvent('venue-app_render')) |
| data-disable-seat-plan-height-calculation | No | Boolean | n/a | Disable automatic Seat Plan height calculation |
| data-inventory-api-url | No | String | n/a | Set custom API URL for inventory service. Example: https://inventory-service.tixuk.io/api/vLatest |
| data-venue-api-url | No | String | n/a | Set custom API URL for content service. Example: https://content-service.tixuk.io/api/vLatest |
| data-basket-api-url | No | String | n/a | Set custom API URL for basket service. Example: https://basket-service.tixuk.io/api/vLatest |
Listening to custom events
The following events are raised by the SeatPlan widget:
| Event | Description |
|---|---|
| venue-app_selected-seats-summary-on-addtobasket | Raised on add to basket submission |
| venue-app_selected-group-summary-on-addtobasket | Raised on add to basket submission |
| venue-app_rendered | Raised when seat plan rendering is finished |
| venue-app_on-orientation-changed | Raised when user change the orientation of the device |
| venue-app_on-seats-selection-change | Raised when user change seat selection (select or deselect) |
Example code for listening to these events (and logging to console):
document.addEventListener("venue-app_selected-seats-summary-on-addtobasket", function(e) {
console.log("venue-app_addtobasket-submit-IT", e);
});
Configuring labels
The Seat Plan widget comes with some default text labels, but these can be customized to your liking. To do so, use the "data-labels-config" attribute, like so:
<div
data-app="venue-app"
data-view-name="seat-plan"
data-channel-id="encoretickets"
data-product-id="1587"
data-product-type="show"
data-performance-type="A"
data-performance-date="2020-03-21"
data-performance-time="19:30"
data-quantity="2"
data-api-path="http://encoretickets.co.uk"
data-redirect-url=""
data-user-locale="en-GB"
data-labels-config='{
"seatList":{
"findingAvailability":{
"en-GB":"Finding Availability",
"it-IT":"Trovare disponibilità"
},
"reservingSelection":{
"en-GB": "Reserving Selection",
"it-IT": "Selezione della prenotazione"
}
},
"seatSummary":{
"seats":{
"en-GB":"Seats",
"it-IT":"Sedili"
},
"restrictedView":{
"en-GB":"Restricted view",
"it-IT":"Visione limitata"
},
"sideView":{
"en-GB":"Side view",
"it-IT":"Vista laterale"
},
"seatPrice":{
"en-GB":"Seat price",
"it-IT":"Prezzo del posto"
},
"noBookingFee":{
"en-GB":"No booking fee",
"it-IT":"Nessuna commissione di prenotazione"
},
"addToBasket":{
"en-GB":"Add to basket",
"it-IT":"Aggiungi al carrello"
}
},
"legend":{
"restrictedView":{
"en-GB":"Restricted view",
"it-IT":"Visione limitata"
},
"offer":{
"en-GB":"Offer",
"it-IT":"Offrire"
},
"restrictedViewOffer":{
"en-GB":"Restricted view & offer",
"it-IT":"Offerta e vista riservata"
},
"noFees":{
"en-GB":"No fees",
"it-IT":"Senza tasse"
}
},
"seatPlan":{
"notAvailable":{
"en-GB":"notAvailable",
"it-IT":"Non disponibile"
},
"sectionAvailability.none":{
"en-GB":"sectionAvailability.none",
"it-IT":"Nessun posto disponibile"
},
"clickToSelect":{
"en-GB":"clickToSelect",
"it-IT":"Clic per selezionare"
},
"clickToDeselect":{
"en-GB":"clickToDeselect",
"it-IT":"Clic per deselezionare"
},
"row":{
"en-GB":"row",
"it-IT":"riga"
},
"seat":{
"en-GB":"seat",
"it-IT":"sedia"
},
"table":{
"en-GB":"table",
"it-IT":"Tavola"
},
"section":{
"en-GB":"section",
"it-IT":"Section"
},
"restrictedView":{
"en-GB":"restrictedView",
"it-IT":"Visione limitata"
},
"couch":{
"en-GB":"Couch",
"it-IT":"Divano"
},
"bar":{
"en-GB":"Bar",
"it-IT":"Bar"
}
}
}' />
seatList -> findingAvailability
Spinner message showing during availability data loading
seatList -> reservingSelection
Spinner message showing during basket reservation process
seatSummary -> seats
Seats label
seatSummary -> restrictedView
Restricted view label
seatSummary -> sideView
Side view restriction
seatSummary -> seatPrice
Seat Price label
seatSummary -> noBookingFee
No Booking Fee label
seatSummary -> addToBasket
Add to Basket button text
legend -> restrictedView
Restricted View label in legend
legend -> offer
Offer label in legend
legend -> restrictedViewOffer
Offer & Restricted View label in legend
legend -> noFees
No fees label in legend
seatPlan -> notAvailable
Not Available label in seat plan tooltip
seatPlan -> sectionAvailability.none
No seats available label in section popup when no seats for section available
seatPlan -> clickToSelect
Click to Select label in seat plan tooltip
seatPlan -> clickToDeselect
Click to Deselect label in seat plan tooltip
seatPlan -> row
Row label in seat plan tooltip
seatPlan -> seat
Seat label in seat plan tooltip
seatPlan -> table
Table label in seat plan tooltip
seatPlan -> section
Section label in seat plan tooltip
seatPlan -> restrictedView
Restricted View label in seat plan tooltip
seatPlan -> couch
Couch label in seat plan tooltip
seatPlan -> bar
Bar label in seat plan tooltip