Web

Web SDK: Flexible Embedding, Seamless Integration

DMflow.chat provides a highly customizable JavaScript SDK, allowing you to easily embed chatbots into any website. Whether it’s a floating window (Widget) in the bottom right corner or a full-screen experience (Full Page), it can perfectly adapt to your design needs.

SDK Feature Highlights

• Appearance Customization: Supports adjusting button and header colors to blend with brand visuals.
• Behavior Listening: Provides JavaScript Hooks to listen to user input and execute specific logic (such as transferring to other customer service systems).
• Share Link: Unique traffic guidance tool, supporting independent window opening.

Integration Mode 1: Widget

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

Advanced Listening: Switching with Other Customer Service Systems

If you wish to hide the DMflow bot under specific circumstances (e.g., user inputs “help”) to display customer service windows from other brands, you can use observersConfig:

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

Integration Mode 2: Full Page

Suitable for independent chat pages or scenarios requiring immersive experience.

HTML Tag Method:

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

JavaScript Initialization Method:

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

Share Link

Besides embedding in websites, you can also enable the “Share” function to get an exclusive ID (e.g., @dmflow). Through the link https://share.dmflow.chat/s/, users can interact with the bot directly in an independent window.