Embedding the Widget

Get your channel-d (affiliate id).
1. Request this from your account manager or reach out to using the contact us button
Create a new html page and add the following markup, switching the configurable data in braces with your own.

<!doctype html>
<html lang="en">
  <head>
    <title>Quick search example</title>
  </head>
  <body>
    <div
        data-app="inventory-app"
        data-action-url="{http://your-website-url/destination-page.html}"
        data-channel-id="{your-channel-id}"
        data-view-name="quick-search-with-validation"
        data-with-calendar="true"
        data-api-path="https://inventory-service.tixuk.io"
    ></div>
    <script type="text/javascript" src="https://inventory-service.tixuk.io/v5/js/quicksearch.js"></script>
  </body>
</html>

Customise where you want
1. the following data attributes are used to customise the behaviour or 'look and feel' of the Quick Search widget.

Name	Mandatory	Type	Sourced From String Query	Description
data-app	yes	string	n/a	Indicates the host app to communicate with. Example: inventory-app
data-api-path	yes	string	n/a	The host for the data service to use. This should be the fully qualified domain for the relevant capability service. Example: <https://inventory-service.tixuk.io/
data-product-type	yes	string	n/a	Valid values are: show and attraction
data-product-id	yes	number	product_id	Identifier of the product to limit the quick search to. This also requires product type to be set. If a value is provided, the search box will not be visible. (
data-affiliate-id	yes	string	n/a	Given to you by TTG
data-view name	no	string	n/a	see below section
data-action-url	no	string	n/a	Destination to redirect to on quick search submission. Example: http://your-website-url/destination-page.html
data-booking-starts	no*	date	booking_starts	Represents the first date a user can select (the availability is calculated "from" this date). Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs.
data-booking-ends	no*	date	booking_ends	epresents the last date a user can select (the availability is calculated "to" this date) Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs.
data-css-mode	no	string	n/a
data-labels-config	no	json object	Set of labels to use for the Quick Search widget. See "Configuring labels" below for more details.
data-product-id-for-content	no*	number	content_product_id	Identifier of the product for content-service api calls. Default value: data-product-id Data-attr can be omitted in favor of property being supplied via query string. Query string values override data-attrs.
data-venue-id	no	string	venue_id	Identifier of the location where product is shown
data-with-calendar	no	boolean	n/a	A flag indicating if the date and time selectors are to be displayed in the Quick Search widget.
data-user-locale	no	string	n/a	A string indicating language for labels display (check "configuring labels" section below)
data-target-blank	no	boolean	n/a	A flag indicating opening data-action-url in the current/new tab
data-show-matinee	no	boolean	n/a	A flag indicating if the calendar will highlight dates with matinee shows
data-show-from-price	no	boolean	n/a	A flag indicating if the calendar will show from price for each day available
data-show-spinner-during-widget-loading	no	boolean	n/a	data-show-spinner-during-widget-loading

Supported view modes

Search with calendar

This view displays a full search, additional data attribute:

data-with-calendar="true"

<div
    data-app="inventory-app"
    data-action-url="{http://your-website-url}"
    data-channel-id="{your-channel-id}"
    data-api-path="https://inventory-service.tixuk.io"
    data-with-calendar="true"
></div>

Search with ticket selector

Display a search box without the calendar selectors. No additional data attributes.

<div
    data-app="inventory-app"
    data-action-url="{http://your-website-url}"
    data-channel-id="{your-channel-id}"
    data-api-path="https://inventory-service.tixuk.io"
></div>

Product ticket selector

Display a ticket selector for a pre-selected Product. Additional data attributes:

data-product-id
data-product-type
data-venue-id

<div
    data-app="inventory-app"
    data-action-url="{http://your-website-url}"
    data-channel-id="{your-channel-id}"
    data-api-path="https://inventory-service.tixuk.io"
    data-product-id="{product-id}"
    data-product-type="{show|attraction}"
    data-venue-id="{venue-id}"
></div>

Product ticket selector with calendar

Display a ticket with calendar selector for a pre-selected product. Additional data attrinbutes:

data-product-id
data-venue-id
data-product-type
data-with-calendar

<div
    data-app="inventory-app"
    data-action-url="{http://your-website-url}"
    data-channel-id="{your-channel-id}"
    data-with-calendar="true"
    data-product-id="{product-id}"
    data-product-type="{show|attraction}"
    data-venue-id="{venue-id}"
    data-booking-ends="{booking start date e.g. 2019-01-10}"
    data-booking-starts="{booking end date e.g. 2020-10-10}"
    data-api-path="https://inventory-service.tixuk.io"
></div>

Product ticket selector with calendar and validation

Display a ticket with calendar selector for a pre-selected product and validation. Additional attributes:

data-view-name
data-product-id
data-venue-id
data-product-type
data-with-calendar

<div
    data-app="inventory-app"
    data-view-name="quick-search-with-validation"
    data-action-url="{http://your-website-url}"
    data-channel-id="{your-channel-id}"
    data-with-calendar="true"
    data-product-id="{product-id}"
    data-product-type="{show|attraction}"
    data-venue-id="{venue-id}"
    data-booking-ends="{2019-09-29}"
    data-booking-starts="{2019-03-19}"
    data-api-path="https://inventory-service.tixuk.io"
></div>

Configuring labels

The Quick Search widget comes with some default text labels, but these can be customised to your liking. To do so, use the "data-labels-config" attribute, like so:


<div
    data-app="inventory-app"
    data-view-name="quick-search-with-validation"
    data-action-url="https://ticket.londontheatre.co.uk/booking#/seating-plan"
    data-channel-id="londontheatredd"
    data-css-mode="full"
    data-with-calendar=true
    data-api-path="https://inventory-service.tixuk.io"
    data-user-locale="en-GB"
    data-labels-config='{
        "searchFieldPlaceholder": {
          "en-GB": "Find a show...",
          "fr-FR": "Trouver un spectacle..."
        },
        "singleTicketLabel": {
          "en-GB": "Item",
          "fr-FR": "Item"
        },
        "multipleTicketsLabel": {
          "en-GB": "Items",
          "fr-FR": "Éléments"
        },
        "datePlaceholder": {
          "en-GB": "Pick a date",
          "fr-FR": "Choisissez une date"
        }, 
        "timePlaceholder": {
          "en-GB": "Choose a time",
          "fr-FR": "Choisissez une heure"
        }, 
        "searchButton": {
          "en-GB": "Search Now!",
          "fr-FR": "Rechercher maintenant!"
        }
    }'
>
</div>

Listening to events

The following events are raised by the Inventory widget:

Event	Description	Raised when using...
`inventory-app_quicksearch-submit`	Raised on quicksearch submission	Inventory widget on any quicksearch view
`inventory-app_quicksearch_focus`	Raised on quicksearch focus (any field)	Inventory widget on any quicksearch view
`inventory-app_quicksearch_on_availability_response`	Raised on quicksearch rendering when widget check for date availability	Inventory widget on quicksearch compact view (with preselected product)
`inventory-app_number-of-tickets_open`	Raised on Number of Tickets click by option	Inventory widget on Number of Tickets view
`inventory-app_time_open`	Raised on Time selector opening and time selection	Time selector in any Inventory widget view
`inventory-app_data-attributes-validation-failed`	Raised when data-atrribute validation failed	All quicksearch widgets

Example code for listening to these events (and logging to console):

window.addEventListener("inventory-app_quicksearch-submit", function(e) {
  console.log("inventory-app_quicksearch-submit", e);
});