> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

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

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

1. 前往 [Google 日曆預約時間表](https://workspace.google.com/intl/zh-TW/resources/appointment-scheduling/)

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

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_2v84xj.png)

3. 輸入所需資料

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1cxcimv.png)

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_jtq1pe.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1e4x0pl.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_zt7qzb.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_9wtdgv.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_rsfclh.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1qe53x9.png)

### 步驟二：嵌入官網後台

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>
```

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_130innt.png)


建立分頁後，你可以參考  [【品牌官網】導航列設定](https://support.easystore.co/zh-tw/article/44cq5zob54mm5a6y57ay44cr5bco6iiq5yix6kit5a6a-1ojbx2y/) 新增導航列，把分頁呈現在官網前台

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

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_tr2s48.png)

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

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

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_15hsvap.png)
---
### 設定效果

###### 分頁

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_9yd86g.png)

###### 商品頁

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_5jfv9p.png)