Seat Summary Widget

The Seat Summary widget represents data about seats that you chose in the Seat Plan or Seat List widget.

🚧

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:

  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 Seat Plan or Seat List widget.
  3. 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>
  1. 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.

NameMandatoryTypeSourced from Query StringDescription
data-appYesStringn/aIndicates the host app to communicate with.
Example: seat-summary-app
data-channel-idYesStringn/aThe id of the affiliate for which the embedding context (i.e. website) belongs.
data-redirect-urlNoStringn/aIdentifies the URL that will be opened after a click on "Add to button"
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-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-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-seatsNoString (JSON objectn/aIdentifies data about selected seats.
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-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

Listening to events

The following events are raised by the Seat Summary widget:

EventDescription
venue-app_selected-seats-summary-on-addtobasketRaised on add to basket submission

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

EventDescription
venue-app_on-seats-deselectionClear 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"
      }
    }
  }' />