Seat Plan Thumbnail Widget

Embedding the widget

To embed the Seat List widget:

Ensure you've got a valid affiliate Id. This should be provided to you as part of your account setup.
Create a new HTML page and add the following markup:

<!doctype html>
<html lang="en">
  <head>
    <title>Seat Plan Thumbnail example</title>
  </head>
  <body>
    <div
       class="venue__c-seat-plan-thumbnail"
       data-app="seat-plan-thumbnail-app"
       data-channel-id="{your-channel-id}"
       data-venue-id="{venue-id}"
       data-mode="thumbnail"
    ></div>

    <script type="text/javascript" src="https://venue-service.tixuk.io/v4/js/venue-seat-plan-thumbnail.js"></script> 
  </body>
</html>

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 Plan Thumbnail widget.

Name	Mandatory	Type	Description
data-venue-id	Yes*	String	Identifier of the venue to show the image for. *Required, if data-image-url is not provided
data-mode	No	String	Indicates the display mode. Valid values are: link - For text thumbnail - For image Default value: "thumbnail"
data-user-locale	No	String	Identifies user locale for labels from data-labels-config.
data-labels-config	No	String (JSON object)	Identifies user labels.
data-defer-rendering	No	Boolean	Defer rendering until user call venue-app_render event. Example: window.dispatchEvent(new CustomEvent('venue-app_render'))
data-disable-height-calculation	No	Boolean	Disable image height on page resize. Default value: "false"

Configuring labels

The Seat Plan Thumbnail 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-plan-thumbnail-app"
  data-channel-id="encoretickets"
  data-venue-id="199"
  data-mode="thumbnail"
  data-user-locale="en-GB"
  data-labels-config='{ 
    "seatPlanThumbnail":{ 
      "linkText": {
        "en-GB": "View venue seat plan",
        "it-IT": "Visualizza la pianta del posto"
      },
      "imageTitle": {
        "en-GB": "Venue seating plan",
        "it-IT": "Pianta dei posti a sedere"
      }
    }
  }' />

seatPlanThumbnail -> linkText

Venue Image Link text

seatPlanThumbnail -> imageTitle

Venue Image Title text