卡片

卡片代表單一供應商（例如飯店或體驗提供者）或庫存（即房型、會議室、SPA 等），並透過互動式、可預訂的卡片介面展示詳細資訊。使用者可以透過以下方式與卡片互動：

點擊 Book 按鈕。
點擊 Gallery 連結查看此庫存的所有照片和影片。
點擊 Best deal 連結（若有）查看最佳價格的房型。
點擊 Hotel details 連結（若有）查看物業資訊。

卡片支援多個面向，以縮小卡片大小並分類資料；讓使用者更容易理解，並提高將使用者轉換為訂單的機會。

卡片有兩面或三面：

飯店卡片正面顯示物業資料，背面顯示最佳房型。價格在兩面皆顯示該飯店的最佳價格。
房型卡片正面顯示房型資料，背面顯示物業資料。正面顯示該房型價格，背面顯示該飯店的最佳價格。
其他卡片（例如 SPA、餐廳等）有三面。例如：SPA 資料顯示在正面，並顯示 SPA 的最佳價格。第二面顯示最佳價格房型的房型資料。第三面顯示物業資料及最佳價格房型。

以上為我們的房型卡片範例。它包含物業、評論和房型資料，以及取消政策和餐飲資訊。

接下來的內容將引導您如何建立、客製化並向使用者展示卡片。

建立卡片

以上圖片取自 Search，展示您可以對搜尋結果執行的一些操作。其中一個操作是 Make a card。點擊該按鈕後，將導向卡片表單頁面，您可以開始客製化您的卡片。

客製化卡片

表單讓您以以下方式客製化卡片：

為卡片命名，方便您記住卡片內容。
選擇您想套用於此卡片的 Customization。
選擇使用者首次看到的卡片面向。預設為該庫存的原生面向。
選擇您想在卡片上使用的徽章。徽章讓使用者能以整體指標（例如 eco-friendly）比較庫存。
新增以逗號分隔的關鍵字，供 Web Crawlers 使用。
新增使用者想看到的語言的標題和描述。
選擇一張或多張圖片，當使用者點擊 Gallery 連結時會顯示。
點擊 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 Component，並告訴它抓取您的客房卡片。
第 11 行示範如何將我們的 Javascript 嵌入您的網站。
第 13 行示範如何嵌入 wink-app-loader Web Component，並告訴它抓取您的頁面層級設定偏好。

API

想管理卡片的開發者可前往 Developers > API > Inventory。

卡片

建立卡片

客製化卡片

分享卡片

嵌入

API

延伸閱讀