跳转到内容
Wink

Webflow

Webflow 支持在三个位置使用自定义 HTML 和 JavaScript：全站 <head>、全站 </body> 以及每个元素的代码嵌入。这使得集成 Wink Web 组件变得非常简单。

全站加载 Wink 脚本

Section titled “全站加载 Wink 脚本”
  1. 在 Webflow Designer 中，打开 项目设置 → 自定义代码。
  2. 在 Head 代码 部分，添加样式表： 
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  3. 在 页脚代码 部分，添加脚本和应用加载器（替换 YOUR_CLIENT_ID）： 
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
    <wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>
  4. 点击 保存更改。

向特定元素添加组件

Section titled “向特定元素添加组件”
  1. 在 Designer 中，选择您想放置组件的 Div 或 Section。
  2. 在右侧面板，点击 </> 嵌入 图标（或从添加面板中添加 HTML 嵌入 元素）。
  3. 粘贴组件 HTML，例如： 
    <wink-content-loader
      layout="RANKED"
      id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  4. 点击 保存并关闭。

单页自定义代码

Section titled “单页自定义代码”

如果您只需要在特定页面使用 Wink，请使用单页代码注入，而非全站注入：

  1. 打开目标页面的 页面设置（页面面板中的齿轮图标）。
  2. 滚动到 自定义代码 → </body> 标签前。
  3. 粘贴与上述相同的脚本和应用加载器。
  4. 保存页面设置。

可用组件

Section titled “可用组件”
组件HTML 标签用途
内容加载器<wink-content-loader>显示酒店卡片、网格、地图
查找<wink-lookup>目的地搜索栏
搜索按钮<wink-search-button>打开行程选择器
账户按钮<wink-account-button>登录 / 用户菜单
行程按钮<wink-itinerary-button>显示当前行程
行程选择器<wink-itinerary-picker>完整行程表单
购物车<wink-shopping-cart-button>购物车摘要按钮

完整属性参考请参见 Web Components。

进一步阅读

Section titled “进一步阅读”