什麼是網站整合？
網站整合讓您可以將預約系統頁面直接嵌入到您現有的商業網站中。使用 iframe 技術，訪客可以在不離開您網站的情況下查看行事曆、預約課程、瀏覽課卡等。
系統採用響應式網頁設計，確保在桌面電腦、平板和手機上都能完美顯示。
主要優點：
- 同步更新 - 預約系統中的變更會自動顯示在您的網站上
- 節省時間 - 當課程時間表或價格變更時，無需手動更新您的網站
- 鼓勵預約 - 訪客可以直接從您的網站查看時間表並即時預約
- 專業外觀 - 內容與您的網站設計無縫融合
- 跨平台相容 - 可在任何裝置上運作，自動調整版面
整合範例
以下是嵌入到商業網站中的預約行事曆範例。行事曆顯示為網站的原生部分，同時保持完整的預約功能：
注意嵌入的內容如何與網站設計相匹配，讓客戶可以直接瀏覽和預約。
設定背景顏色
在嵌入之前，請配置背景顏色以匹配您的網站：
- 前往客製功能 → 網站整合
- 在背景顏色區域點擊顏色選擇器
- 選擇與您網站背景相匹配的顏色
- 點擊儲存以套用變更
這可確保嵌入的內容與您的網站設計無縫融合，呈現專業且一致的外觀。
基本 Iframe 程式碼
要嵌入預約系統的內容，請使用 HTML iframe 標籤。以下是基本結構：
<iframe
width="100%"
height="1200px"
src="https://app.omceanbooking.com/您的公司/頁面"
frameborder="0"
></iframe>程式碼說明：
- width="100%" - 讓 iframe 填滿其容器的完整寬度
- height="1200px" - 以像素設定高度（根據內容調整）
- src - 您要嵌入的頁面網址
- frameborder="0" - 移除 iframe 周圍的邊框
範例 - 嵌入您的行事曆：
<iframe
width="100%"
height="1200px"
src="https://app.omceanbooking.com/demo/calendar"
frameborder="0"
></iframe>將 demo 替換為您公司的唯一識別碼。
可嵌入的頁面
您可以嵌入預約系統中的各種頁面。只需更改網址中的頁面名稱：
| 頁面 | 網址路徑 | 說明 |
|---|---|---|
| 行事曆 | /calendar | 包含所有課程的完整預約行事曆 |
| 課卡 | /passes | 可用的課卡和會員資格 |
| 課程 | /classes | 所有提供的課程類型列表 |
| 教練 | /instructors | 教練簡介和時間表 |
| 您的 Instagram 相簿動態 | ||
| 關於我們 | /about | 商家資訊頁面 |
| 商店 | /shop | 商品銷售商店 |
範例 - 嵌入 Instagram 相簿：
<iframe
width="100%"
height="800px"
src="https://app.omceanbooking.com/demo/instagram"
frameborder="0"
></iframe>逐步設定指南
按照以下步驟將 iframe 新增到您的網站：
步驟 1：進入您網站的管理面板
登入您網站的內容管理系統 (CMS) 或主機控制面板。常見的存取點包括：
- WordPress：yourwebsite.com/wp-admin
- Wix/Squarespace：透過其儀表板
- 自訂網站：聯繫您的網頁開發人員或主機供應商
步驟 2：導航到頁面編輯器
找到您要嵌入預約內容的頁面並開啟進行編輯。
步驟 3：新增 HTML/嵌入區塊
大多數網站建構器都有新增自訂 HTML 或嵌入程式碼的選項：
- WordPress：新增「HTML」或「自訂 HTML」區塊
- Wix：新增「嵌入」→「HTML iframe」
- Squarespace：新增「程式碼」區塊
步驟 4：貼上 Iframe 程式碼
複製並貼上 iframe 程式碼，替換公司名稱和頁面：
<iframe
width="100%"
height="1200px"
src="https://app.omceanbooking.com/您的公司/calendar"
frameborder="0"
></iframe>步驟 5：儲存並預覽
儲存您的變更並預覽頁面，以確保嵌入的內容正確顯示。
設定選項
有兩種方式可以設定網站整合：
選項 1：自行設定
使用管理面板中的操作指南獲取逐步說明。如果您符合以下條件，此選項很理想：
- 有權限進入您網站的管理面板
- 熟悉編輯 HTML 或使用您的 CMS
- 希望立即實施
如果您遇到任何問題，我們的支援團隊可以提供有限的技術協助。
選項 2：讓我們為您設定
我們提供專業的設定服務，由我們的團隊為您處理整合。此選項需要：
- 您的網站登入憑證（使用者名稱和密碼）
- 存取您的網站主機或 CMS
請造訪我們的商店查看價格並購買此服務。如果您符合以下情況，建議選擇此選項：
- 您不熟悉技術設定
- 您的主機供應商有複雜的要求
- 您希望獲得有保證的專業實施
疑難排解提示
如果您的嵌入內容未正確顯示，請嘗試以下解決方案：
內容未顯示：
- 驗證網址是否正確且可在瀏覽器中存取
- 檢查您的公司識別碼是否拼寫正確
- 確保您要嵌入的頁面存在且已啟用
高度問題：
- 調整 iframe 程式碼中的高度值
- 不同頁面可能需要不同的高度（行事曆：1200px，課卡：800px）
- 在桌面和手機上測試以找到最佳高度
樣式衝突：
- 在網站整合設定中設定背景顏色以匹配您的網站
- 使用 frameborder="0" 移除不需要的邊框
- 如果不需要捲軸，請新增 scrolling="no"
手機顯示問題：
- 確保設定 width="100%" 以實現響應式行為
- 在實際手機裝置上測試，而不僅僅是調整瀏覽器大小
- 考慮為手機和桌面使用不同的高度
