一款不错的右边小客服挂件(带QQ、微信、商桥、电话、分享)

[全站通告]如需人工一对一付费服务(业务),请加微信 2589053300 进行沟通处理-非诚勿扰

今天在看一家用友的站点,发现右边的挂件不错,就顺便扒了以下,也给自己以后用留下点意思儿;具体看图,至于代码,网上也有,也可以搜索到;

把以下代码放在你想放在的位置,一般放在页脚下即可

<div class="side">
<ul>
<li id="qqonline"><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=2589860066&amp;site=keyou&amp;menu=yes&amp;site=keyou&amp;menu=yes" target="_blank" rel="nofollow"><i class="bgs1"></i>售前咨询</a></li>
<li class="shangqiao">
<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=2589860066&amp;site=keyou&amp;menu=yes" target="_blank" rel="nofollow">
<div><i class="bgs1"></i>技术咨询</div>
</a>
</li>
<li class="sideewm"><i class="bgs3"></i>微信客服
<div class="ewBox son"></div>
</li>
<li class="sideetel"><i class="bgs4"></i>联系电话
<div class="telBox son">
<dd class="bgs1"><span>咨询电话</span>13888888888</dd>
<dd class="bgs2"><span>投诉电话</span>13999999999</dd>
</div>
</li>
<li class="fenxiang"><i class="bgs5"></i>一键分享

<div class="bdsharebuttonbox" data-tag="share_1">
<a class="ttqq" data-cmd="sqq" title="分享到QQ好友"></a>
<a class="ttwx" data-cmd="weixin" href="javascript:;"></a>
<a class="ttqzone" data-cmd="qzone"></a>
<a class="ttsina" data-cmd="tsina"></a>
<a class="tthuaban" data-cmd="huaban"></a>
<a class="ttfbook" data-cmd="fbook"></a>
<div id="fxcode">
<div class="f fxjg">分享到微信朋友圈</div>
<div id="fxcolse" class="r fxjg"><b>X</b></div>
<canvas width="100" height="100"></canvas></div>
</div>

<script src="/themes/keyou/js/jquery.qrcode.min.js"></script>

<script>
var sharrul = window.location.href;
var shartitle = "老梁博客:VX2589053300";
var sharpic = "";

jQuery('#fxcode').qrcode({
render: "canvas",
width:100,
height:100,
text: sharrul
});

$(".ttwx").click(function () { $("#fxcode").css("display", "block") }); $("#fxcolse").click(function () { $("#fxcode").css("display", "none") }); $(".ttqq").click(function () { shareqq(shartitle, sharrul, sharpic) }); $(".ttqzone").click(function () { shareToQq(shartitle, sharrul, sharpic) }); $(".ttsina").click(function () { shareToXl(shartitle, sharrul, sharpic) }); $(".tthuaban").click(function () { sharehuaban(shartitle, sharrul, sharpic) }); $(".ttfbook").click(function () { sharefb(shartitle, sharrul, sharpic) }); function shareqq(title, url, picurl) { var shareqqzonestring = 'https://connect.qq.com/widget/shareqq/index.html?summary=' + title + '&url=' + url + '&pics=' + picurl; window.open(shareqqzonestring, 'newwindow', 'height=595,width=785,top=100,left=100') } function shareToQq(title, url, picurl) { var shareqqzonestring = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + title + '&url=' + url + '&pics=' + picurl; window.open(shareqqzonestring, 'newwindow', 'height=400,width=400,top=100,left=100') } function shareToXl(title, url, picurl) { var sharesinastring = 'http://v.t.sina.com.cn/share/share.php?title=' + title + '&url=' + url + '&content=utf-8&sourceUrl=' + url + '&pic=' + picurl; window.open(sharesinastring, 'newwindow', 'height=400,width=400,top=100,left=100') } function sharehuaban(title, url, picurl) { var sharesinastring = 'https://huaban.com/bookmarklet/?title=' + title + '&url=' + url + '&content=utf-8&sourceUrl=' + url + '&media=' + picurl; window.open(sharesinastring, 'newwindow', 'height=400,width=400,top=100,left=100') } function sharefb(title, url, picurl) { var sharesinastring = 'https://www.facebook.com/share.php?t=' + title + '&u=' + url + '&content=utf-8&sourceUrl=' + url + '&pic=' + picurl; window.open(sharesinastring, 'newwindow', 'height=400,width=400,top=100,left=100') }
</script>
</li>
<li class="sidetop" onclick="goTop()"><i class="bgs6"></i>返回顶部</li>
</ul>
</div>

