Modown主题移动端自定义导航添加QQ和微信在线客服,支持点击一键复制QQ/微信号并打开客户端

今天发现QQ在线客服功能失效，貌似是不再面向个人使用了。点击以前的QQ客服链接会出现如下提示信息，因此我们需要换一种方式。本站更改的底部导航是通过点击复制QQ号，然后让用户自己到QQ搜索添加！

亲爱的用户:

对方“QQ在线状态”服务尚未启用，您需要添加对方为好友后才能与其进行会话。

您也可邀请对方到 “QQ在线状态”官网 开启服务。

==========================

Modown 主题自带的移动端客服在手机网页右下角，这样浏览网页时，可能误触。而且点击默认的微信客服后显示的是微信二维码图片，手机用户需要把二维码名片保存后，再到微信扫一扫识别，操作起来比较麻烦。本文就来说一下modown主题如何设置移动端网页底部导航，添加QQ和微信客服并一键复制QQ/微信号并跳转到微信客户端（复制QQ号不跳转）。

要实现上述效果，我们主要是通过三段代码：

1、HTML和JS代码（添加功能）2、短代码（在前端显示生效）3、CSS代码（修改样式，使其更美观）

在添加代码之前，我们需要先到Modown主题设置 – 页脚 – 开启“移动端导航”，移动端导航个数选择默认的“4列”。如果手机端开启了“右贴边导航”（此项默认是关闭的），可以到主题设置 – 基本 – 取消勾选“右贴边手机端”即可。

HTML和JS代码

这个JS代码可以放到modown主题设置 – 页脚 – 自定义底部代码处。部署好此代码之后，我们网站就有点击一键复制内容的功能了。

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>  
<script> 
$(document).ready(function(){ 
var clipboard = new Clipboard('#copy_btn'); 
clipboard.on('success', function(e) { 
alert("号码复制成功，到QQ/微信粘贴搜索，联系客服",1500);
e.clearSelection(); 
console.log(e.clearSelection); 
}); 
}); 
</script>

短代码

还是在modown主题设置 – 页脚 – 移动端自定义导航，添加以下代码，手机网页底部就可以显示首页、VIP和QQ客服导航按钮了（可根据需要自行修改）：

到这里其实功能已经添加好了，不过按钮有错位，颜色不统一，不够美观。因此还需要调整一下css样式代码，手机网页显示效果如下：

CSS代码

CSS代码可放到Modown主题设置 – 样式 – 自定义CSS样式处。