Links

Shareable links is a core feature of Wink and it rose out of the need to communicate inventory and pricing in a dynamic way through the simplest way possible on the Internet; namely the hyper link.

https://trvl.as/3xWCH

Above is an example of one of our links. It’s short and portable… even short enough to remember. Though short, this link packs an explosive amount of information, such as:

Your App ID.
Your Affiliate ID.
The image(s) and text to display to the user.
The look-n-feel (i.e. theme, colors and more).
The itinerary to use for our price query (2 adults, 1 night).
The currency to display price in.
The language to display text in.

The rest of this article walks you through how to create, customize and share your links, and how a link turns into a card.

Create a link

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

You can also start a link from:

Marketing > Links, where hotels have a Create link button that makes a link to their own property.
A master rate that is on sale: use Create link in the rate card’s actions (Rates > Master rates). The link opens on that room type and rate plan.

Make a link is disabled for a hotel until it has an active sales channel.

Customize link

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

Give it a name for you to remember what the link is about.
Select the Customization you want to apply to this link.
Add keywords, separated by a comma, that will be used by Web Crawlers.
Optionally enter you X account handle or Facebook App ID.
Add titles and descriptions in the languages you want the user to see.
Select one, or more, images that will show when you share the link on platforms such as Facebook or LinkedIn.
Choose a theme / overlay that adds a branded design on top of the image(s) you selected. Note: This is how you get prices to display on top of the image.
Click the Save button to continue.

Shareable link — *A shareable link entry*

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

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

Preview Shows you a quick overview of how the link was configured and what it will look like to the user.
Update Updates your link configuration.
Add to Link manager Adds the link to your Link manager account.
Copy Copies the link to your clipboard so you can easily share it anywhere you want (*including Link manager *).
Share Opens up a new window with options to share on many social networks and messaging platforms.
QR code Generates a QR code that you can share on platforms like IG that are more image-focused.
Embed Shows you how to embed this link as an Ad Banner into your website.
Use with WordPress Shows you how to use our WordPress plugin to embed this link into your website.

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

Preview

When you click on Preview, you will see an image with your theme applied. When you share the link on social media, such as Facebook, you can expect to see the same thing show up in your feed along with your title and description.

If you click on the Share button, a new window opens up with a convenient way for you to share directly to your favorite social networks and messaging apps. Click any of the icon buttons to continue posting your link on that network. Note: Some buttons will only show when you are sharing from your mobile device.

QR code

If you’d like to share a QR code instead of a link, click the QR code button and new window will appear with your QR code.

How to save your QR code:

If you are on your laptop, right click on the image and select to Save image.
If you are on your mobile phone:
- Press down and hold your finger on top of the image until an option appears to save the image to your Photos.
- Take a screenshot of the QR code, crop it to fit, and save to Photos.

Embed

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="AD_BANNER"
       id="3xWCH"
    ></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 link, as an ad banner, 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 an ad banner 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.

Links become cards

A link on its own is a short URL that opens the booking engine. It becomes a card once you either embed it on your website with our Web Components or add it to Link manager. There is no separate card to build: the same link, shown inside a page, is a card.

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 traveler 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 its size and to categorize the data, making it easily consumable and giving you a greater chance to convert the traveler 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 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 face.

Card preview — *Front-facing room type card with availability*

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

To embed a link as a card, use Embed on the link and the layout of the card you want, for example GUEST_ROOM:

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

The surrounding page setup is the same as in the ad banner example above.

API

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