TripIt Web Plugins

Index

Overview
Loading the Add-to-TripIt Plugin
Example 1: Creating a hotel reservation (Lodging) object
Example 2: Creating multiple plugin buttons on the same page
JavaScript API

Add-to-TripIt Plugin

Overview

The Add-to-TripIt plugin allows you to quickly import travel objects into TripIt without the need for a full TripIt API integration utilizing OAuth.

Currently the following travel objects are supported:

ActivityObject
CarObject
LodgingObject
RestaurantObject
TransportObject

Other features of the plugin include:

Asynchronous JavaSript loading of the plugin - does not block any other Javascript currently existing on your page.
Multiple plugin buttons can exist on the same page.

Loading the Add-to-TripIt plugin

Step 1

Sign up for a developer API key.
Under the 'TripIt Plugins' section when viewing/editing your API application, enter the domain where the Add-to-TripIt plugin will be used.

Step 2

After saving your API application, click on the 'Get the plugin code' button. The instructions should be similar to the two steps below:

Add the TripIt JavaScript SDK in your page once, ideally right after the beginning of the <body> tag:

window.tiAsyncInit = function() {
    TripIt.init({
        'api_key':'YOUR_API_KEY',
        'domain':'YOUR_DOMAIN'
    });

    // Your code that uses the TripIt SDK goes here...

};

(function(d){
    var js, id = 'tripit-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//www.tripit.com/js/sdk/tripit_sdk.js";
    ref.parentNode.insertBefore(js, ref);
}(document));

Place the following code wherever you want the plugin to appear on your purchase confirmation page.
```
<div id="add-to-tripit-plugin"></div>
```

Step 3

Follow the JavaScript API functions to instantiate the Add-to-TripIt plugin with the relevant travel object data. Place your code within the window.tiAsycInit() function defined above.

Example 1: Creating a hotel reservation (Lodging) object

Add the TripIt JavaScript SDK and your custom code in your page once, ideally right after the beginning of the <body> tag:

window.tiAsyncInit = function() {
    TripIt.init({
        'api_key':'YOUR_API_KEY',
        'domain':'YOUR_DOMAIN'
    });

    // Your code that uses the TripIt SDK goes here...
    
    // Creating an AddToTripIt plugin object
    var a2t = TripIt.create('addToTripIt')

    // Creating a Lodging Object inside AddToTripIt object
    var lodging = a2t.create('lodging');
    
    // Check-in and check-out date/time
    var startDateTime = new Date(2012, 07, 14, 11, 00); // On 08/14/2012, 11:00
    lodging.setStartDateTime(startDateTime);
    var endDateTime = new Date(2012, 07, 16, 19, 00); // On 08/16/2012, 19:00
    lodging.setEndDateTime(endDateTime);
    
    // Supplier
    lodging.setSupplierName('San Francisco Hotels');

    // Hotel address
    var address1 = a2t.create('address');
    address1.setAddrLine1('500 Treat Ave');
    address1.setAddrLine2('Suite 100');
    address1.setCity('San Francisco');
    address1.setState('CA');
    address1.setCountry('USA');
    lodging.setAddress(address1);
    
    // Guests
    var person1 = a2t.create('traveler');
    person1.setFirstName('Andy');
    person1.setLastName('Denmark');
    var person2 = a2t.create('traveler');
    person2.setFirstName('Thor');
    lodging.addGuest(person1);
    lodging.addGuest(person2);

    lodging.setNumberGuests('2');
    lodging.setNumberRooms('1');
    lodging.setRoomType('suite');

    // All done, so now initialize the A2T button to be rendered; pass callback function as well.
    TripIt.initializePlugin(a2t, function(data) {
        console.log('CLIENT: status obtained: ');
        console.log(data);
    });

};

(function(d){
    var js, id = 'tripit-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//www.tripit.com/js/sdk/tripit_sdk.js";
    ref.parentNode.insertBefore(js, ref);
}(document));

Place the following code wherever you want the plugin to appear on your purchase confirmation page.
```
<div id="add-to-tripit-plugin"></div>
```

Example 2: Creating multiple plugin buttons on the same page

Add the TripIt JavaScript SDK and your custom code in your page once, ideally right after the beginning of the <body> tag:

