Travatar Integration Guide

v0.0.1

Travatar helps you find the best seat for you and makes it easier to compare the value of each flight so that you will be as comfortable in your seat as you will be with your purchase.

This guide explains how to use Travatar.js and HTML to integrate Travatar into your web application. Our process supports Retrospective Integration, which does not affect or detract from the user experience in any way and can be added to already existing websites.

Getting Started

There are a few basic steps that are required to start using Travatar.

Prepare your markup

To include the carousel on the page please add the next markup. You can show or hide the carousel by changing the display attribute.

<div id="travatar-carousel-container" style="display: none;">
  <div class="travatar-carousel-controls-container"></div>
  <div class="travatar-carousel-list-container"></div>
  <div class="travatar-carousel-flight-description-container"></div>
</div>

List Item

For reading data from the document, the list item should have the following structure. And all the data should be placed in the corresponding data attribute. You can find more info about data attributes here.

<div class="travatar-item-container" data-air="LON" data-...>
  <div class="result-item-comfort-container">
    <div class="travatar-comfort"></div>
  </div>

  <!--stops-->
  <div class="travatar-item-stop" data-air="LON" data-...>
    <div class="result-item-comfort-container">
      <div class="travatar-comfort"></div>
    </div>
  </div>
</div>
  • travatar-item-container - element that contains all stops, price data and general outbound/inbound data
  • travatar-item-stop - element that contains data about a specific stop, should be in travatar-item-container element
  • travatar-comfort - element where calculated comfort will appear

Include SDK

To start using Travatar, you will need to include the loading script at the bottom of the body section of the webpage to asynchronously load the plugin:

<script>
!function(t,n,a,e){function o(a,e){var o=[];t.TravatarPlugin||(t.TravatarPlugin=function(){},t.TravatarPlugin.onScriptLoaded=function(t){o.push(t)});var i,r,c;r=!1,i=n.createElement("script"),i.type="text/javascript",i.async=1,i.src=a,i.onload=i.onreadystatechange=function(){if(!(r||this.readyState&&"complete"!=this.readyState)){r=!0;try{o.forEach(function(t){t()}),"function"==typeof e&&e()}catch(t){}}},c=n.getElementsByTagName("script")[0],c.parentNode.insertBefore(i,c)}o(a,e)}(window,document,"http://alpha.travatar.com/plugin/travatar-plugin.js",travatarCallback);

// You can pass callback function as the last parameter in the function above
function travatarCallback() {
  // init plugin

  var options = {
      root: '#results',
      type: 'Economy',
      apiKey: '1234567',
      passengersCount: 2
  };
  var travatar = new TravatarPlugin(options);

  // now You can use travatar in your application
  travatar.addDataFromDocument();
}

// or

// You can call method TravatarPlugin.onScriptLoaded - which will be executed when the script has successfully loaded
TravatarPlugin.onScriptLoaded(function () { ... })
</script>

Initialize

Travatar SDK is ready to use as soon as it's downloaded.

var travatarOptions = {
  root: '#results',
  type: 'Business',
  apiKey: '0bb6908e-9c0a-48c7-bcc7-5179be2cff00',
  passengersCount: 2
};

var travatar = new TravatarPlugin(travatarOptions);

// now plugin is ready to accept the data
travatar.addDataFromDocument();

Add data to the Travatar plugin

From markup

By default, the plugin gets data from elements in the document on init. Those elements should contain properties from item model in kebab-case form and prefixed with data.

Basic example:

<div class="details-item travatar-item-stop"
  data-dep="2017-03-29"
  data-departure="6:15am"
  data-dur="175"
  data-arrival="8:10am"
  data-src="AMS"
  data-dst="LIS"
  data-flight-number="669"
  data-air="TP"
  data-flight="669"
  data-equip="319"
  data-st="ECONOMY"
  data-waiting-dur="0"
</div>

You can trigger getting data from document manually:

travatar.addDataFromDocument();

Programmatically

Feed items(Item Model) programmatically:

travatar.addData(items);

Final Step

If you are getting data from the HTML markup you should already see calculated comfort in the list:

alt text

And in the carousel view:

alt text

Options

{
  "root": "#results",
  "type": "Business",
  "apiKey": "0bb6908e-9c0a-48c7-bcc7-5179be2cff00",
  "passengersCount": 2
}

Item Model

Example:

{
  "element": Element,
  "data": FlightDataModel,
  "children": [
    {
      "element": Element,
      "data": FlightDataModel
    },
    {
      "element": Element,
      "data": FlightDataModel
    }
  ]
}

Flight Data Model

  • src - Source
  • srcName - Display text for origin
  • dst - Destination
  • dstName - Display text for destination
  • prc - Price, only for wrapper flight
  • st - Seat Type
  • prcUrl - Price URL, only for wrapper flight
  • dep - Departure data
  • departure - Departure time
  • dur - Duration in minutes
  • duration - Display text for duration - optional
  • arrival - Arrival Time
  • air - Airline Code
  • flight - Aircraft Number - optional if equip is present
  • equip - IATA of the Aircraft
  • carrierName - Name of the airline
  • carrierImgUrl - Airline logo
  • waitingDur - Waiting duration in minutes
  • waitingDuration - Display text for waiting duration
  • outbound - optional and has the same Flight Data Model
  • inbound - optional and has the same Flight Data Model

Example:

{
  "prc": "309.28",
  "st": "ECONOMY",
  "dep": "2017-03-29",
  "src": "AMS",
  "outbound": {
    "dep": "2017-03-29",
    "departure": "6:15am",
    "duration": "11h",
    "dur": "660",
    "arrival": "3:50pm",
    "src": "AMS",
    "dst": "EWR",
    "srcName": "Amsterdam Airport Schiphol",
    "dstName": "Newark Liberty International Airport",
    "carrierImgUrl": "http://s1.apideeplink.com/images/airlines/TP.png",
    "carrierName": "TAP Portugal"
  },
  "inbound": {...}
}

Error handling

Subscribe to error event

Travatar SDK extends this EventEmitter. When you have initialized SDK it's easy to subscribe to the error event:

travatar.addListener('error', function (err) {
  console.error('Oops, error!', err);
});

Handle errors in Promise catch block

Since most of the methods return Promise You can catch errors with the catch method:

travatar.addDataFromDocument()
  .catch(function (err) {
    console.error('Oops, error!', err);
  });

Technical Support

Please feel free to reach out to us by e-mail with technical questions, suggestions or to report any possible issues.