How do widgets work?
Many TTG Encore services listed below provide a simple way to integrate functionality into your website or application through the use of widgets. Our widgets are compatible with most desktop and mobile platforms and should generally work with most HTML5-compliant devices (e.g. Smart TVs).
Why use a widget?
Because they are fantastic, widgets occupy the middle ground between a full-on API integration (which provides you with the most flexibility but also requires the most development effort) and White Label solutions (which are the quickest and easiest way to start selling tickets but provide fewer customisation options). Widgets offer true "plug and play" functionality, allowing you to place them anywhere on your site, fully configure, customise and style them to your liking and yet not worry about the hassle of orchestrating various API calls, and the ins and outs of a full integration.
The anatomy of widgets
All Widgets follow a common integration pattern requiring an App Script and App Embed Code. The following example, based on the Quick Search widget, is common to all others:
\\ <!-- App Embed Code -->
<div
class="inventory__c-quick-search"
data-action-url="http://londontheatredd.wl.front-default.bb-shared3.dev.encoretix.co.uk/booking/seating-plan"
data-channel-id="londontheatredd"
data-with-calendar="true"
data-api-path="https://inventory-service.devtixuk.io"
></div>
<!-- App Script -->
<script type="text/javascript" src="/js/quicksearch.js"></script> `
##
Standard data attributes
Data attributes vs Query string parameters
Some widgets can 'dual source' configuration properties through either a query string parameter or a data-attribute. Where configuration is 'dual sourced' and both are supplied, the query string value takes priority.
| Name | Mandatory | Type | Description |
|---|---|---|---|
| data-api-path | yes | URL | The host for the data service to use. This should be the fully qualified domain for the relevant capability service (breakdowns in further pages). Example: https://inventory-service.tixuk.io/ |
| data-channel-id | yes | string | The id of the affiliate for which the embedding context (i.e. website) belongs- same as affiliate-id |
| data-css-mode | no | string | The CSS to be applied to the widget. Valid values are: - full (default): This will display the widget with full "out-of-the-box" recommended styling. - grid: This will display the widget without colours and aesthetic styling, but retain the general layout of the widget. - min: This will display the widget without any CSS (ideal for applying your own custom styling). |
Updated over 1 year ago