Shareable 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/s/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.

Create a link

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 link. Click on that button and it will redirect you to our shareable link form page where you can start customizing your link.

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.

After saving your link, you are redirected to your shareable 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 WinkLinks Adds the link to your WinkLinks account.
Copy Copies the link to your clipboard so you can easily share it anywhere you want (including WinkLinks).
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.

API

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