Cards

カードは単一のサプライヤー（ホテルや体験プロバイダーなど）または在庫（客室タイプ、会議室、スパなど）を表し、インタラクティブで予約可能なカードUIを通じて詳細を表示します。ユーザーは以下の方法でカードを操作できます。

クリックBook ボタン。
クリックGalleryこの在庫のすべての写真とビデオを見るにはリンクをクリックしてください。
クリック Best dealリンクがあれば、最安値の部屋が表示されます。
クリック Hotel details物件情報を表示するためのリンク（ある場合）

カードは複数の面をサポートしており、カードのサイズを最小限に抑え、データを分類できるため、ユーザーが簡単に使用できるようになり、ユーザーを予約に転換する可能性が高まります。

カードには 2 面または 3 面があります。

ホテルカードの表面には施設の詳細情報が、裏面には最適な客室タイプが記載されています。料金は両面に表示され、ホテルの最安料金が表示されます。
客室タイプカードは、表面に客室タイプ、裏面に宿泊施設の情報が表示されます。料金カードは、表面に客室タイプの料金、裏面にホテルの最安料金が表示されます。
その他のカード（例：スパレストランなど）は3面あります。例：スパのデータは1面目に表示され、スパの最安料金が表示されます。2面目には、最安料金の客室タイプ情報が表示されます。3面目には、施設情報と最安料金の客室が表示されます。

上記は客室タイプカードの例です。施設、レビュー、客室データに加え、キャンセルポリシーと食事情報も記載されています。

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

カードを作成する

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

カードをカスタマイズ

このフォームでは、次の方法でカードをカスタマイズできます。

カードの内容がわかるように、カードに名前を付けます。
選択してくださいカスタマイズこのカードに申し込みたい。
ユーザーに最初に表示するカードの表面を選択します。デフォルトでは、そのインベントリのネイティブの表面になります。
選択してください badge カードに使用したいバッジ。バッジを使用すると、ユーザーは集計指標に基づいて在庫を比較できます。 eco-friendly。
使用するキーワードをカンマで区切って追加します。ウェブクローラー。
ユーザーに表示したい言語でタイトルと説明を追加します。
ユーザーがクリックしたときに表示される画像を1つ以上選択します。 Gallery リンク。
クリック Save 続行するにはボタンをクリックしてください。

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

シェアカード

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

アップデートカードの設定を更新します。
WinkLinksに追加WinkLinks アカウントにカードを追加します。
埋め込みこのカードをカードあなたのウェブサイトに。
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行目は、ウィンクコンテンツローダーWeb コンポーネントを作成し、コード用のゲストルームカードを取得するように指示します。
11 行目では、Javascript をサイトに埋め込む方法を示しています。
13行目は、ウィンクアプリローダーWeb コンポーネントにページレベルの構成設定を取得するように指示します。

API

カードを管理したい開発者は、開発者 > API > 在庫。

さらに読む

当社のコレクションについてさらに詳しくWebコンポーネント。
詳細はこちらウィンクWordPressプラグイン。