系統後台整合設定
網站嵌入模式
將 AI 智慧選材系統嵌入到您的官網中
網站嵌入模式讓您可以將 AI 智慧選材系統無縫整合到現有的官網中，使用者不需要離開您的網站就能體驗產品。
設定流程概覽
網站嵌入的設定分為五個步驟：
- 設定官網連結
- 設定浮動按鈕
- 設定產品頁面按鈕
- 複製安裝程式碼
- 驗證整合
步驟一：設定官網連結
輸入您的官網連結
- 在欄位輸入您的官網網址
- 例如：
https://www.your-company.com
請確保輸入正確的官網連結，錯誤的官網連結可能導致整合無法正常運作。
步驟二：設定浮動按鈕（可選）
浮動按鈕會顯示在您網站的角落，讓訪客可以隨時開啟 AI 智慧選材系統。
按鈕位置
選擇浮動按鈕要顯示在網頁的哪個位置：
- 右下角（推薦）
- 左下角
- 右上角
- 左上角
按鈕文字
自訂按鈕上顯示的文字，例如：
- 「AI 選材體驗」
- 「試試看效果」
- 「空間模擬」
按鈕顏色
選擇按鈕的背景顏色：
- 可以輸入色碼（如
#FF6600） - 或使用顏色選擇器
- 建議選擇與您品牌相符的顏色
啟用/停用
您可以選擇是否啟用浮動按鈕：
- 啟用：按鈕會顯示在所有頁面
- 停用：不顯示浮動按鈕，僅使用產品頁面按鈕
步驟三：設定產品頁面按鈕
如果您的網站有產品頁面，可以在每個產品旁邊加上「體驗」按鈕，點擊後會開啟該產品的體驗畫面。
產品對應
要讓按鈕帶入正確的產品，您需要在按鈕上標記產品識別：
| 屬性 | 說明 | 範例 |
|---|---|---|
data-rd-product-id | 指定產品 ID | data-rd-product-id="prod_123" |
data-rd-variant-id | 指定變體 ID（選填） | data-rd-variant-id="var_456" |
產品 ID 和變體 ID 可以在後台的「商品管理」頁面中查詢。
範例
只指定產品：
<button data-rd-product-id="prod_123">
試鋪此地板
</button>同時指定產品與變體：
<button data-rd-product-id="prod_123" data-rd-variant-id="var_456">
試鋪此顏色
</button>只指定變體（系統會自動找到對應產品）：
<button data-rd-variant-id="var_456">
試鋪此款式
</button>步驟四：複製安裝程式碼
完成設定後，系統會產生一段安裝程式碼。
程式碼說明
安裝程式碼是一段 JavaScript，包含：
- 系統載入腳本
- 您的設定參數
- 自動初始化邏輯
安裝位置
將程式碼貼到您網站的 </body> 標籤之前：
<html>
<head>
...
</head>
<body>
<!-- 您的網站內容 -->
<!-- RoomDreaming 整合程式碼 -->
<script>
// 系統產生的程式碼
</script>
</body>
</html>注意事項
- 程式碼需要放在每個要啟用功能的頁面
- 如果使用模板系統，放在共用的 footer 即可
- 不要修改程式碼內容
如果您不熟悉網站程式碼的修改，建議請您的網站管理員或工程師協助安裝。
步驟五：驗證整合
安裝程式碼後，使用驗證功能確認整合是否成功。
驗證方式
- 點擊「驗證整合」按鈕
- 系統會產生一個測試用的 QR Code
- 用手機掃描 QR Code
- 或在新分頁開啟測試連結
驗證項目
系統會檢查：
- 程式碼是否正確安裝
- 浮動按鈕是否正常顯示
- 產品按鈕是否正確運作
驗證結果
| 結果 | 說明 |
|---|---|
| 成功 | 整合完成，可以正常使用 |
| 部分成功 | 部分功能正常，需要檢查設定 |
| 失敗 | 整合有問題，請檢查程式碼安裝 |
常見問題
浮動按鈕沒有出現
- 確認程式碼已正確安裝
- 確認浮動按鈕已啟用
- 清除瀏覽器快取後重新整理
產品按鈕沒有帶入產品
- 確認按鈕元素有正確的
data-rd-product-id或data-rd-variant-id屬性 - 確認 ID 與系統中的產品/變體相符
- 檢查瀏覽器 Console 是否有錯誤訊息
與其他腳本衝突
如果與其他 JavaScript 腳本有衝突，請聯繫 RoomDreaming 客服協助排除。