Vue 前端框架接入QQ在线客服,效果如下图:

后面就根据自己的需要选择不同的方式,下面是使用教程:

-------------------------------------------------------------------------------------------

1、首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到

2、网上查找到的引用第三方包的四种方式, 实测较稳定的方式是在 index.html 中引入js包  

<script charset="utf-8" src="http://wpa.b.qq.com/cgi/wpa.php"></script>

3,在需要添加qq 聊天的.vue 页面下的data()  方法里添加下面方法:

BizQQWPA.addCustom({
    aty: '0', //指定工号类型,0-自动分流,1-指定工号,2-指定分组
    nameAccount: '*****', //指定的聊天 QQ 号码
    selector: 'contactQQ' //触发聊天的标签id
});

这边如果有多个的话就添加多个 BizQQWPA.addCustom()。

4,就是在<templete></templete> 里添加标签

<a href="javascript:void(0)" id="contactQQ">在线客服</a>

这边需要注意的是,标签的id 要跟 BizQQWPA.addCustom()方法里面设置的 selector 属性的值是一致的的。

这样子就差不多大功告成了。

------------------------------------------------------------------------------------------

延伸拓展:

如果是javascript  也是一样的处理,只是说 BizQQWPA.addCustom()这个方法要在加载引入页面的时候也初始化,应该问题不大。

Logo

前往低代码交流专区

更多推荐