An example can be found here.

Embedding the widget

To embed the Seat Attributes widget:

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>

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.

Name	Mandatory	Type	Description
data-channel-id	Yes	String	Identifier of the affiliate.
data-venue-id	Yes	String	Identifier of the venue.
data-range-of-seats	Yes	String (JSON object)	Identifies seats.
data-mode	No	String	Identifies mode. Available options: default, popup
data-defer-rendering	No	Boolean	Defer rendering until user call venue-app_render event. Example: window.dispatchEvent(new CustomEvent('venue-app_render'))
data-custom-styles	No	String (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.

Name	Mandatory	Type	Description
data-seat-attributes	Yes	String	Identifies seat attribute information.
data-mode	No	String	dentifies mode. Available options: default, popup
data-range-of-seats	Yes	String (JSON object)	Identifies seats.
data-defer-rendering	No	Boolean	Defer rendering until user call venue-app_render event. Example: window.dispatchEvent(new CustomEvent('venue-app_render'))