Web

網頁版 SDK：靈活嵌入，無縫整合

DMflow.chat 提供高度可客製化的 JavaScript SDK，讓您能輕鬆將聊天機器人嵌入任何網站。無論是右下角的懸浮視窗 (Widget)，還是滿版的全頁面體驗 (Full Page)，都能完美適應您的設計需求。

SDK 功能亮點

• 外觀自訂： 支援調整按鈕與標題顏色，融入品牌視覺。
• 行為監聽： 提供 JavaScript 鉤子 (Hooks)，可監聽用戶輸入並執行特定邏輯（如轉接其他客服系統）。
• 連結視窗： 獨特的導流工具，支援獨立視窗開啟。

整合模式一：外掛視窗 (Widget)

<script type="module">
  import Chatbot from "{{sdk url}}";
  Chatbot.init({"id":"{{bot id}}","theme":{"button":{"backgroundColor":"#9c27b0"},"header":{"backgroundColor":"#9c27b0"}}});
 </script>

進階監聽：與其他客服系統切換

如果您希望在特定情況下（例如用戶輸入 “help”）隱藏 DMflow 機器人，以便顯示其他廠牌的客服視窗，可以使用 observersConfig：

{
	"id": "{{bot id}}",
	"theme": {
		"button": {
			"backgroundColor": "#9c27b0"
		},
		"header": {
		}
	},
	observersConfig: {
		observeUserInput: (userInput) => {
			if (userInput === 'help') {
				Chatbot.destroy()
			}
		}
	}
}

整合模式二：滿頁模式 (Full Page)

適合用於獨立的聊天頁面或需要沉浸式體驗的場景。

HTML 標籤方式：

<dmflow-fullchatbot id="{{bot id}}"></dmflow-fullchatbot>

JavaScript 初始化方式：

<script type="module">
  import Chatbot from "{{sdk url}}";
  Chatbot.initFull({"id":"{{bot id}}");
 </script>

連結視窗 (Share Link)

除了嵌入網站，您也可以開啟「分享」功能，獲取一組專屬 ID（例如 @dmflow）。 透過連結 https://share.dmflow.chat/s/，用戶可以直接在獨立視窗中與機器人互動。