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.

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'))