Price Check

Style the widget using the attribute data-pf-custom-css with a value that is a stylesheet URL. e.g data-pf-custom-css="//static.triptease.io/price-check/skeletonBasic-example.css". Your designs are limited to the DOM structure we output but psuedo elements and absolute positioning may be required to achieve your design. All stylesheets are hosted and maintained by you, the hotel.

All stylesheets must be hosted on https to avoid any security issues.

Stylesheet URL Examples:

For faster development of your own CSS styles, you can force the widget into it's 'loading', and 'unavailable' states below:

Positioning

The position of the Skeleton widget is integral if your design is not "floating" with position: fixed (like our standard widget). This means you have to place the price-fighter-widget container exactly where you wish you widget to show. This can be anywhere within the body of your HTML.

Custom assets

To use custom fonts and images in the widget iFrame you will need to provide them via the stylesheet. To do this you need to Base64 encode them into the stylesheet and use data-uri's where applicable.

Custom classes

If you need to add custom classes to style your widget (e.g when a user clicks a button on your website). You can use:

Paperboy.PriceCheck.skeletonAddClass('active');. This class will be appended to the top level div and can then be used to style any child element accordingly.
Paperboy.PriceCheck.skeletonRemoveClass('active'); removes the class.

Add/Remove Class

Widget animation/revealing

In order to animate the widget in and out of view it's a matter of simply animating the price-fighter-widget from the host website. For example:

.price-fighter-widget {
  width: 780px;
  transition: all 0.3s ease;
  opacity: 0;
  height: 0;
}

.price-fighter-widget-show {
  height: 95px;
  opacity: 1;
}

$('.animate-widget-toggle').on('click', function () {
  $('.price-fighter-widget').toggleClass('price-fighter-widget-show');
});

Using window.Paperboy the widget can communicate with your website to notify you when something has occured within it. The full guide on these events can be found here. The supported events for Skeleton are documented in the following table.

Using these events gives you greater control over how the widget, and your website interact. When coupled with the Paperboy.PriceCheck.skeletonAddClass API, the Skeleton widget can have some two way communication to provide an immersive customised integration.

Event Name	Example Event Data
`priceCheck:reveal`	{ id: 0, eventName: "reveal" }
`priceCheck:toggleTerms`	{ id: 0, eventName: "toggleTerms", isTermsVisible: true }
`priceCheck:apiComplete`	{ id: 0, eventName: "apiComplete", cheaperDirect: true, prices: [{ name: 'direct', price: 10 }, { name: 'ota1', price: 100 }, ], visible: true }

Note: The ID in the event data is used to identify what widget triggered the event if you have multiple widgets on a page.

Example

var callback = function(event) {
  // Do things with event data
};
Paperboy.on('priceCheck:apiComplete', callback);

// ... later if required, remove the listener.
Paperboy.off('priceCheck:apiComplete', callback);

Demo

Feel free to view source to see demo implementation.

How can I change my hotel features?

Please let your Customer Success Manager know if you would like to change any of your features.

Why can't I see my widget?

There could be a number of reasons why the widget is not showing when you expect it to.

Depending on the render settings your Customer Success Manager has set, the widget may not be showing because you are being undercut by a travel agent. This is known as "OTA Higher". To resolve this, try sending a very low pf-direct-price from your price-fighter div container whilst integrating to get the widget to appear.
Another common problem is that the price-fighter-widget div container may have been positioned somewhere that is not visible or incorrectly sized on the page itself. It's up to you when integrating to ensure that this container is correctly displayed and with the correct dimensions.
If you have integrated the widget using our advanced activation API with data-pf-activation attribute set to 'deferred' or 'scripted', you may have not forgotten to activate the widget.

If you are certain that eveything above is correct, you should verify that the widget is indeed set to display: { render: visible } by looking at the response of the very last Triptease `query` network request in your browsers network panel. If this is still set to 'hidden' or you still cannot see the widget, you may wish to contact your Customer Success Manager.

I would like to add a "Book now" button to the widget, how can I do this?

You cannot modify the HTML of the widget, only the CSS but this certainly doesn't mean you cannot add your own features and customisations by integrating the widget into your website with your own page content placed over and around the widget. Embedding the widget this way can make it appear seamlessly in your website. Coupled with custom styles, events and the Paperboy.PriceCheck.skeletonAddClass API, you can communicate and change styles dynamically between the widget and your website.

Do I have to show "Triptease" terms and conditions?

Yes. All users must be able to view the terms and conditions and Triptease logo.

I want to style my widget differently in a specific language. Is it possible?

Yes you can style your widget to look completely different based on the language you provide via data-pf-language. You can style this in your custom stylesheet using:

.html[lang="ar"] .widget {
  /* Do Arabic specific styles here */
}

If we support the language code provided, we will also include a language direction in the HTML tag that you can also style from. For example, Arabic and Hebrew read from right to left:

.html[dir="rtl"] .widget {
  /* Do language direction specific styles here */
}

Can I use multiple widgets on one page?