Cards

一张卡片代表单个供应商（例如酒店或体验提供商）或库存（例如房型、会议室、水疗中心等），并通过可预订的交互式卡片式 UI 显示详细信息。用户可以通过以下方式与卡片交互：

点击Book 按钮。
点击Gallery链接查看此库存的所有照片和视频。
点击 Best deal链接（如果有）可查看价格最优惠的房间。
点击 Hotel details链接（如果有）可查看房产信息。

卡片支持多种面，以最小化卡片尺寸并对数据进行分类；使用户可以轻松使用，并让您有更大的机会将用户转化为预订。

一张牌有两面或三面：

酒店卡片正面显示酒店信息，背面显示最佳房型。正反两面均显示酒店的最佳价格。
房型卡正面显示房型数据，背面显示酒店信息。价格卡正面显示该房型的价格，背面显示该酒店的最佳价格。
所有其他卡片（例如水疗餐厅等）都有三面。例如：水疗数据显示在首页，其中包含水疗的最佳价格。最佳价格房型的房型数据显示在卡片的第二面。房产数据以及最佳价格房型显示在卡片的第三面。

以上是我们房型卡的示例。它包含酒店、评论、房间信息以及取消政策和餐饮信息。

本文的其余部分将引导您了解如何创建、自定义和向用户展示卡片。

创建卡片

上面的图片取自搜索并向您展示您可以对搜索结果执行的一些操作。其中一项操作是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-loaderWeb 组件并告诉它获取您的页面级配置首选项。

API

想要管理卡片的开发者可以前往开发人员 > API > 库存。

进一步阅读

详细了解我们的收藏Web 组件。
详细了解Wink WordPress 插件。