>[danger] v1.2.0 以后whisper将不再采用弹框的形式,供客户端提供咨询,而是采用弹出新页面的方式,这样可以给用户更好的使用体验,同时,也带来了在网站上集成的改变。 1、依旧是引用 ``` <script src="http://xxx.xxx.com/static/customer/js/whisper-tool.js"></script> ``` >[info] 解除了对 layer 弹层组件的依赖。 >[danger] 新版本的 whisper-tool.js 将默认向页面中写入,如下图 和官网一样的客服咨询dom 结构 ![](https://box.kancloud.cn/70c6967d1c275199caf598975e98886c_207x208.png) 2、由于默认的写入和官网一致的 客服咨询框,所以建议您,将 ``` whisper_pay/public/static/demo/css/kf.css ``` 复制到您的目标站,方便样式的引用。 除此之外,其余的 实例化 whisper,这些跟之前的版本类似,唯一的不同的是 ``` ws.init({ obj: $(this), id: uid, url: '/', name: '会员' + uid, avatar: 'http://wx2.sinaimg.cn/mw690/5db11ff4gy1flxmew7edlj203d03wt8n.jpg', group: group }); ``` 多了一个 **obj** 也就是当前 dom 的jq 对象。 >[danger] 如果您不想引用和我官网一样的咨询样式。其实您可以这样修改。 whisper-tool.js ``` #20 // document.write(htmlData); ``` 注释掉 20 行的写入代码 注意现在新的 dom 结构 ``` <div id="customized-widget"> <div id="cs-groups"> <a href="javascript:;"> <div class="cs-groups__item" id="cs-pre-sales" data-group="1" style="color: white"> <span class="widget__icon"></span>售前客服 </div> </a> <div class="widget__divider"></div> <a href="javascript:;"> <div class="cs-groups__item" id="cs-after-sales" data-group="2" style="color: white"> <span class="widget__icon"></span>售后客服 </div> </a> </div> <div id="widget-trigger" style="display: block;"></div> </div> ``` 每一个客服点击按钮,和以前的区别是 父层 包了一个 a标签,这里为了兼容 移动端还是 pc 端,这里a 的跳转方式未规定是。pc端采用 **target="_blnak"** 的方式,移动端采用默认的 t**arget=“_self”**,这里需要用a标签进行新页面打开操作。 >[danger] 如果您的网站,移动端 和 pc 端是单独的页面,您可以直接在 a 的 href 中拼装跳转所需的参数,直接跳转就可以了 ``` var url = baseConfig.whisper_domain + '/index/index/chat' + '?group=' + baseConfig.group + '&id=' + baseConfig.id + '&name=' + baseConfig.name + '&avatar=' + baseConfig.avatar; if(self.isMobile()){ window.location.href = url; }else{ baseConfig.obj.parent('a').attr('href', url); } ```