零基础建站培训教程介绍

当前位置:

如何制作网站右侧悬浮客服+电话+留言系统(附代码)

我们看到很多企业官网的右侧都会有一个悬浮客服系统,可以让用户在线客服咨询、查看联系电话,甚至可以弹出在线留言系统。那么我们自己做网站时怎么做出如下图的右侧悬浮客服呢?

网站右侧悬浮客服

下面学做网站论坛就来介绍一下如何制作这种带有QQ客服、电话、在线留言功能的悬浮框。

方法/步骤

  1. 在自己的</head>标签上面引入一下JQUERY,因为这个功能是基于JQUERY制作的。
    
    
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  2. 在自己的网站代码最底部找到</body> 标签,在这个标签上方添加右侧客服HTML代码。(如果看不懂代码,请先学习一下HTML入门教程
    
    
    <div class="qqkefu">
          <ul>
              <li class="">
                <a href="tencent://message/?uin=123456&amp;Site=guoren&amp;Menu=yes" class="li-ico4" rel="nofollow">
                    <b class="f">
                    </b>
                    <span>在线<br>咨询</span>
                </a>
              </li>
              <li class="">
                <a href="tencent://message/?uin=123456&amp;Site=guoren&amp;Menu=yes" class="li-ico4" rel="nofollow">
                    <b class="d">
                    </b>
                    <span>q q<br>咨询</span>
                </a>
              </li>
              <li class="qq_cza" style="width: 53px;">
                <a href="javascript:;" class="j_message2" target="_blank" rel="nofollow">
                    <b class="a">
                    </b>
                    <span>在线<br>留言</span>
                    </a>
              </li>
              <li class="qq_cza66" style="position: relative; width: 53px;  height: 47px;">
                    <b class="c">
                    </b>
                    <p class="ewm8">
                        全国服务热线:<br>400-7777-119<br>
                    </p>
              </li>
              <li class="top2 kf_top top" title="回到顶部" style="opacity: 0;"></li>
          </ul>
    </div>
  3. 在第二步的HTML代码下方再添加控制客服框点击效果和弹出效果的JS代码;
    
    
    <script type="text/javascript">
       
    jQuery(document).ready(function($){
         $(".qqkefu .top").click(function () {
             $("html,body").animate({ "scrollTop": 0 }, 300);
         });

         $(window).scroll(function () {
             var scrollTop = document.body.scrollTop;
             var y = $('.top').offset().top;
             if (scrollTop > 900 || y > 900) {
                 $(".top2").css({ "opacity": "0.9", "filter": "alpha(opacity=90)" });
             } else {
                 $(".top2").css({ "opacity": "0", "filter": "alpha(opacity=0)" });
             }
         });

         $(".qq_cza66").hover(function () {
             $(".ewm8").show(50);
         }, function () {
             $(".ewm8").hide(50);
         });
         
         
         $(".j_message2").click(function(){
            $(".lxfoot").toggle("slow");
        });
       


        $('.main-navigation .menu a').each(function(){
        if($($(this))[0].href==String(window.location))
            $(this).addClass('first');
            });
     });
    </script>
  4. 在自己网站的CSS文件里放上控制右侧悬浮客服系统的样式代码。
    
    
    /* 回到顶部 */
    .qqkefu {position: fixed;bottom: 200px;_position: absolute;_top: expression(eval(document.documentElement.scrollTop + 365));z-index: 999;right: 0;width: 53px}
    .qqkefu ul li {height: 47px;margin-bottom: 1px;float: right;background: rgba(153, 153, 153, 0.6);line-height: 47px;font-size: 14px;cursor: pointer;opacity: 0.9;position: relative}
    .qqkefu ul li:hover {background: #e9af1b;}
    .qqkefu ul li.top2 {color: #1c1c1c;font-weight: 800;text-align: center;background: #999 url(images/top_icon.png) no-repeat center;position: relative;width: 53px;cursor: pointer;-webkit-transition: .3s;-o-transition: .3s;transition: .3s;}
    .qqkefu ul li.top2:hover {background-color: #d0b372;}

    /*客服*/
    .qqkefu {position: fixed;bottom: 200px;_position: absolute;_top: expression(eval(document.documentElement.scrollTop + 365));z-index: 9999;right: 0;width: 53px}
    .qqkefu ul li {height: 47px;margin-bottom: 5px;float: right;background: rgba(153, 153, 153, 0.8);opacity: .8;line-height: 47px;font-size: 14px;cursor: pointer;opacity: 0.9;position: relative}
    .qqkefu ul li a {color: #fff;}
    .qqkefu ul li.qq_cza {overflow: hidden}
    .qqkefu ul li:hover {background: #d0b372;}
    .qqkefu ul li.top2 {color: #1c1c1c;font-weight: 800;text-align: center;background: rgba(153, 153, 153, 0.8) url(images/top_icon.png) no-repeat center;opacity: .8;position: relative;width: 53px;cursor: pointer;-webkit-transition: .3s;-o-transition: .3s;transition: .3s;}
    .qqkefu ul li.top2:hover {background-color: #d0b372;}
    .qqkefu ul li b {width: 53px;height: 48px;display: block;overflow: hidden;float: left;}
    .qqkefu ul li span {position: absolute;opacity: 0;display: block;width: 53px;height: 47px;line-height: 30px;background-color: #d0b372;}
    .qqkefu ul li:hover b.a {background-image: none;}
    .qqkefu ul li:hover b.f {background-image: none;}
    .qqkefu ul li:hover b.d {background-image: none;}
    .qqkefu ul li:hover span {line-height: 17px;opacity: 1;color: #fff;height: 41px;font-size: 14px;padding-top: 6px;width: 100%;text-align: center;}
    .qqkefu ul li b.a {background: url(images/czx4.png) no-repeat center center;}
    .qqkefu ul li b.f {background: url(images/xia_z.png) no-repeat center center;}
    .qqkefu ul li b.b {background: url(images/czx3.png) no-repeat center center;}
    .qqkefu ul li b.d {background: url(images/bdsq.png) no-repeat center center;}
    .qqkefu ul li b.c {background: url(images/ico_erweima.png) no-repeat center center;}
    .qqkefu ul li b.lxb {background: url(images/phone0.png) no-repeat center center;}
    .qqkefu .ewm8 {display: none;position: absolute;left: -155px;font-size: 14px;bottom: 0px;padding:20px;background: rgba(153, 153, 153, 0.8);line-height: 32px;padding-left: 15px;opacity: 1;color: #fff;}
    .qqkefu .ewm8 img {max-width: 100%;}
    .div_ewm img {margin-top: 20px;float: left;margin-right: 10px;width: 117px;}

    /*留言框*/
    .lxfoot{display: none;width:1000px;height:500px;position: fixed;top:50%;left:50%;margin-left:-500px;margin-top:-250px;padding:50px;box-sizing:border-box;box-shadow:0 0 8px #999;}
  5. 最后就是上传悬浮系统需要使用的背景图片。背景图片已打包,下载地址: https://pan.baidu.com/s/1PPn9-2xlklbxsA7HoSGVpg 提取码: vxf8
    图片下载之后解压出来,将图片上传到自己的images文件夹里。
  6. 这样一个右侧悬浮客服系统就制作好了。上面的代码里含有一个在线留言功能,当用户点击在线留言按钮时就会弹出在线留言框。如下图:
    在线留言功能
  7. 如果要这个功能就还需要放上在线留言框代码。制作方法见:如何制作网站客户留言功能。代码如下:
    
    
    <div id="contact" class="clearfix mt20 linxi lxfoot" style="background:#fff;">
     
    <form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; $current_user = wp_get_current_user(); ?>">

    <div class="col-md-4">
    <input type="text" placeholder="您的姓名" name="tougao_authorname" class="form-control">
    </div>
    <div class="col-md-4">

    <input type="text" placeholder="您的邮箱" name="tougao_authoremail" class="form-control">

    </div>


    <div class="col-md-4">

    <input type="text" placeholder="您的联系地址" name="tougao_title" class="form-control">


    </div>


    <div class="col-md-12">

    <textarea class="form-control" name="tougao_content" rows="12" placeholder="留言内容"></textarea>

    </div>

    <div class="col-md-4"></div>
    <div class="col-md-4">
    <input type="hidden" value="send" name="tougao_form" />
    <button type="submit" class="btn btn-default btn-block">提交</button>

    </div>
    <div class="col-md-4"></div>
    </form>
      </div>
  8. 这样网站右侧悬浮客服+电话+留言系统就全部完善了。

相关阅读:

怎么制作可折叠式在线客服框

如何制作手机网站底部悬浮客服

网站如何添加qq在线客服

2条回应:“如何制作网站右侧悬浮客服+电话+留言系统(附代码)”

  1. 学习建网站学员 盐城潘慧龙说道:

    右侧悬浮框 不显示图标 miagess 已经传了 就显示五个方框,不显示QQ 的图标

发表评论

电子邮件地址不会被公开。 必填项已用*标注