跳到內容

立即預訂按鈕

立即預訂 按鈕是飯店業中常見的術語,指的是飯店與能掌握物業可用性與價格的供應商所做的整合,讓旅客能直接預訂房間。此按鈕是飯店能在自家網站上以自訂條件銷售房間的最簡單方式。

許多飯店使用其通路管理系統所附帶的預訂引擎。我們建議飯店在決定使用特定預訂引擎前,先做一些研究並比較原生預訂引擎。

本文主要針對想在自家網站安裝我們免費且高轉換率預訂引擎的飯店。 但…對於任何想在網站上使用我們技術的人來說,也同樣有幫助。

為了最簡單的整合,我們建議使用可分享連結

以下是操作步驟:

  1. 前往 https://extranet.wink.travel
  2. 點擊右上角的 登入 / 註冊 並使用您的用戶帳號登入。
  3. 從左上角下拉選單選擇您要操作的物業。
  4. 點擊導覽列中的 預訂引擎
  5. 頁面會顯示您的連結。
  6. 將此連結提供給您的網站管理員,並用於您的 立即預訂 按鈕。
  7. 您已完成 ✅。

該連結已內嵌來自您所選 自訂 的行程資訊。 您可以進一步自訂連結:

  • 更改所選的自訂 OR
  • 覆寫行程

本文將著重於後者,因為它讓您有更大自由度,讓旅客在您的網站上選擇行程並轉送至 Wink 的預訂引擎。

以下說明如何將您自己的行程隨 URL 一起傳遞。

有效的請求參數:

  • sd 新增開始日期:sd=2024-08-24
  • n 新增住宿晚數:n=1
  • ed 使用結束日期:ed=2024-08-25
  • rc 旅客人數:rc=a2(成人:2)
  • l 請求顯示語言:l=es
  • c 請求顯示貨幣:c=EUR
  • p 新增促銷代碼:p=ABC123

URL 範例如下:

https://trvl.as/abc123?sd=2024-08-24&n=1&rc=a2&l=es&c=EUR

對於更進階的使用情境,您也可以用 + 符號請求多種房型配置:

範例:

https://trvl.as/abc123?sd=2024-08-24&n=1&rc=a2-ca16q1-ca8q1+a2&l=es&c=EUR

  • 房型 1 = 成人:2,兒童:2(16 歲 + 8 歲)
  • 房型 2 = 成人:2

立即預訂 按鈕 HTML 範例:

此範例假設您使用 Bootstrap 作為主要 CSS 函式庫。

<a
href="https://trvl.as/abc123"
target="_blank"
class="btn btn-lg btn-primary"
title="預訂房間"
>
立即預訂
</a>

使用我們的連結作為您的 立即預訂 按鈕還有其他好處:

  • 社群友善 該連結可輕鬆分享到社群媒體,並在您選擇的圖片上方顯示 動態價格
  • 短網址 URL 非常適合分享,您也可以用於 Instagram 個人簡介網址等位置。

有些飯店希望網站功能更完整,整合更深入。此範例將說明如何將 Card 嵌入網站。

以下是操作步驟:

  1. 前往 https://studio.wink.travel
  2. 點擊右上角的 登入 / 註冊 並使用您的用戶帳號登入。
  3. 從左上角選擇您要操作的物業。
  4. 點擊主導覽列的 搜尋
  5. 輸入您的物業名稱並點擊搜尋按鈕。
  6. 在搜尋結果卡片上點擊 操作 連結,選擇 建立 > 製作卡片
  7. 這會建立一張 卡片
  8. 右上角會出現訊息告知您的卡片已準備好,並詢問是否要進一步自訂。
  9. 點擊主導覽列的 工具 > 卡片,您會看到新卡片。
  10. 點擊卡片上的 操作 連結,然後點擊 嵌入
  11. 會開啟新視窗,顯示可複製的 HTML 範例程式碼。
  12. 若要取得您的 Client-ID,請前往 應用程式
  13. 若要取得您的 Configuration-ID,請前往 自訂
  14. 您已完成 ✅。

嵌入卡片 HTML 範例:

<wink-content-loader
layout="GUEST_ROOM"
id="09d7cca4-6ff6-11ef-949b-42004e494300"
></wink-content-loader>

上述 HTML 範例未包含必要的 Wink CSS 與 Javascript;僅為卡片本體。

卡片預覽
面向前方的房型卡片,顯示可用性

預訂者現在可看到動態價格,能更改行程並直接在您的網站上點擊預訂。預訂按鈕會帶您到 Wink 物業登陸頁完成付款。