web网站接入详细开发文档

简要说明

针对每一个Web渠道,我们提供了独立可访问的聊天窗口地址,访客在浏览器打开这个地址即可与客服沟通
以官网的聊天窗口举例,可直接打开下面地址访问聊天会话窗口:

https://cvd.xiaoduoai.com/?src=15&channel_id=12&key=1e3916388152882324dab168cddd44ee0153f89d8080ab5f73962122cb16caa6

图片
但更多的场景是,开发者想要在自己的网站里面,引用晓多的SDK,来嵌入一个聊天窗口

开发者在接入SDK后, 我们会在开发者的网站里面添加一个在线咨询的入口按钮,访客在点击这个按钮时,
我们会在开发者的网站里面打开咨询聊天窗口。 (tip: 入口按钮聊天窗口的样式和位置都可以在客服管理台-设置-网站对话框自定义里面设置)

下面将详细介绍SDK的嵌入方式和暴露的一些接口

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>

注意:

  1. 需要修改sdk引用参数,改为用户自己的Web渠道的相关参数, 参见客服管理台-设置-渠道列表-{找到或创建web网站接入渠道}
  2. 也支持第三方接入方式的参数,参见http://cvd.xiaoduotech.com/docs/c4.html中关于WEB C端接入的说明
    图片

多渠道接入

    <!-- 举例 -->
    <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>

注意:

  1. 上面的示例是同时接入两个web渠道,window.__CVD_C_ENTRY_SETTING数组的每项值是开发者希望接入的web渠道所对应的聊天会话窗口的URL地址,用户可以在客服管理台-设置-渠道列表里面查看

关于入口按钮

在页面中引入sdk 脚本文件之后,sdk会在页面中添加一个或多个入口按钮(每个渠道一个对应的入口按钮),点击入口按钮可以打开对应web渠道的聊天会话窗口。

入口按钮的样式和位置可以在晓多管理台-设置-网站对话框自定义里面设置。

开发者若要使用自己的入口按钮,可以使用css把入口按钮隐藏掉,然后通过sdk提供的接口来实现打开或关闭聊天窗的功能

隐藏入口按钮的css代码如下

    .cvd-open-container{
        display: none;
    }

SDK功能

每个聊天窗口都是一个独立的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')

在聊天窗口环境下添加css样式

    // 单渠道接入时
    // 在聊天窗口的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)