跳转到内容
Academy

卡片

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

  • 点击 预订 按钮。
  • 点击 图库 链接查看该库存的所有照片和视频。
  • 点击 最佳优惠 链接（如果有）查看价格最优的房型。
  • 点击 酒店详情 链接（如果有）查看物业信息。

卡片支持多面设计，以最小化卡片尺寸并对数据进行分类；使用户更易于理解，并增加将用户转化为预订的机会。

卡片有两面或三面：

  • 酒店卡片正面显示物业数据，背面显示最佳房型。两面价格均显示酒店的最佳价格。
  • 房型卡片正面显示房型数据，背面显示物业数据。正面显示房型价格，背面显示酒店最佳价格。
  • 其他所有卡片（例如水疗、餐厅等）有三面。例如：水疗数据显示在正面，附带水疗的最佳价格。第二面显示最佳价格房型的房型数据。第三面显示物业数据及最佳价格房型。
卡片预览
带有可用性的正面房型卡片

以上是我们的房型卡片示例。它包含物业、评价和房型数据，以及取消政策和餐食信息。

本文余下部分将指导您如何创建、定制并向用户展示卡片。

创建卡片

Section titled “创建卡片”
操作
搜索结果操作

以上图片取自搜索，展示了您可以对搜索结果执行的一些操作。其中一个操作是 制作卡片。 点击该按钮，将跳转到我们的卡片表单页面，您可以开始定制您的卡片。

定制卡片

Section titled “定制卡片”

该表单允许您通过以下方式定制卡片：

  1. 为卡片命名，方便您记住卡片内容。
  2. 选择您想应用于此卡片的定制。
  3. 选择用户首次看到的初始卡片面。默认是该库存的原生面。
  4. 选择您想在卡片上使用的徽章。徽章让用户可以基于综合指标（如“环保”）比较库存。
  5. 添加关键词，使用逗号分隔，这些关键词将被网络爬虫使用。
  6. 添加用户希望看到的语言的标题和描述。
  7. 选择一个或多个图片，当用户点击 图库 链接时显示。
  8. 点击 保存 按钮继续。

保存卡片后，您将被重定向到卡片页面，您的卡片现在可以与全世界分享。

分享卡片

Section titled “分享卡片”
卡片
带有折叠操作菜单的卡片

以上图片展示了卡片的所有可用操作：

  • 更新 更新您的卡片配置。
  • 添加到 WinkLinks 将卡片添加到您的 WinkLinks 账户。
  • 嵌入 向您展示如何将此卡片作为卡片嵌入您的网站。
  • 与 WordPress 一起使用 向您展示如何使用我们的WordPress 插件将此卡片嵌入您的网站。

下面我们将详细介绍其中一些选项。

嵌入

Section titled “嵌入”
<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

Section titled “API”

想要管理卡片的开发者可以访问开发者 > API > 库存。

进一步阅读

Section titled “进一步阅读”