# Web

* 網頁版提供各種可調顏色使用
* 提供導流工具連接到其他網頁

### Javascript SDK

## 外掛視窗

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

```

如果你想調用其他廠牌的對話機器人或是網頁客服可以使用observersConfig中的observeUserInput監聽使用者對話，當聽到help則destroy()

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

## 滿頁

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

### 範例網站

{% embed url="<https://www.talkyon.com>" %}
拓遠資訊有限公司
{% endembed %}

## 連結視窗

開啟Share後你可以取得編碼ID，例如@8aYK2AoGe0，前往<https://app.dmflow.chat/s/\\{{id\\}}即可開啟連結視窗。>

連結視窗未來將會整合表單功能，提供自定義文檔或是論壇或是其他功能，仍在規劃中。

### 範例網站

{% embed url="<https://app.dmflow.chat/s/@8aYK2AoGe0e>" %}
分享連結
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dmflow.chat/channel/web.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.