文档中心>即时通信 IM

网站渠道

最近更新时间:2024-06-18 14:28:41

我的收藏

介绍

网站渠道根据您在管理端配置的会话服务流等信息,自动为您生成一个打开即用的包含在线客服功能的网页。
您可以在 App 中使用 WebView,或在浏览器中访问网站渠道链接,快速接入在线客服。




前提条件

1.参见 快速入门,了解在线客服相关术语及相关配置,并完成以下步骤:添加客服、配置技能组、创建会话服务流。

新建网站渠道

前往管理端 > 在线客服 > 渠道管理 > 网站渠道新建,并选择上述新建的会话服务流。


获取访问链接

新建成功后,单击接入方式,即可获取专属的接入链接。


额外功能

使用额外功能时用户端需要使用 方法一:内嵌插件 只需要在页面上添加内嵌插件提供的接入代码。访客访问页面时,页面会执行代码和加载在线客服的相关JS资源文件。

监听事件

座席接入

接入人工触发的事件。当用户咨询会话中转人工成功时会触发此事件。
代码示例如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://tccc.qcloud.com/web/im/imPublish.js?webAppId=3ee6790b039335b816c63c1eee5c4dfd"></script>
<script>
customerServiceIframe('seatJoin', function (res) {
console.log(res, 'seatJoin')
})
</script>
</head>
</html>

座席离开

人工服务结束触发的事件。当用户咨询会话中结束人工客服咨询时会触发此事件。
代码示例如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://tccc.qcloud.com/web/im/imPublish.js?webAppId=3ee6790b039335b816c63c1eee5c4dfd"></script>
<script>
customerServiceIframe('seatLeave', function (res) {
console.log(res, 'seatLeave')
})
</script>
</head>
</html>

收到消息

用户端收到消息时触发的事件。
代码示例如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://tccc.qcloud.com/web/im/imPublish.js?webAppId=3ee6790b039335b816c63c1eee5c4dfd"></script>
<script>
customerServiceIframe('receiveMessage', function (res) {
console.log(res, 'receiveMessage')
})
</script>
</head>
</html>

配置特性

用户可以结束会话

代码示例如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://tccc.qcloud.com/web/im/imPublish.js?webAppId=3ee6790b039335b816c63c1eee5c4dfd"></script>
<script>
customerServiceIframe('config', { canEndSession:true })
</script>
</head>
</html>

用户可以发送语音

代码示例如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://tccc.qcloud.com/web/im/imPublish.js?webAppId=3ee6790b039335b816c63c1eee5c4dfd"></script>
<script>
customerServiceIframe('config', { canSendAudio:true })
</script>
</head>
</html>

隐藏标题

代码示例如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://tccc.qcloud.com/web/im/imPublish.js?webAppId=3ee6790b039335b816c63c1eee5c4dfd"></script>
<script>
customerServiceIframe('config', { hideHeader:true })
</script>
</head>
</html>

可关闭式的弹框

代码示例如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://tccc.qcloud.com/web/im/imPublish.js?webAppId=3ee6790b039335b816c63c1eee5c4dfd"></script>
<script>
customerServiceIframe('config', { isCanCloseIframe:true })
</script>
</head>
</html>