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

Embedding the widget

To embed the Seat Summary 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 Seat Plan or Seat List widget.
Extend your page with the following markup:

<div
    data-app="seat-summary-app"
    data-channel-id={your-channel-id}
    data-performance-type={A|M|E}
    data-performance-date={date of performance e.g. 2020-10-10}
    data-performance-time={time of performance e.g. 19:30}
    data-redirect-url={url where the booking will be made e.g. http://your-website-url}
    data-seats={selected seats}
></div>

<script type="text/javascript" src="https://venue-service.tixuk.io/v4/js/venue-seat-summary-app.js"></script>

This will display the Seat Summary widget that will display details of the selected seat and provide a button to add these to their basket.

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

Name	Mandatory	Type	Sourced from Query String	Description
data-app	Yes	String	n/a	Indicates the host app to communicate with. Example: seat-summary-app
data-channel-id	Yes	String	n/a	The id of the affiliate for which the embedding context (i.e. website) belongs.
data-redirect-url	No	String	n/a	Identifies the URL that will be opened after a click on "Add to button"
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-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-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: `False` Event: venue-app_selected-seats-summary-on-addtobasket
data-seats	No	String (JSON object	n/a	Identifies data about selected seats.
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-defer-rendering	No	Boolean	n/a	Defer rendering until user call venue-app_render 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

Listening to events

The following events are raised by the Seat Summary widget:

Event	Description
venue-app_selected-seats-summary-on-addtobasket	Raised on add to basket submission

The following events can be called to communicate with Seat Summary widget:

Event	Description
venue-app_on-seats-deselection	Clear current seat selection

Example code for listening to these events (and logging to console):


window.addEventListener("venue-app_selected-seats-summary-on-addtobasket", function(e) {
  console.log("venue-app_addtobasket-submit-IT", e);
});

Configuring labels

The Seat Summary 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="seat-summary-app"
  data-channel-id="encoretickets"
  data-performance-type="A"
  data-performance-date="2020-03-21"
  data-performance-time="19:30"
  data-redirect-url=""
  data-user-locale="en-GB"
  data-labels-config='{
   "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"
      }
    }
  }' />