Seat Plan Widget

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

Optimised across Devices

The Seat Plan widget has been optimised 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:

  1. Ensure you've got a valid channel Id. This should be provided to you as part of your account setup.
  2. 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/v1/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-venue-id="{venue-id}"
      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>
  1. 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.

NameMandatoryTypeSourced from Query StringDescription
data-appYesStringn/aIndicates the host app to communicate with.
It should be "venue-app"
data-api-pathYesStringn/aThe 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-idYesStringn/aThe id of the affiliate for which the embedding context (i.e. website) belongs.
data-performance-dateYes*DatedateDate 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-timeYes*TimeslotStart 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-idYes*Numberproduct_idIdentifier 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-nameNoStringn/aIdentifies the view for the app to load.

Default value - "seat-plan"
data-performance-typeNo*Stringperformance_typeIndicates 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-contentNo*Numbercontent_product_idIdentifier 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-typeNo*Stringproduct_typeValid 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-quantityNo*NumberqtNumber 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-addtobasketNoBooleann/aSuppresses the redirection on add to basket CTA to allow custom handling of users selected ticket data.

Default value: False

Event: venue-app_selected-seats-summary-on-addtobasket
data-venue-idNo*Stringvenue_id* If a data-product-id is supplied, the corresponding venue id for the product must be supplied.
data-without-seat-summaryNoBooleann/aPrevent displaying seat summary on seat selection.
data-user-localeNoStringn/aIdentifies user locale for labels from data-labels-config. Used to format prices for custom currencies ('en-GB' used by default).
data-labels-configNoString (JSON Object)n/aIdentifies user labels.
data-hide-spinnerNoBooleann/aHides loading spinner.
data-use-external-availabilityNoBooleann/aUses external availability.
data-hide-price-decimalsNoBooleann/aHide decimal part from prices.
data-defer-renderingNoBooleann/aDefer rendering until user call venue-apprender event.

_Example: window.dispatchEvent(new CustomEvent('venue-app_render'))
data-disable-seat-plan-height-calculationNoBooleann/aDisable automatic Seat Plan height calculation
data-inventory-api-urlNoStringn/aSet custom API URL for inventory service.
Example: https://inventory-service.tixuk.io/api/vLatest
data-venue-api-urlNoStringn/aSet custom API URL for content service.
Example: https://content-service.tixuk.io/api/vLatest
data-basket-api-urlNoStringn/aSet 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:

EventDescription
venue-app_selected-seats-summary-on-addtobasketRaised on add to basket submission
venue-app_selected-group-summary-on-addtobasketRaised on add to basket submission
venue-app_renderedRaised when seat plan rendering is finished
venue-app_on-orientation-changedRaised when user change the orientation of the device
venue-app_on-seats-selection-changeRaised 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-venue-id="138"
  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