> For the complete documentation index, see [llms.txt](https://docs.dmflow.chat/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dmflow.chat/channel/web.md).

# 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 %}