APIs and Widgets
Start typing to search…

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.

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:

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"
      }
    }
  }' />