WP ECSS WEB 0.6.0 嵌入網站的兩種方法
一、嵌入方法一:使用短代碼(Shortcode)
若您希望在特定頁面中直接嵌入 ECSS 聊天介面,可使用 短代碼(Shortcode)。
此方法能自由控制聊天框的位置與樣式,特別適合應用於「聯絡我們」頁面、產品支援頁或 Landing Page。
📍 內嵌聊天框(固定顯示)
若希望聊天視窗固定出現在頁面中,可使用以下短代碼:
[ecss_chatui]
此短代碼會直接在頁面中顯示完整的聊天框,訪客可立即開始與 AI 客服對話,不需額外點擊。

👉 頁面中嵌入後的實際顯示效果

💬 按鈕觸發聊天(浮動展開)
若希望使用按鈕點擊後再開啟聊天視窗,
可使用下列短代碼組合:
[ecss_chatui_widget]
這會在頁面中生成一個可點擊的聊天按鈕,
點擊後才會彈出 ECSS ChatUI 對話視窗。
您也可以加入參數,客製化按鈕文字與主題樣式,例如:
[ecss_chatui_widget label="跟你聊聊"]
[ecss_chatui_widget label="客服專員" theme="light"]
[ecss_chatui_widget label="客服專員" theme="dark"]
- label:設定按鈕文字(預設為「ECSS 聊天」)
- theme:可選 “light” 或 “dark” 主題風格
💡 小技巧:
若網站採用亮色系設計,建議使用 theme=”light”;
若為深色系網站,theme=”dark” 會更自然地融入版面。

👉 點擊按鈕後展開的聊天框畫面)

✅ 使用建議
- 若希望聊天框 固定顯示於頁面內容中,使用「ecss_chatu」。
- 若希望以 按鈕觸發開啟對話,使用 「ecss_chatui_widget」。
- 兩種短代碼皆可在任何支援 Gutenberg 或 Elementor 的頁面中使用。
是否要我幫你改寫下一段「嵌入方法二:使用小工具(Widget)」讓它與這段新版短代碼教學風格一致?
二、嵌入方法二:使用小工具(Widget)
- 適合在全站顯示的「固定浮動按鈕」樣式。
- 操作步驟:
- 進入「外觀 → 小工具」。將「ECSS ChatUI」拖曳至底部或側邊欄區域。點擊設定浮動按鈕樣式與文字。
- 呈現方式有分成浮動按鈕與內崁的兩種模式。


三、樣式比較:哪種嵌入與呈現最適合你?
| 類型 | 嵌入方式 | 呈現形式 | 適合場景 | 優點 |
|---|---|---|---|---|
| 浮動聊天 | 小工具 | 彈出式視窗 | 全站客服、行銷頁面 | 不干擾內容、隨時可開啟 |
| 內嵌聊天 | 短代碼 | 固定區塊 | 聯絡頁、支援頁 | 一目了然、適合長對話 |


