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客服导航按钮了(可根据需要自行修改):

🛒购买地址:https://www.1itao.com/modown-wechat.html

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

CSS代码

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

🛒购买地址:https://www.1itao.com/modown-wechat.html

0
没有账号?注册  忘记密码?