Introduction

The purpose of this widget is to allow customers to search for their tickets directly from the widget.

Customers will no longer need to start their search via OnTrack Retail's Booking Engine. Instead, once a fare search has been conducted, the widget will redirect the customer to the search results page, from where they can then continue with their booking process.

There is also the option to present the customer with their previously saved favourite tickets in order to quickly rebook tickets for their most popular journeys, providing they are logged into their account.

Installation

Script version

This is the recommended method of installation as it offers the best performance and the most features.

Step 1

Place an empty element on your page that will be used to contain the widget:

<div id="otrl-jp-widget"></div>

Value of id is configurable, see Widget Options table.

Step 2

Include the following script tag at the bottom of your page:

<script src="https://widgets.otrl.io/jp-widget/bundle.min.js"></script>

Step 3

Add a new script tag after the external script resource included during the previous step:

<script>
  OtrlJPWidget.init({
    id: 'otrl-jp-widget',
    redirectUrl: 'https://ticket.thameslinkrailway.com',
    apiUrl: 'https://api.thameslinkrailway.com',
    stylesheetUrl: 'https://widgets.otrl.io/jp-widget/brands/thameslink.css',
    vertical: true
  });
</script>

See Widget Options table for configuration options.

Iframe version

If the script version is not a possibility, this version will serve the widget inside an iframe.

Step 1

Include the following script tag on your page where the widget should be displayed:

<iframe
  allow="geolocation"
  id="otrl-jp-widget"
  src="https://widgets.otrl.io/jp-widget/?id=iframe&redirectUrl=https://ticket.thameslinkrailway.com&apiUrl=https://api.thameslinkrailway.com&stylesheetUrl=https://widgets.otrl.io/jp-widget/brands/thameslink.css&vertical=true&disabledTabs=''&enableModalHeightResize=true"
  class="otrl-iframe-widget"
  scrolling="no"
  style="
    width: 375px;
    height: 550px;
    border: none;
    max-width: 375px;
    background: transparent;
    overflow: hidden;
  "
  title="JP widget"
  onload="(function () { var widget = event.target; window.addEventListener('message', function (event) { if (event.data.action === 'iframe-otrl-jp-widget__resize') { widget.style.height = Math.round(event.data.height) + 'px'; } })})();"
>
</iframe>

Configure the widget by appending your options to the src attribute's query component in key-value pairs.
See Widget Options table for configuration options.

Demo

Vertical

Horizontal

Configuring the Favourites tab

When configuring your widget options, be sure to add the brand widget option, as well as enable the Favourites tab by updating the disabledTabs widget option:

Script version

<script>
  OtrlJPWidget.init({
    id: 'otrl-jp-widget',
    brand: 'TL',
    redirectUrl: 'https://ticket.thameslinkrailway.com',
    apiUrl: 'https://api.thameslinkrailway.com',
    stylesheetUrl: 'https://widgets.otrl.io/jp-widget/brands/thameslink.css',
    vertical: true,
    disabledTabs: 'OTHER'
  });
</script>

Iframe version

<iframe
  allow="geolocation"
  id="otrl-jp-widget"
  src="https://widgets.otrl.io/jp-widget/?id=iframe&brand=TL&redirectUrl=https://ticket.thameslinkrailway.com&apiUrl=https://api.thameslinkrailway.com&stylesheetUrl=https://widgets.otrl.io/jp-widget/brands/thameslink.css&vertical=true&enableModalHeightResize=true&disabledTabs=OTHER"
  class="otrl-iframe-widget"
  scrolling="no"
  style="
    width: 375px;
    height: 550px;
    border: none;
    max-width: 375px;
    background: transparent;
    overflow: hidden;
  "
  title="JP widget"
  onload="(function () { var widget = event.target; window.addEventListener('message', function (event) { if (event.data.action === 'iframe-otrl-jp-widget__resize') { widget.style.height = Math.round(event.data.height) + 'px'; } })})();"
>
</iframe>

Widget Options

Below are a list of options available to customise the widget. Include any of these when configuring the widget during the installation steps:

Acceptable schemas

The JSON schemas for each ticket type to be used for the defaultValues option.

defaultValues: {
  ticketTypes: {
      smartCarnet : {
        stationFrom: {
          name: "London Paddington",
          nlc: "3087",
          crs: "PAD",
        },
        stationTo: {
          name: "Brighton",
          nlc: "5268",
          crs: "BTN",
        },
        fromDateTime: "2020-08-17"
      }
    }
}

defaultValues: {
  ticketTypes: {
    daySave : {
      stationFrom: {
        name: "London Paddington",
        nlc: "3087",
        crs: "PAD",
      },
      fromDateTime: "2020-08-17",
      adults: 1,
      children: 1,
    }
  }
}

defaultValues: {
  ticketTypes: {
    rovers : {
      roverType: "14R",
      fromDateTime: "2020-08-17",
      adults: 3,
      children: 0,
      railcards: [
        {
          quantity: 2,
          railcardCode: "2TR",
          id: "1",
        },
        {
          quantity: 1,
          railcardCode: "DIC",
          id: "2",
        },
      ]
    }
  }
}

Theming

Default brand stylesheets

Below are the default stylesheets for each brand. These can be used for the stylesheetUrl option when configuring the widget.

• Southeastern:
  https://widgets.otrl.io/jp-widget/brands/southeastern.css
• Thameslink:
  https://widgets.otrl.io/jp-widget/brands/thameslink.css
• Southern:
  https://widgets.otrl.io/jp-widget/brands/southern.css
• Great Northern:
  https://widgets.otrl.io/jp-widget/brands/greatnorthern.css
• Gatwick Express:
  https://widgets.otrl.io/jp-widget/brands/gatwick.css

Colours

The default stylesheets for each brand use CSS variables to define the colours used throughout the widget.

To change these colours:

1. Create a custom stylesheet by copying one of the original branded CSS stylesheet
2. Make the necessary changes
3. Host the file
4. Set the stylesheetURL option to the URL of your hosted stylesheet file