介绍
网站渠道根据您在管理端配置的会话服务流等信息,自动为您生成一个打开即用的包含在线客服功能的网页。
您可以在 App 中使用 WebView,或在浏览器中访问网站渠道链接,快速接入在线客服。
前提条件
新建网站渠道
前往管理端 > 在线客服 > 渠道管理 > 网站渠道新建,并选择上述新建的会话服务流。
获取访问链接
新建成功后,单击接入方式,即可获取专属的接入链接。
额外功能
使用额外功能时用户端需要使用 方法一:内嵌插件 只需要在页面上添加内嵌插件提供的接入代码。访客访问页面时,页面会执行代码和加载在线客服的相关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>