郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

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

懒人建站提供网页素材下载、网站模板
这一切都是免费的!
当前位置:懒人建站 > javascript > 网页特效 >

悬浮右侧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在线客服代码http://www.51xuediannao.com/js/texiao/qqkefu3.html

(责任编辑:懒人建站)

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

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