跳到內容
Wink

Webflow

Webflow 支援在三個位置使用自訂 HTML 和 JavaScript：全站 <head>、全站 </body>，以及每個元素的程式碼嵌入。這使得整合 Wink 網頁元件變得簡單。

全站載入 Wink 腳本

Section titled “全站載入 Wink 腳本”
  1. 在 Webflow Designer 中，打開 Project Settings → Custom Code。
  2. 在 Head Code 區段，加入樣式表： 
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  3. 在 Footer Code 區段，加入腳本和應用程式載入器（替換 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. 點擊 Save Changes。

將元件加入特定元素

Section titled “將元件加入特定元素”
  1. 在 Designer 中，選擇您想放置元件的 Div 或 Section。
  2. 在右側面板，點擊 </> Embed 圖示（或從新增面板加入 HTML Embed 元素）。
  3. 貼上元件 HTML，例如： 
    <wink-content-loader
      layout="RANKED"
      id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  4. 點擊 Save & Close。

單頁自訂程式碼

Section titled “單頁自訂程式碼”

如果只需要在特定頁面使用 Wink，請使用單頁程式碼注入，而非全站注入：

  1. 打開目標頁面的 Page Settings（頁面面板中的齒輪圖示）。
  2. 滾動至 Custom Code → Before </body> tag。
  3. 貼上與上述相同的腳本和應用程式載入器。
  4. 儲存頁面設定。

可用元件

Section titled “可用元件”
元件HTML 標籤功能說明
Content loader<wink-content-loader>顯示飯店卡片、格線、地圖
Lookup<wink-lookup>目的地搜尋欄
Search button<wink-search-button>開啟行程選擇器
Account button<wink-account-button>登入 / 使用者選單
Itinerary button<wink-itinerary-button>顯示目前行程
Itinerary picker<wink-itinerary-picker>完整行程表單
Shopping cart<wink-shopping-cart-button>購物車摘要按鈕

請參考 Web Components 取得完整屬性參考。

延伸閱讀

Section titled “延伸閱讀”