WEB页面接入 - 对话接入工具

# 说明
科沃斯商用对话系统提供多种终端接入工具，本文档将说明如何将WEB页面交互工具嵌入网站中，以实现在网页上接入科沃斯商用对话系统进行交互。

# 快速开始

- 编辑需要嵌入的网站的HTML代码
 如以下范例，将下面代码的第7行至第16行代码复制并嵌入HTML中即可

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8"> 
	<title>Chat widget</title>
	<script src="http://unimind.ecovacs-c.com/chat-widget/js/jquery.min.js"></script>
	<script>
		var d = new Date();
		var flag = ''+d.getFullYear()+d.getMonth()+d.getDate();
		document.write('<script src="http://unimind.ecovacs-c.com/chat-widget/js/chat_widget.js?'+flag+'"><'+'/script>')
		document.write('<link rel="stylesheet" href="http://unimind.ecovacs-c.com/chat-widget/css/chat_widget.css?'+flag+'">')
	</script>
	<script>
		$(window).chatWidget();
	</script>
</head>
<body>

</body>
</html>

```

- 用浏览器打开修改后的网页，在网页右侧会出现一个按钮，如下图所示

![](/media//202011/2020-11-19_111255.png)

- 点击按钮弹出对话框，即可进行聊天，如下图所示

![](/media//202011/2020-11-19_111516.png)

# 自定义

- 修改按钮
默认交互按钮样式如上述，如果需要修改，请按照如下步骤：
1、设计并实现交互按钮
2、嵌入下述代码，并将setWidgetParam函数中的第2个参数更改为新的按钮id
```
	<script>
		$(window).setWidgetParam("ChatButtonid","");
		$(window).chatWidget();
	</script>
```

- 全屏显示
若上述按钮id参数设定为空（空字符串''），则窗口将全屏显示，且没有关闭按钮
此方式可用于静态空白网页嵌入聊天框，页面地址URL即可通过微信、QQ、钉钉等聊天工具发送打开进行信息咨询，页面地址URL也可以嵌入微信、QQ等公众号的菜单栏中

- 修改LOGO
默认聊天框LOGO为科沃斯商用图标，如下图所示
![](/media//202011/2020-11-19_112510.png)
如果需要修改，请按照如下步骤：
1、准备好LOGO图标并可通过URL地址访问
2、嵌入下述代码，并将setWidgetParam函数中的第2个参数更改为新的图标地址
```
	<script>
		$(window).setWidgetParam("Logo","http://unimind.ecovacs-c.com/chat-widget/images/ECOVACS_BiZ_FA_logo1@3x.png");
		$(window).chatWidget();
	</script>
```

- 设置对话模式
在交互平台上配置的对话模式（不同对话模式可关联多个不同知识库）可以通过参数设定，不设定则为默认对话模式
```
	<script>
		$(window).setWidgetParam("Mode","");
		$(window).chatWidget();
	</script>
```

- 接入场景的关联地址
默认接入的方式是基于网址域名，即无论在该域名下任何网页，对话使用的是相同场景，若需要不同，按如下设置
```
	<script>
		$(window).setWidgetParam("Domain","url");
		$(window).chatWidget();
	</script>
```

- 接入人工服务地址
若需要跳转人工服务页面，按如下设置
```
	<script>
		$(window).setWidgetParam("Manual","http://xxx");
		$(window).chatWidget();
	</script>
```

- 头像
若需要配置对话框头像，按如下设置
```
	<script>
		$(window).setWidgetParam("BotAvatar","http://unimind.ecovacs-c.com/chat-widget/images/avatar.png");
		$(window).setWidgetParam("UserAvatar","http://unimind.ecovacs-c.com/chat-widget/images/avatar.png");
		$(window).chatWidget();
	</script>
```

- 欢迎语
若需要配置初次打开聊天框的欢迎语，按如下设置并在平台配置对应知识
```
	<script>
		$(window).setWidgetParam("Greeting","你好");
		$(window).chatWidget();
	</script>
```

- 菜单
若需要开启菜单，按如下设置并在平台配置对应菜单内容
```
	<script>
		$(window).setWidgetParam("Menu",1);
		$(window).chatWidget();
	</script>
```

- 私有化
若后端对话服务为私有化部署，按如下设置服务地址
```
	<script>
		$(window).setWidgetParam("Server","https://hmii.ecovacs-c.com/");
		$(window).chatWidget();
	</script>
```

# 注意事项

1、在接入WEB交互工具前，需在科沃斯商用交互平台维护好业务知识
2、为保证接口安全，使用WEB交互工具的页面地址URL需在科沃斯商用交互平台登记，或告知我方登记，否则将无法正常进行交互