Skip to content
Wink Logo Academy

Cards

A card represents a single supplier (e.g. hotel or experience provider) or inventory (i.e. room type, meeting room, spa etc) and exposes the details via an interactive, bookable, card UI. A user can interact with a card in the following ways:

  • Click the Book button.
  • Click the Gallery link to see all photos and videos for this inventory.
  • Click Best deal link, if available, to see the best priced room.
  • Click Hotel details link, if available, to see property information.

A card supports multiple faces to minimize the size of the card and to categorize the data; making it easily consumable by the user and gives you a greater chance to convert the user to a booking.

A card has either two or three faces:

  • A hotel card shows property data on the front and the best room type on the back. The price, on both sides, displays the best price for the hotel.
  • A room type card shows room type data on the front and property data on the back. The price displays the price of the room type on the front and the best price for the hotel on the back.
  • All other cards (e.g. spa restaurant etc) have 3 faces. Example: Spa data displays on the front page with the best price of the spa. Room type data for the best priced room is on the second side. Property data along with the best priced room is on the third card face.
Card preview
Front-facing room type card with availability

Above is an example of our room type card. It contains property, review and room data along with cancellation policy and meals.

The rest of this article walks you through how to create, customize and expose the card to your users.

Create a card

Actions
Search results actions

Above is an image taken from Search and shows you some of the things you can do with your search results. One of those actions is Make a card. Click on that button and it will redirect you to our card form page where you can start customizing your card.

Customize card

The form lets you customize your card in the following ways:

  1. Give it a name for you to remember what the card is about.
  2. Select the Customization you want to apply to this card.
  3. Select the initial card face you want users to see first. By default, it is the native face of that inventory.
  4. Select the badge you want to use on the card. A badge lets users compare inventory on an aggregate metric such as eco-friendly.
  5. Add keywords, separated by a comma, that will be used by Web Crawlers.
  6. Add titles and descriptions in the languages you want the user to see.
  7. Select one, or more, images that will show when users click on the Gallery link.
  8. Click the Save button to continue.

After saving your card, you are redirected to your cards page and your card is now ready to be shared with the world.

Share card

Card
Card with collapsed actions menu

Above shows you an image with all the available actions for your card:

  • Update Updates your card configuration.
  • Add to WinkLinks Adds the card to your WinkLinks account.
  • Embed Shows you how to embed this card as a Card into your website.
  • Use with WordPress Shows you how to use our WordPress plugin to embed this card into your website.

We cover some of these options, in more detail, below.

Embed

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>


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


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

Here is how to embed your card into your site:

  • Line 3 shows you how to embed the Wink styles into your site.
  • Lines 6 through 9 shows you how to use the wink-content-loader Web Component and tell it to fetch a guest room card for your code.
  • Line 11 shows you how to embed our Javascript into your site.
  • Line 13 shows you how to embed the wink-app-loader Web Component and tell it to fetch your page-level configuration preferences.

API

Developers who want to manage cards can head over to Developers > API > Inventory.

Further reading