Seat Attributes Widget

The Seat Attributes widget is a configurable widget which can retrieve and display seat attributes.

An example can be found here.

Embedding the widget

To embed the Seat Attributes widget:

  1. Create a new HTML page and add the following markup:
<!doctype html>
<html lang="en">
  <head>
    <title>Seat Attributes example</title>
  </head>
  <body>
    <div
       class="venue__seat-attributes"
       data-app="seat-attributes-app"
       data-mode="popup"
       data-venue-id="{venue-id}"
       data-performance-date="{performance-date}"
       data-performance-time="{performance-time}"
       data-range-of-seats="{JSON object representing seats selected}"
       data-mode="thumbnail"
    ></div>

    <script type="text/javascript" src="https://venue-service.tixuk.io/v4/js/venue-seat-attributes.js"></script> 
  </body>
</html>
  1. This will display the Seat Attributes widget, allowing users to see any specific seat attribute information.

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

Seat Attributes can be configures in two different ways:

Method 1: Configure widget by providing performance and range information

For use when you need to fetch the seat attribute information of a particular performance seat range.

NameMandatoryTypeDescription
data-channel-idYesStringIdentifier of the affiliate.
data-venue-idYesStringIdentifier of the venue.
data-range-of-seatsYesString (JSON object)Identifies seats.
data-modeNoStringIdentifies mode. Available options: default, popup
data-defer-renderingNoBooleanDefer rendering until user call venue-apprender event.

_Example: window.dispatchEvent(new CustomEvent('venue-app_render'))
data-custom-stylesNoString (JSON object)Object accepts property "seatAttrMaxHeight" (only for non-popup view) which
establish height of seat-attrbiutes container.

Example:
data-custom-styles='{ "seatAttrMaxHeight": "auto" }'
or
data-custom-styles='{ "seatAttrMaxHeight": "50px" }'

Method 2: Configure widget by passing seats-attribute information

For use when you have your seat-attribute information and want this presented in the widget.

NameMandatoryTypeDescription
data-seat-attributesYesStringIdentifies seat attribute information.
data-modeNoStringdentifies mode. Available options: default, popup
data-range-of-seatsYesString (JSON object)Identifies seats.
data-defer-renderingNoBooleanDefer rendering until user call venue-apprender event.

_Example: window.dispatchEvent(new CustomEvent('venue-app_render'))