カード

カードは単一のサプライヤー（例：ホテルや体験提供者）または在庫（例：部屋タイプ、会議室、スパなど）を表し、インタラクティブで予約可能なカードUIを通じて詳細を表示します。
ユーザーはカードに対して以下の操作が可能です：

Book ボタンをクリックする。
Gallery リンクをクリックして、この在庫のすべての写真や動画を見る。
利用可能な場合は Best deal リンクをクリックして、最もお得な部屋を確認する。
利用可能な場合は Hotel details リンクをクリックして、施設情報を見る。

カードは複数の面を持ち、カードのサイズを最小限に抑えつつデータを分類します。これによりユーザーが情報を簡単に理解でき、予約へのコンバージョン率を高めます。

カードは2面または3面のいずれかです：

ホテルカードは表面に施設データ、裏面に最良の部屋タイプを表示します。価格は両面ともホテルの最良価格を表示します。
部屋タイプカードは表面に部屋タイプのデータ、裏面に施設データを表示します。価格は表面に部屋タイプの価格、裏面にホテルの最良価格を表示します。
その他のカード（例：スパ、レストランなど）は3面あります。例：スパのデータが表面に最良価格とともに表示され、2面目に最良価格の部屋タイプデータ、3面目に施設データと最良価格の部屋が表示されます。

上記は部屋タイプカードの例です。施設、レビュー、部屋のデータに加え、キャンセルポリシーや食事情報が含まれています。

この記事の残りの部分では、カードの作成、カスタマイズ、ユーザーへの公開方法を説明します。

カードを作成する

上記はSearchからの画像で、検索結果でできることの一部を示しています。その中の一つが Make a card です。
このボタンをクリックするとカードフォームページにリダイレクトされ、カードのカスタマイズを開始できます。

カードをカスタマイズする

フォームでは以下の方法でカードをカスタマイズできます：

カードの内容を覚えやすい名前を付ける。
このカードに適用したいカスタマイズを選択する。
ユーザーに最初に見せたいカードの面を選択する。デフォルトはその在庫のネイティブ面です。
カードに使用したいバッジを選択する。バッジはユーザーが エコフレンドリー などの集約指標で在庫を比較できるようにします。
Webクローラーが使用するキーワードをカンマ区切りで追加する。
ユーザーに見せたい言語でタイトルと説明を追加する。
ユーザーが Gallery リンクをクリックしたときに表示される画像を1枚以上選択する。
Save ボタンをクリックして続行する。

カードを保存すると、カードページにリダイレクトされ、カードが世界に共有できる状態になります。

カードを共有する

上記はカードに利用可能なすべてのアクションを示す画像です：

Update カードの設定を更新します。
Add to WinkLinks カードをWinkLinksアカウントに追加します。
Embed このカードをCardとしてウェブサイトに埋め込む方法を表示します。
Use with WordPress 当社のWordPressプラグインを使ってこのカードをウェブサイトに埋め込む方法を表示します。

以下でこれらのオプションの一部を詳しく説明します。

埋め込み

<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>

カードをサイトに埋め込む方法は以下の通りです：

3行目はWinkのスタイルをサイトに埋め込む方法を示しています。
6〜9行目は wink-content-loader Webコンポーネントを使い、ゲストルームカードを取得する方法を示しています。
11行目はJavascriptをサイトに埋め込む方法を示しています。
13行目は wink-app-loader Webコンポーネントを使い、ページレベルの設定を取得する方法を示しています。

API

カード管理を行いたい開発者はDevelopers > API > Inventoryにアクセスしてください。

さらに読む

当社のWeb Componentsコレクションについて詳しく学ぶ。
Wink WordPressプラグインについて詳しく学ぶ。