Full Fat Timeslot Widget

The Full Fat timeslot widget provides functionality to select the time of an attraction (note that shows are not fully supported by this widget, and time selection for a show is typically done directly on the full fat calendar widget itself).

You can check out a working demo here.

Embedding the Widget

  1. Ensure you've got a valid channel id.
  2. 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>Full Fat widget 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="full-fat-timeslot-with-summary"
        data-product-id="{id of product e.g. 1587 for "Wicked"}"
        data-api-path="https://inventory-service.tixuk.io"
        data-venue-id="{ venue id of performance}"
        data-date="{ date of performance 2020-05-10 e.g.}"
    ></div>
    <script type="text/javascript" src="https://inventory-service.tixuk.io/v5/js/quicksearch.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 or 'look and feel' of the Full Fat widget.

Name

Mandatory

Type

Sourced from Query String

Description

data-app

Yes

String

n/a

Indicates the host app to communicate with.
It should be "inventory-app"

data-view-name

Yes

String

n/a

View name of specific widget. Should be full-fat-timeslot-with-summary

data-product-id

Yes*

Number

product_id

Identifier of the product Id using for requests.

  • *Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs_.

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-channel-id

Yes

String

n/a

The id of the affiliate for which the embedding context (i.e. website) belongs.

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-action-url

No

String

n/a

Destination to redirect to on full fat submission.
Example: http://your-website-url/destination-page.html

data-css-mode

No

String

n/a

The CSS to be applied to the widget. Valid values are:

  • full (default)
  • grid
  • min

data-labels-config

No

JSON Object

n/a

Set of labels to use for the Full Fat Calendar. See "Configuring labels" below for more details.

data-date

Yes

Date

date

Date of performance

*Data-attr can be omitted in favour of property being supplied via query string. Query string values override data-attrs.

data-venue-id

No*

String

venue_id

*If a data-product-id is supplied, the corresponding venue id for the product must be supplied.

data-user-locale

No

String

n/a

A string indicating the language which should be used for displaying labels (see the "configuring labels" section below).

data-show-spinner-during-widget-loading

No

Boolean

n/a

If set to true shows spinner during widget loading (currently applies for Quick Search widget only)

data-disable-redirect-on-error

No

Boolean

n/a

When error occurs, popup appears and in several seconds redirect to homepage happens.

In order to prevent redirect, this attribute should have "true" value.

data-quantity

No

Number

qt

Number of tickets which the widget should display as selected by default e.g. "2". (should be in range 1 - 10)

Configuring labels

The full fat timeslot 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-action-url="https://www.encoretickets.co.uk"
  data-channel-id="encoretickets"
  data-product-id="7424"
  data-view-name="full-fat-timeslot-with-summary"
  data-api-path="https://inventory-service.tixuk.io"
  data-venue-id="106"
  data-date="2020-05-10"
  data-user-locale="en-US"
  data-labels-config='{
    "fullFat": {
      "timeSlotBlockTitle": { "en-US": "[T] Select a performance time" },
      "timeSlotSelectDefaultOption": { "en-US": "[T] Choose a time slot" },
      "timeSlotTimeAttractionTitle": { "en-US": "[T] Time of attraction" },
      "timeSlotTitle": { "en-US": "[T] Time slot" },
      "nextStepButton": { "en-US": "[T] Continue to next step" },
      "summaryTitle" : { "en-US": "[T] Your basket" },
      "infoBlockTitle": { "en-US": "[T] Need some help?" },
      "infoBlockHtml": { "en-GB": "[T] Get in touch with us on <a href=\"tel:+4402074001255;\">+44 (0)20 7400 1255</a>
 our knowledgeable staff are on hand to help you with your order.</br> <span class=\"br-line\" /> Lines are open <b>Mon</b> to <b>Fri 8am-8pm</b>, <b >Sat 9am-7.30pm</b> and <b >Sun 9am-7pm</b>" },
      "attractionTitle": { "en-US": "[T] Attraction date" },
      "timeSlotErrorForUnselectedTime": { "en-US": "[T] Please select a time of attraction" },
      "timeSlotLabelForUnselectedTime": { "en-US": "[T] Please select a time" },
      "alertCancelButton": { "en-US": "[T] Dismiss" }
    }
  }'

>
</div>

timeSlotBlockTitle

Title of the widget

timeSlotSelectDefaultOption

Input placeholder

timeSlotTimeAttractionTitle

timeSlotTitle

nextStepButton

summaryTitle

infoBlockTitle

infoBlockHtml

Should be set as HTML element

attractionTitle

timeSlotErrorForUnselectedTime

Text before block if button clicked without selected time

alertCancelButton

Popup button label (mobiles only)