Cards

一張卡片代表供應商（例如飯店或體驗提供者）或庫存（即房間類型、會議室、水療中心等），並透過互動式、可預訂的卡片 UI 顯示詳細資訊。用戶可以透過以下方式與卡片互動：

點選Book 按鈕。
點選Gallery 連結查看此庫存的所有照片和影片。
點選Best deal 連結（如果有）可查看價格最優惠的房間。
點選Hotel details 連結（如果有）可查看房產資訊。

一張卡片支援多個面，以最小化卡片的尺寸，並實現數據的分類；讓用戶輕鬆使用，並讓您有更大的機會將用戶轉化為預訂。

一張牌有兩面或三面：

飯店卡正面顯示飯店訊息，背面顯示最佳房型。兩側的價格均顯示飯店的最佳價格。
房型卡正面顯示房型數據，背面顯示房源數據。價格正面顯示該房型的價格，背面則顯示該飯店的最佳價格。
所有其他卡片（例如水療餐廳等）都有 3 個面。範例：水療數據在首頁顯示，並顯示水療的最佳價格。價格最優的房型資料位於第二面。房產資料以及最優惠價格的房間位於第三張卡片上。

以上是我們的房型卡的範例。它包含酒店、評論和房間數據以及取消政策和餐飲。

本文的其餘部分將引導您了解如何建立、自訂並向使用者展示卡片。

創建卡片

上面的圖片取自搜尋並向您展示您可以對搜尋結果執行的一些操作。其中一項行動是Make a card。點擊該按鈕，它將把您重定向到我們的卡片表單頁面，您可以在其中開始自訂您的卡片。

客製化卡片

此表格可讓您透過以下方式自訂您的卡片：

給它一個名字，以便您記住該卡片的內容。
選擇客製化您想申請這張卡。
選擇您希望使用者先看到的初始卡面。預設情況下，它是該庫存的原生面。
選擇 badge 您想要在卡片上使用的。徽章可讓用戶根據以下綜合指標比較庫存： eco-friendly。
新增關鍵字，以逗號分隔，用於網路爬蟲。
使用您希望用戶看到的語言添加標題和描述。
選擇一個或多個將在使用者點擊時顯示的圖像 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 行展示如何使用wink-內容載入器 Web 組件並告訴它為您的代碼獲取客房卡。
第 11 行向您展示如何將我們的 Javascript 嵌入到您的網站。
第 13 行展示如何嵌入wink-app-loader Web 元件並告訴它要取得您的頁面層級配置首選項。

API

想要管理卡片的開發者可以前往開發人員 > API > 庫存。

進一步閱讀

進一步了解我們的收藏Web 元件。
詳細了解Wink WordPress 插件。