把以下代码丢进你站点的css里

.side{position:fixed;width:78px;right:0;top:50%;margin-top:-200px;z-index:100;border:1px solid #e0e0e0;background:#fff;border-bottom:0}
.side ul li{width:78px;height:78px;float:left;position:relative;border-bottom:1px solid #e0e0e0;color:#333;font-size:14px;line-height:38px;text-align:center;transition:all .3s;cursor:pointer}
.side ul li:hover{background:#e60015;color:#fff}
.side ul li:hover a{color:#fff}
.side ul li i{height:25px;margin-bottom:1px;display:block;overflow:hidden;background-repeat:no-repeat;background-position:center center;background-size:auto 25px;margin-top:14px;transition:all .3s}
.side ul li i.bgs1{background-image:url(../images/kefu/right_pic5.png)}
.side ul li i.bgs2{background-image:url(../images/kefu/right_pic7.png)}
.side ul li i.bgs3{background-image:url(../images/kefu/right_pic2.png)}
.side ul li i.bgs4{background-image:url(../images/kefu/right_pic1.png)}
.side ul li i.bgs5{background-image:url(../images/kefu/right_pic3.png)}
.side ul li i.bgs6{background-image:url(../images/kefu/right_pic6_on.png)}
.side ul li:hover i.bgs1{background-image:url(../images/kefu/right_pic5_on.png)}
.side ul li:hover i.bgs2{background-image:url(../images/kefu/right_pic7_on.png)}
.side ul li:hover i.bgs3{background-image:url(../images/kefu/right_pic2_on.png)}
.side ul li:hover i.bgs4{background-image:url(../images/kefu/right_pic1_on.png)}
.side ul li:hover i.bgs5{background-image:url(../images/kefu/right_pic3_on.png)}
.side ul li .sidebox{position:absolute;width:78px;height:78px;top:0;right:0;transition:all .3s;overflow:hidden}
.side ul li.sidetop{background:#e60015;color:#fff}
.side ul li.sidetop:hover{opacity:.8;filter:Alpha(opacity=80)}
.side ul li.sideewm .ewBox.son{width:238px;display:none;color:#363636;text-align:center;padding-top:235px;position:absolute;left:-240px;top:0;background-image:url(../images/kefu/weixinkefu.jpg);background-repeat:no-repeat;background-position:center center;border:1px solid #e0e0e0; background-color:#fff;}
.side ul li.sideetel .telBox.son{width:240px;height:237px;display:none;color:#fff;text-align:left;position:absolute;left:-240px;top:-79px;background:#e60015}
.side ul li.sideetel .telBox dd{display:block;height:118.5px;overflow:hidden;padding-left:82px;line-height:24px;font-size:18px}
.side ul li.sideetel .telBox dd span{display:block;line-height:28px;height:28px;overflow:hidden;margin-top:32px;font-size:18px}
.side ul li.sideetel .telBox dd.bgs1{background:url(../images/kefu/right_pic8.png) 28px center no-repeat;}
.side ul li.sideetel .telBox dd.bgs2{background:url(../images/kefu/right_pic9.png) 28px center no-repeat}

把以下图片js下载了,按照你所设置的路径丢进去即可;

挂件下载点我即可

如需博主协助处理(收费),请加微信2589053300(非诚勿扰) --更多请关注:老梁`s Blog

所写所说,是心之所感,思之所悟,行之所得;文当无敷衍,落笔求简洁。 以所舍,求所获;有所依,方所成!

支付宝赞助
微信赞助

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如您下载该资源,行为将被视为对《免责声明》全部内容的认可->联系老梁投诉资源
LaoLiang.Net部分资源来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:service@laoliang.net
意在交流学习,欢迎赞赏评论,如有谬误,请联系指正;转载请注明出处: » 一款不错的右边小客服挂件(带QQ、微信、商桥、电话、分享)

发表评论

本站承接,网站推广(SEM,SEO),软件的安装的安装与调试,服务器的推荐以及配置,APP的开发与维护,网络或者web维护;财务软件,客户管理系统,人力资源,超市POS,医药管理,服务器安全,ecshop,金蝶,用友,管家婆;

立即查看 了解详情