WP ECSS WEB 0.6.0 在 Elements 中使用
Elementor 是 WordPress 上最受歡迎的視覺化頁面編輯器，
透過拖曳元件的方式即可自由設計頁面，而 ECSS WEB 完全支援 Elementor。
本篇將教您如何在 Elementor 介面中嵌入 ECSS 聊天介面，
讓 AI 客服與您的網站設計完美融合。
一、Elementor 與 ECSS 的整合思路
ECSS WEB 提供兩種聊天呈現方式：
- 內嵌模式：將聊天框直接放入頁面內容區，適合用於客服中心或聯絡頁。
- 浮動模式：以按鈕方式懸浮於頁面右下角，適合全站通用。
您可以依網站設計需求，自由選擇使用 短代碼（Shortcode） 或 小工具（Widget） 嵌入方式。
在 Elementor 中，只需使用「短代碼」或「HTML」元件，即可輕鬆完成整合。
💡 適用場景：
- 登入頁、行銷頁、Landing Page
- 產品說明頁或 FAQ 頁面
- 客服與技術支援頁面
二、使用短代碼元件
(1) 內嵌聊天框
若希望聊天介面直接出現在頁面中，請使用短代碼元件並貼上以下內容：
[ecss_chatui]操作步驟：
1. 在 Elementor 中打開欲編輯的頁面。
2. 拖曳 「短代碼（Shortcode）」 元件至指定區域。
3. 在短代碼欄位貼上短代碼。
4. 點擊「發佈」，即能在預覽模式中看到完整的聊天視窗。
👉 頁面中顯示 ECSS 內嵌聊天框效果）
(2) 浮動聊天按鈕
若希望使用按鈕點擊後開啟聊天視窗，可使用以下短代碼：
[ecss_chatui_widget]或進階設定：
[ecss_chatui_widget label="客服專員" theme="dark"]步驟與上方相同，只需將短代碼貼入短代碼元件或 HTML 元件中。
完成後，預覽頁面即可看到一個可點擊的浮動按鈕，訪客點擊後會彈出 ECSS AI 對話框。
👉 點擊後展開聊天視窗示意
📘 小結
在 Elementor 中整合 ECSS 非常簡單，
只需使用短代碼元件即可將 AI 聊天系統融入網站設計中。
您可以：
- 使用 ecss_chatui 內嵌聊天框
- 使用 ecss_chatui_widget 建立浮動聊天按鈕
🚀 小技巧：
搭配 Elementor 的版型設計與動畫設定，
能讓 ECSS 聊天系統更自然融入品牌形象，提供最佳用戶體驗。
