针对每一个Web渠道,我们提供了独立可访问的聊天窗口地址,访客在浏览器打开这个地址即可与客服沟通
以官网的聊天窗口举例,可直接打开下面地址访问聊天会话窗口:
但更多的场景是,开发者想要在自己的网站里面,引用晓多的SDK,来嵌入一个聊天窗口
开发者在接入SDK后, 我们会在开发者的网站里面添加一个在线咨询的入口按钮,访客在点击这个按钮时,
我们会在开发者的网站里面打开咨询聊天窗口。 (tip: 入口按钮和聊天窗口的样式和位置都可以在客服管理台-设置-网站对话框自定义
里面设置)
下面将详细介绍SDK的嵌入方式和暴露的一些接口
SDK有两种接入方式,分别为单渠道接入和多渠道接入。 多渠道接入提供了在开发者网站里面同时接入多个web渠道的能力
在页面中引用SDK代码
<!-- 举例 -->
<script type="text/javascript" src="http://cvd.xiaoduoai.com/sdk/sdk.min.js?src=9&key=977b18aaaac8b2e51108da138576743265e1f05b674780a09fd5f3af3475bafa&channel_id=16" defer async></script>
注意:
客服管理台-设置-渠道列表-{找到或创建web网站接入渠道}
<!-- 举例 -->
<script>
// 同时接入两个web渠道
window.__CVD_C_ENTRY_SETTING = [
'http://cvd.xiaoduoai.com/c?src=439&key=8eeb57f1fa5cdf824707023d383daf906229cfb2b7c3fbf11538c85890a733ad&channel_id=2776',
'http://cvd.xiaoduoai.com/c?src=439&key=4ca6c1295d9f33ddb226e0247bb862fa3284c19a9218c090adfc1fedf35aae81&channel_id=2777'
]
</script>
<script type="text/javascript" src="http://cvd.xiaoduoai.com/sdk/sdk.min.js" defer async></script>
注意:
客服管理台-设置-渠道列表
里面查看在页面中引入sdk 脚本文件之后,sdk会在页面中添加一个或多个入口按钮(每个渠道一个对应的入口按钮),点击入口按钮可以打开对应web渠道的聊天会话窗口。
入口按钮的样式和位置可以在晓多管理台-设置-网站对话框自定义
里面设置。
开发者若要使用自己的入口按钮,可以使用css把入口按钮隐藏掉,然后通过sdk提供的接口来实现打开或关闭聊天窗的功能
隐藏入口按钮的css代码如下
.cvd-open-container{
display: none;
}
每个聊天窗口都是一个独立的iframe页面,开发者可以通过sdk的接口来实现iframe窗口页面内部的dom操作或样式定义
sdk暴露了一个全局变量 CVD_SDK
,通过这个全局变量,我们可以调用sdk提供的一些接口,实现一些自定义的逻辑
// 单渠道接入时
// 打开聊天窗口
if (window.CVD_SDK) window.CVD_SDK.openWindow()
// 多渠道接入时
// 参数为要打开的渠道对应的聊天会话窗口URL地址
if (window.CVD_SDK) window.CVD_SDK.openWindow('http://cvd.xiaoduoai.com/c?src=439&key=8eeb57f1fa5cdf824707023d383daf906229cfb2b7c3fbf11538c85890a733ad&channel_id=2776')
// 单渠道接入时
// 关闭聊天窗口
if (window.CVD_SDK) window.CVD_SDK.closeWindow()
// 多渠道接入时
// 参数为要关闭的渠道对应的聊天会话窗口URL地址
if (window.CVD_SDK) window.CVD_SDK.closeWindow('http://cvd.xiaoduoai.com/c?src=439&key=8eeb57f1fa5cdf824707023d383daf906229cfb2b7c3fbf11538c85890a733ad&channel_id=2776')
// 单渠道接入时
// 在聊天窗口的iframe内执行代码
if (window.CVD_SDK) window.CVD_SDK.evalScript('alert("alert from iframe window")')
// 多渠道接入时
// 第二个参数为聊天会话窗口URL地址
if (window.CVD_SDK) window.CVD_SDK.evalScript('alert("alert from iframe window")', 'http://cvd.xiaoduoai.com/c?src=439&key=8eeb57f1fa5cdf824707023d383daf906229cfb2b7c3fbf11538c85890a733ad&channel_id=2776')
// 单渠道接入时
// 在聊天窗口的iframe内添加css
if (window.CVD_SDK) window.CVD_SDK.addCssText('#msg_flow{ background-color: red;}')
// 多渠道接入时
// 第二个参数为聊天会话窗口URL地址
if (window.CVD_SDK) window.CVD_SDK.addCssText('#msg_flow{ background-color: red;}', 'http://cvd.xiaoduoai.com/c?src=439&key=8eeb57f1fa5cdf824707023d383daf906229cfb2b7c3fbf11538c85890a733ad&channel_id=2776')
当前sdk提供的事件有:
sendMessage
用户发送消息时触发 if (window.CVD_SDK) {
window.CVD_SDK.on('sendMessage', function(messageStr) {
console.log(messageStr)
})
}
window.CVD_SDK.off('sendMessage', someFun)