摘要:网站在线客服功能比较常见,一般会有QQ客服、微信客服。下面介绍一下制作带有打电话功能的网站在线客服的方法。 网站在线客服制作主要分为三个部分: JS部分 CSS部分 HTML部分 首先在网站的头部标签加入CSS样式……
网站在线客服功能比较常见,一般会有QQ客服、微信客服。下面介绍一下制作带有打电话功能的网站在线客服的方法。
网站在线客服制作主要分为三个部分:
- JS部分
- CSS部分
- HTML部分
首先在网站的头部标签加入CSS样式文件:
<link type='text/css' rel='stylesheet' href='kefu/kf20519.css'>
然后在网站的底部再引入JS文件:
<script>
let back=document.getElementById('goTopBtn');
let duration = 500;
back.onclick = function () {
let l = document.documentElement.scrollTop;
console.log(l);
let s = l / 600 * 25;
let st = setInterval(function () {
l -= s;
if (l <= 0) {
l = 0; //当l<=0时,设置l=0
clearInterval(st);
}
document.documentElement.scrollTop = l;
}, 25)
}
</script>
最后在显示客服框的位置,放上以下的客服框代码:
<div class='bsk_rightBar' id='goTop' style='display: block;'>
<div class='kftit'>在线<br>客服</div>
<div class='link_a'>
<img alt='客服小图标' src='kefu/ritBarIcon2.png' class='img0'>
<img alt='客服小图标' src='kefu/ritBarIcon21.png' class='img1'>
<div class='chis'>
<i class='ars'></i>
<div class='cIns'>
<div class='csIn'>
<div class='colv'>
<span class='tt'>QQ在线咨询</span>
<ul class='kful'>
<li class='skfli02'>
<a rel='nofollow' href='http://wpa.qq.com/msgrd?v=3&uin=qq号&site=&menu=yes' target='_blank'><span style='color:#990033'>QQ客服1</span></a>
</li>
<li class='skfli02'>
<a rel='nofollow' href='tell:138xxxxxxxx'><span style='color:#990033'>电话咨询</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<a rel='nofollow' class='link_a'>
<img src='kefu/ritBarIcon5.png' rel='nofollow' class='img0' alt='手机二维码'>
<img src='kefu/ritBarIcon51.png' class='img1' rel='nofollow' alt='手机二维码'>
<div class='wxgzh' style='background-image:url(kefu/gzhEwm.png)'></div>
</a>
<a rel='nofollow' href='#top' class='link_a last' id='goTopBtn'><img src='kefu/ritBarIcon4.png' rel='nofollow' class='img0' alt='返回顶部'>
<img src='kefu/ritBarIcon41.png' class='img1' alt='返回顶部'>
</a>
</div>
这样就可以制作出带有打电话功能的在线客服功能了。