window.tiAsyncInit = function() {
    TripIt.init({
        'api_key':'YOUR_API_KEY',
        'domain':'YOUR_DOMAIN'
    });

    // Your code that uses the TripIt SDK goes here...
    
    //******* FIRST PLUGIN BUTTON *******

    // Creating an AddToTripIt plugin object
    var a2t = TripIt.create('addToTripIt', 'add-to-tripit-plugin');

    // Transport Object
    var transport = a2t.create('transport');

    // Shuttle start and end date/time
    var startDateTime = new Date(2012, 08, 14, 11, 00); // On 09/14/2012, 11:00
    transport.setStartDateTime(startDateTime);
    var endDateTime = new Date(2012, 08, 16, 19, 00); // On 09/16/2012, 19:00
    transport.setEndDateTime(endDateTime);

    // Shuttle pick-up/start location address
    var address1 = a2t.create('address');
    address1.setAddrLine1('Oakland International Airport');
    address1.setAddrLine2('100 Airport Rd');
    address1.setCity('Oakland');
    address1.setState('CA');
    address1.setCountry('USA');
    transport.setStartLocationAddress(address1);
    
    // Shuttle drop-off/end location address
    var address2 = a2t.create('address');
    address2.setAddrLine1('San Francisco International Airport');
    address2.setCity('San Francisco');
    address2.setState('CA');
    address2.setCountry('USA');
    transport.setEndLocationAddress(address2);
    
    // start/end Location Name
    transport.setStartLocationName('Oakland International Airport');
    transport.setEndLocationName('San Francisco International Airport');
    
    // transport.setConfirmationNumber('6');

    // All done, so now initialize the A2T button to be rendered.
    TripIt.initializePlugin(a2t, function(data) {
        console.log('CLIENT: status obtained: ');
        console.log(data);
    });

    //******* SECOND PLUGIN BUTTON *******

    // Your code that uses the TripIt SDK goes here...
    var a2t2 = TripIt.create('addToTripIt', 'add-to-tripit-plugin-2'); // The second parameter is the div id that will hold this plugin

    var car = a2t2.create('car');
    var start = new Date(2013, 07, 14, 11, 01, 02); // The month is actually August (08), since Javascript accepts month from 0-11
    var end = new Date(2013, 08, 14, 12, 05, 07); // The month is actually Sept (09), since Javascript accepts month from 0-11
    car.setDisplayName('Avis rental');
    car.setBookingRate('$50');
    car.setBookingSiteConfirmationNumber("DEF");
    car.setBookingSiteName("bk");
    car.setSupplierName("supplier");
    car.setNotes('booking notes');
    car.setTotalCost('$150');
    car.setStartDateTime(start);
    car.setEndDateTime(end);
    var address1 = a2t2.create('address');
    address1.setAddrLine1('500 Treat Ave');
    address1.setCity('San Francisco');
    address1.setCountry('USA');
    address1.setZip('94110')
    var address2 = a2t2.create('address');
    address2.setAddrLine1('1000 Market Ave');
    address2.setCity('San Francisco');
    address2.setCountry('USA');
    address2.setZip('94110')
    car.setStartLocationAddress(address1);
    car.setEndLocationAddress(address2);
    car.setStartLocationName("start");
    car.setEndLocationName("end");
    car.setSupplierConfirmationNumber("123");
    car.setCarDescription('description');
    car.setCarType('type');
    var person1 = a2t2.create('traveler');
    person1.setFirstName('Tariq'); 
    person1.setLastName('Islam');
    car.setDriver(person1);
    car.setMileageCharges('$10');

   TripIt.initializePlugin(a2t2, function(data) {
        console.log('2 CLIENT: status obtained: ');
        console.log(data);
    });
};

(function(d){
    var js, id = 'tripit-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//www.tripit.com/js/sdk/tripit_sdk.js";
    ref.parentNode.insertBefore(js, ref);
}(document));

Place the following code wherever you want the first plugin to appear on your purchase confirmation page.
```
<div id="add-to-tripit-plugin"></div>
```
Place the following code wherever you want the second plugin to appear on your purchase confirmation page.
```
<div id="add-to-tripit-plugin-2"></div>
```

JavaScript API

Below is the JavaScript API to use for the Add-to-TripIt plugin.

Plugin & SDK

AddToTripit
TripIt

All travel objects

Activity
Address
Car
Lodging
Restaurant
Transport
Traveler