Web Components

Web Components is a standard that lets you integrate entire Javascript features into your website without knowing how to code. Thanks to this cool technology, it lets you embed Wink travel inventory with very little fuss. This article steps you through our collection of web components and shows you how to use them.

Embed Wink

There are three things you have to include into any page where you want to display one of our web components.

Include our stylesheet.
Include our Javascript.
Include our application loader.

Stylesheet

Include our CSS styles in the head of your document.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
</html>

Javascript

Include our Javascript at the bottom of your document. (We recommend immediately above the end body tag).

<html>
  <body>
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
  </body>
</html>

Your site is now ready and able to display our web components.

Components

Read about our component library below.

Application loader

The loader is responsible for keeping state and managing interaction between our components. (Include it below our Javascript).

<html>
  <body>
    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Content loader

The content loader is at the heart of our web component library. It’s responsible for displaying your inventory (cards, grids, maps).

Available attributes:

layout
id
sort

The attribute sort is only available when layout is RANKED and you don’t want to use an existing ranked grid. For these cases, leave id empty.

Available layout types:

AD_BANNER
MAP
HOTEL
GUEST_ROOM
MEETING_ROOM
SPA
RESTAURANT
ACTIVITY
ATTRACTION
PLACE
ADD_ON
LIST
SEARCH
RANKED

Available sort types:

MEMBER
PRICE_LOW_TO_HIGH
PRICE_HIGH_TO_LOW
PRICE
POPULARITY
ECO
EXPERIENCE
PERK
LOYALTY
PACKAGE

<html>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>
  </body>
</html>

Samples can be found for cards, grids and maps.

Lookup

Lookup works great together with one of your ranked grids. It lets your users search for hotel and destination and the grid updates in response to their search result.

<html>
  <body>
    <wink-lookup></wink-lookup>
  </body>
</html>

Clicking on the component above opens a modal that lets you type in the destination or hotel you are searching for.

Itinerary

The itinerary button shows the current itinerary on the button. When you click it, the full itinerary picker displays as a modal.

<html>
  <body>
    <wink-itinerary></wink-itinerary>
  </body>
</html>

Itinerary web component

Clicking on the button above opens a modal that lets you update your itinerary.

Search

Search is a icon-only button of the itinerary picker. When you click it, the full itinerary picker displays as a modal.

<html>
  <body>
    <wink-search></wink-search>
  </body>
</html>

Clicking on the button above opens a modal that lets you update your itinerary.

Itinerary form

The itinerary component displays an itinerary form users can interact with.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

Itinerary formweb component — *Itinerary form web component*

By changing the itinerary, in any of our itinerary component, triggers the itinerary update event to any inventory you currently have displaying on the page.

Account

The account button allows you to add Wink authentication to your site.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Account web component — *Account button web component*

Clicking on the button, when the user is un-authenticated, will forward the user to get authenticated. When the user is authenticated, it display the user’s profile icon.

When you click on the button, it opens up the user user-specific dropdown.

Embed TripPay

There are two things you have to include into any page where you want to use the TripPay payment web component.

Include our stylesheet.
Include our Javascript.

Stylesheet

Include our CSS styles in the head of your document.

<html>
  <head>
    <link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
  </head>
</html>

Javascript

Include our Javascript at the bottom of your document. (We recommend immediately above the end body tag).

<html>
  <body>
    <script src="https://elements.trippay.io/elements.js" type="module" defer></script>
  </body>
</html>

Your site is now ready and able to display our web components.

Components

Payment

The payment component lets you inform TripPay that a traveler wants to purchase something and the rules and prices for those items.

There is one required attribute to the widget:

id The identifier of the booking contract you want executed.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

The widget prepares the contract for execution and displays payment details (Figure 1) to the user to finalize the booking.