知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    悬浮右侧qq在线客服代码

    作者:佳明妈 来源:懒人建站工作室 2016-11-23 人气:
    悬浮右侧qq在线客服代码,这个右侧qq在线客服插件不依赖于jquery,客服图标使用了阿里图标的字体图标,这个qq在线客服代码可以配置多个qq客服,支持二维码展示和电话号码展示,支持
    悬浮右侧qq在线客服代码,这个右侧qq在线客服插件不依赖于jquery,图标使用了阿里图标的字体图标,不需要加载图片,这个qq在线客服代码可以自由配置多个qq客服以及自定义客服节点,支持二维码展示和电话号码展示,支持关闭客服代码。

    qq在线客服代码配置

         //右侧浮动qq客服  by 懒人建站http://www.51xuediannao.com/
         //懒人建站专注于网页素材下载,提供网站模板素材、图片素材、ps素材、素材库等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。
    
         //皮肤风格请修改css样式表
    
         //调用,及参数说明
         qqkf.init({
             closeBtn:true,    //是否显示关闭按钮
             mainSize:1200,   //如果qq客服遮挡了内容影响阅读,所以您可以传入你的主体宽度,窗口过小浮动客服会消失,如果你想让他始终显示,请传入-1
             defaultIcon:'67c',//默认qq图标,图标字体的后3位,图标字体后三位参考icon.png
             position:{
                 right: 10,
                 bottom: 200
             },
             data:{
                 //最后的 @694 这些图标定义可以省略,默认qq图标,@后面是图标字体的后3位,图标字体后三位参考icon.png
                 qq:'191221838@售前客服@694|191221839@售后客服@63e|191221840@测试客服',
                 qrCode:'wx-code.png',
                 tel:'15638527790'
             },
            diyItem:'<div class="fix-qq-kf-item"><span class="fix-qq-kf-icon fix-qq-kf-icon-qq">&#xe6b1;</span><span class="fix-qq-kf-name">自定义一个</span></div>'
         })
    

    qq在线客服代码图标字体

    你完全可以自定义图标
    qq在线客服代码图标字体

    客服代码css

     /*图标字体 用的阿里图标,http://www.iconfont.cn/ 你可以自己定义这些图标*/
            @font-face {
                font-family: 'iconfontfixqq';  /* project id:"187179" */
                src: url('//at.alicdn.com/t/font_g31k92w6xi1i3sor.eot');
                src: url('//at.alicdn.com/t/font_g31k92w6xi1i3sor.eot?#iefix') format('embedded-opentype'),
                url('//at.alicdn.com/t/font_g31k92w6xi1i3sor.woff') format('woff'),
                url('//at.alicdn.com/t/font_g31k92w6xi1i3sor.ttf') format('truetype'),
                url('//at.alicdn.com/t/font_g31k92w6xi1i3sor.svg#iconfont') format('svg');
            }
    
            #fixQqKf{  font-size: 14px;  border: #ddd solid 1px; width: 150px; background-color: #fff;  color: #666;
                position: fixed;right: -100%; bottom:-100%; z-index: 999;}
            #fixQqKf .fix-qq-kf-qrcode{ padding:12px 14px;}
            #fixQqKf .fix-qq-kf-items{ padding:18px 12px 0 12px;}
            #fixQqKf .fix-qq-kf-item{ display: block; height: 30px;line-height: 30px; margin-bottom: 10px;
                color: #666; text-decoration: none; overflow: hidden; padding-bottom: 2px; font-size: 14px;}
            #fixQqKf .fix-qq-kf-item:hover{ color:#B51F24;}
            #fixQqKf .fix-qq-kf-icon{float: left;
                width: 30px; height: 100%; margin-right: 10px; margin-top: 2px;
                font-size:28px;  font-family: 'iconfontfixqq';}
            #fixQqKf .fix-qq-kf-name{display: block; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;
               overflow: hidden; border: #eee solid 1px; text-align: center;
            }
            #fixQqKf .fix-qq-kf-item:hover .fix-qq-kf-name{background:#B51F24;  color: #fff;}
    
            #fixQqKf .fix-qq-kf-qrcode img{ width: 100%;}
            #fixQqKf .fix-qq-kf-tel{
                height: 40px; line-height: 40px; text-align: center; font-size: 20px;
                background:#B51F24;
                color: #fff;
            }
            #fixQqKf .fix-qq-kf-close{ position: absolute;right:0; top:0; z-index: 10; cursor: pointer;
                font-size: 20px; font-family: SimSun;}
            #fixQqKf .fix-qq-kf-close:hover{color:#B51F24;}
    
    ↓ 查看全文

    悬浮右侧qq在线客服代码由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    悬浮右侧qq在线客服代码-最新评论