Skip to content
Wink Logo Academy

Grids

A grid represents a list of suppliers and inventory and exposes the details via an interactive, bookable, grid UI. The grid supports displaying any inventory from your curated list or saved search. A user interacts with a grid the same way she interacts with an individual card with one additional feature:

  1. Paginate through the grid by clicking the Show more button (when more items are available).
Grid preview
Grid showing multiple room types

Above is an example of our grid showing a list of room type cards.

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

Grid types

There are three types of grids:

  1. Grid based on a curated list.
  2. Grid based on a saved search.
  3. Grid grid based on a location and sort criteria (i.e. Ranked grid).

Curated list grid

This is a grid that uses the inventory you’ve collected in one of your curated lists and converts the list to bookable travel inventory you can show to your users.

Create

Navigate to Inventory > Curated Lists from the top navigation bar. For this example, we will use your Favorites list. If you haven’t yet added anything to your Favorites, go to Search to learn how.

Create curate list grid
Create curated list grid form
  1. Click the Actions button on the Favorites list.
  2. Click the Create a grid button.
  3. A new window will display, allowing you to name your grid. See below.
  4. Click OK button to continue.

Your grid has been created. Navigate to Tools > Grids from the top navigation bar and click the Curated Grids tab to see your new grid.

Customize

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

  1. Give it a name for you to remember what the grid is about.
  2. Select the Customization you want to apply to this grid.
  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. Click the Save button to continue.

Share

Curated list grid
Curated list grid entry with collapsed actions menu

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

  • Update Updates your grid configuration.
  • Add to WinkLinks Adds the grid to your WinkLinks account.
  • Embed Shows you how to embed this grid as a Grid into your website.
  • Use with WordPress Shows you how to use our WordPress plugin to embed this grid 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="LIST"
       id="9a212b5e-62a7-11ef-ac3f-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 grid 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 grid 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.

Saved search grid

This is a grid that uses the inventory in your saved search query and converts the search results to bookable travel inventory you can show to your users.

Create

Navigate to Inventory > Saved searches from the top navigation bar. If you haven’t yet created a saved search, go to Search to learn how.

Create saved search grid
Create saved search grid form
  1. Click the Actions button on your saved search.
  2. Click the Create a grid button.
  3. A new window will display, allowing you to name your grid. See below.
  1. Click OK button to continue.

Your grid has been created. Navigate to Tools > Grids from the top navigation bar and click the Saved Search Grids tab to see your new grid.

Customize

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

  1. Give it a name for you to remember what the grid is about.
  2. Select the Customization you want to apply to this grid.
  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. Click the Save button to continue.

Share

Saved search grid
Saved search grid entry with collapsed actions menu

Embed

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="LIST"
       id="be3130d5-62a7-11ef-ac3f-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 grid 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 grid 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.

Ranked grid

Create

Create a ranked grid by navigating to Tools > Grids and click on the Ranked Grid tab. Click on the Create ranked grid button.

Customize

The form lets you customize your ranked grid in the following ways:

  1. Choose a destination. E.g. Tokyo.
  2. Give it a name for you to remember what the grid is about. E.g. Eco-friendly hotels in Tokyo
  3. Select the Customization you want to apply to this grid.
  4. Select the initial card face you want users to see first. By default, it is the native face of that inventory.
  5. Choose what characteristic to sort properties by. E.g. Eco-friendliness.
  6. Add keywords, separated by a comma, that will be used by Web Crawlers.
  7. Add titles and descriptions in the languages you want the user to see.
  8. Click the Save button to continue.

After saving your ranked grid, you are redirected to your ranked grids page and your grid is now ready to be shared with the world.

Share

Ranked grid
A ranked grid with collapsed actions menu

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

  • Update Updates your grid configuration.
  • Add to WinkLinks Adds the ranked grid to your WinkLinks account.
  • Embed Shows you how to embed this grid as a Grid 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="RANKED"
       id="2483d55e-62a5-11ef-ac3f-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 grid 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 ranked grid 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 grids can head over to Developers > API > Inventory.

Further reading