【官網設計】如何在官網嵌入 Google 預約日曆

預約時間表可協助管理時間空檔，方便客戶、合作夥伴或親友直接在 Google 日曆的個人預約頁面中跟您預約時間。

步驟一：建立 Google 日曆預約時間表

1. 前往 Google 日曆預約時間表

2. 開始使用 → 選擇工作或商業用途

3. 輸入所需資料

4. 於「建立預約頁面」點擊「建立我的頁面」

5. 從左側目錄設定你的預約時間表

6. 完成設定預約時間表後，預約日曆將會出現在你的 Google 日曆裡

7. 點擊任意一個預約表 → 共用

8. 網站嵌入 → 單一預約頁面 → 內嵌預約頁面 → 複製程式碼

步驟二：嵌入官網後台

1. 前往銷售管道 → 品牌官網 → 官網分頁 → 新增分頁 → 於編輯器裡轉換成代碼頁面 （點擊 < >） → 貼上代碼 → 點擊代碼頁面轉換按鈕（點擊 < >），轉換回普通頁面，確認有出現預約頁面後 → 點擊儲存

1.1 你需要在 Google 預約日曆程式碼前後加上 <div class=“booking-embed”> 和 </div>，請參考以下範例

Google 預約程式碼：

<!-- Google Calendar Appointment Scheduling begin -->
<iframe src="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3IRQKKCH8ufjXUCrJPaobePpyaRsxiz7YIS6ZZqJIwCNOY0j6ycq6Ca9liKB2NlX8I_i4RyLYB?gv=true" style="border: 0" width="100%" height="600" frameborder="0"></iframe>
<!-- end Google Calendar Appointment Scheduling -->

於前後加上代碼後：

<div class=“booking-embed”>
<!-- Google Calendar Appointment Scheduling begin -->
<iframe src="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3IRQKKCH8ufjXUCrJPaobePpyaRsxiz7YIS6ZZqJIwCNOY0j6ycq6Ca9liKB2NlX8I_i4RyLYB?gv=true" style="border: 0" width="100%" height="600" frameborder="0"></iframe>
<!-- end Google Calendar Appointment Scheduling -->
</div>

建立分頁後，你可以參考 【品牌官網】導航列設定 新增導航列，把分頁呈現在官網前台

2. 點擊代碼頁面轉換按鈕（點擊 < >），轉換回普通頁面，確認有出現預約頁面後 → 點擊儲存

3. 或者你也可以嵌入在特定的商品頁面。

只需前往商品編輯頁面 → 於編輯器裡轉換成代碼頁面 → 在你要的位置貼上代碼 → 點擊代碼頁面轉換按鈕，轉換回普通頁面 → 點擊儲存

設定效果

分頁

商品頁

更新時間： 05/02/2026