通过 1 - 3 您就算是将 系统搭建完毕了,接下来就是通过简单的 js 部署,让您的网站,迅速拥有客服功能。 >[info] 每个网站的风格不同,这里我不会提供客服咨询的悬浮样式。我相信您的网站上肯定也有自己设计好的样式。 1、首先在您的网站上引入两段 js ~~~ <script src="http://xxx.xxx.com/static/customer/js/layer/layer.js"></script> <script src="http://xxx.xxx.com/static/customer/js/whisper-tool.js"></script> ~~~ 对应的地方,换成您刚才部署 whisper事时采用的域名。其实本着,这个资源能访问到即可。 2、配置参数 ~~~ var ws = new whisper(); $(dom).click(function(){ var group = $(this).attr('data-group'); ws.init({ id: uid, url: 'http://xxx.xxx.com/index/index/chat', name: uname, avatar: uavatar, group: group }); }); ~~~ >[info]参数解释: 1、dom 是什么? 这里的dom 就是您的客服咨询悬浮框,以whisper 官网的为例子: ![](https://box.kancloud.cn/70c6967d1c275199caf598975e98886c_207x208.png) 即这两部分的dom的id,#cs-pre-sales 和 #cs-after-sales: ~~~ <div id="cs-groups"> <div class="cs-groups__item" id="cs-pre-sales" data-group="1"> <span class="widget__icon"></span>售前客服 </div> <div class="widget__divider"></div> <div class="cs-groups__item" id="cs-after-sales" data-group="2"> <span class="widget__icon"></span>售后客服 </div> </div> ~~~ 其实就是这两个地方的点击事件,此处在这个 dom 的地方,放置一个 data-group 来设置 这些客服分组的信息。这个id 需要与管理端设置的 异一一对应,否则该分组的客服无法正常的工作。例如 whisper 站点上,这个点击事件这么配置的: ~~~ $("#cs-pre-sales,#cs-after-sales").click(function(){ // 其他业务代码 }) ~~~ 2、init 中的参数是什么意思? ~~~ { id: uid, name: uname, avatar: uavatar, whisper_domain: 'http://xxx.xxx.com', group: group } ~~~ 看到这个数据之后,相信您也很容易就能猜到: | 参数 | 意思 | | --- | --- | | id | 当前登录户用户的唯一id | | name | 当前登录用户的昵称 | | avatar | 当前登录用户的头像 | | whisper_domain | 您搭建whisper系统的域名 | | group | 用户咨询的客服分组 | >[danger] 好了,到此为止,您的 whisper 系统算是搭建 和整合完毕了。您可以为您的会员提供咨询服务了。