把預約頁放上網站：連結、區塊、短碼、浮動按鈕

預約服務建好後，要讓客戶看得到才會有人預約。本篇講四種把預約頁放上網站的方法：直接連結、區塊嵌入、短碼嵌入、HTML 浮動按鈕，以及哪種方法適合什麼情境。

方法 1：直接連結（最快）#

每個預約服務都有自己的網址，直接把網址貼到任何地方就能用。

• 主持人個人預約頁：https://你的網域/wang-ming（顯示這位主持人的所有服務）
• 單一服務預約頁：https://你的網域/wang-ming/30min-consult（直接到指定服務的時段選擇）

取得網址：日曆內 → 上方「複製連結」（Copy Link）按鈕。

適合放：

• 網站主選單（「立即預約」連結）
• Email 簽名檔
• 社群貼文、IG 簡介、LINE 官方帳號
• AI 名片的「連結」區塊

方法 2：FluentBooking 區塊（嵌入頁面內）#

把預約日曆直接嵌入到「服務頁」「聯絡頁」「諮詢頁」內，客戶不用跳轉就能挑時段。

步驟：

1. 編輯文章/頁面，點「+」加區塊
2. 搜尋「FluentBooking」，找到 FluentBooking 區塊
3. 區塊設定欄選要嵌入哪一個日曆/活動
4. 儲存頁面，前台會直接顯示完整預約日曆

適合放：

• 服務介紹頁底部
• 「預約諮詢」獨立頁面
• 產品/方案頁的 CTA 區段

方法 3：短碼（Shortcode）#

用在不能放區塊的地方（側邊欄、頁尾、自訂模板、外掛內容區）。

FluentBooking 提供以下短碼：

• [fluent_booking_calendar slug="wang-ming/30min-consult"] 嵌入單一活動的日曆
• [fluent_booking_team] 嵌入團隊頁（顯示所有主持人）

短碼可以放：頁面/文章內容、Widget 區（外觀 → 小工具）、自訂 HTML 區塊。

方法 4：浮動按鈕（每頁都有預約入口）#

適合想讓「網站每一頁都有預約入口」的情境。做法是用秒站 AI 名片的全站浮動按鈕，把按鈕的目的地網址改成預約頁網址。

細節在「AI 名片浮動按鈕」這篇文章說明。

怎麼挑嵌入方式#

情境	建議方法
網站主選單放「立即預約」	方法 1：直接連結
服務頁底部嵌入	方法 2：區塊
側邊欄、頁尾、Widget	方法 3：短碼
每頁都有預約入口	方法 4：浮動按鈕
Email 簽名、社群	方法 1：直接連結
AI 名片連結	方法 1：直接連結

常見問題#

嵌入頁面後，預約日曆樣式跟我網站不搭？#

到 FluentBooking →「設定」→「外觀」（或活動類型內的「設計」頁籤）調整主色、字體、圓角，會跟著你選的色彩方案套版。

手機版會自動 RWD 嗎？#

會。預約日曆已內建 RWD，手機會切成全螢幕的單欄日期選擇器，平板會用兩欄佈局。

同一頁可以嵌入多個預約日曆嗎？#

可以，但建議一頁一個，避免客戶選擇困難。要做「多服務選單」改用方法 1 連到主持人個人預約頁，那邊會自動列出所有服務。