Integration with Triptease Price Check

Modified on Wed, 20 May at 4:42 PM

Below we summarize the steps that must be taken to integrate the Triptease Price Check widget into the Witbooking booking engine:

1) Go to Integrations>Mark up Manager.

2) Adapt the following code by entering the Hotel Key and {{hotel_ticker}} fields provided by Triptease.

<script>

var roomSelection = document.getElementsByClassName('RoomSelection-placeholder');

if (roomSelection) {

roomSelection = roomSelection[0];

}

var priceFighterWidget = document.createElement('div');

priceFighterWidget.setAttribute('class', 'price-fighter-widget');

roomSelection.prepend(priceFighterWidget);

// Triptease initiate function

function initializeTriptease() {

var cheapestBookableData = configuration.cheapestBookableData && configuration.cheapestBookableData['{{hotel_ticker}}'];

var tw = document.getElementsByClassName("price-fighter-widget")[0];

if (typeof tw !== 'undefined') {

var checkinArr = configuration.startDate.split('-');

var checkoutArr = configuration.endDate.split('-');

var checkin = checkinArr[2]+'-'+checkinArr[1]+'-'+checkinArr[0];

var checkout = checkoutArr[2]+'-'+checkoutArr[1]+'-'+checkoutArr[0];

tw.setAttribute("data-pf-hotelkey", "{{hotelkey}}");

tw.setAttribute("data-pf-checkin", checkin);

tw.setAttribute("data-pf-checkout", checkout);

tw.setAttribute("data-pf-direct-price", cheapestBookableData && cheapestBookableData.cheapestRate);

tw.setAttribute("data-pf-room-rate", cheapestBookableData && cheapestBookableData.accommodationName);

tw.setAttribute("data-pf-adults", configuration.guestList && configuration.guestList.adults);

tw.setAttribute("data-pf-children",configuration.guestList && configuration.guestList.children);

if (configuration.guestList && configuration.guestList.children > 0) {

var childrenAge = configuration.childrenMaxAge || '8';

for (var i = 1; i < configuration.guestList.children; i++) {

childrenAge += ',' + childrenAge.toString();

}

tw.setAttribute("data-pf-children-ages",childrenAge);

}

tw.setAttribute("data-pf-currency", configuration.currency);

tw.setAttribute("data-pf-language", configuration.language);

tw.setAttribute("data-pf-room-type", cheapestBookableData && cheapestBookableData.accommodationName);

tw.setAttribute("data-pf-layout", "in-page");

}

window.addEventListener('wbk_checkedAvailability', function() {

initializeTriptease();

PFConfig.deactivate();

PFConfig.activate();

}, false);

initializeTriptease();

</script>

<script src="https://static.triptease.io/paperboy/paperboy.js?hotelkey={{hotelkey}}"></script>

3) Enter the adapted code in the Markup field.

4) Configure the following parameters as in the screenshot:

Active: Yes
printOneTime: No
Position: Before closing tag
Location: Step 1

5) Once saved, go back to Integrations>Mark up manager and create a new Mark up.

6) Adapt the following code by entering the Hotel Key field provided by Triptease:

7) Enter the adapted code in the Markup field.

8) Configure the following parameters as in the screenshot:

Active: Yes
printOneTime: Yes
Position: Before closing tag
Location: Confirmation

Important: After completing the configuration, you must access the booking engine and make a test booking to verify the system's functionality after implementing the widget.