Kefu plug-in is a zblog plug-in that pops up an online customer service window when a visitor opens a website. It can display four service information, including contact number, working hours, pre-sales consultation and after-sales consultation, and supports two contact methods, QQ and WeChat; You can add customer service personnel freely, and support user-defined customer service avatar, address, QQ, and WeChat QR code; Click the close icon to zoom to the lower right corner of the window; Responsive structure, adaptive small screen access device; Compatible with mainstream browsers such as IE9+, Firefox, Chrome, Safari, etc., the overall style design is exquisite and conforms to the design style of most websites.
The price of the plug-in is 28 yuan, and the purchase address is at the end of this article. Those who are reluctant to spend money to purchase the plug-in can add code in their own theme according to the following steps.
To add a tutorial:
1. If the topic does not reference the jquery library file, please reference the jquery library file first;
2. Add the following code to the </body> In front of the code: (usually in the footer.php file)
PS: Please replace the QQ number in the code by yourself
one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen twenty twenty-one twenty-two twenty-three twenty-four twenty-five twenty-six twenty-seven twenty-eight twenty-nine thirty thirty-one thirty-two thirty-three thirty-four thirty-five thirty-six thirty-seven thirty-eight thirty-nine forty forty-one forty-two forty-three forty-four forty-five forty-six forty-seven forty-eight forty-nine fifty fifty-one fifty-two fifty-three fifty-four fifty-five fifty-six fifty-seven fifty-eight fifty-nine sixty sixty-one sixty-two sixty-three sixty-four sixty-five sixty-six sixty-seven sixty-eight sixty-nine seventy seventy-one seventy-two seventy-three seventy-four seventy-five seventy-six seventy-seven seventy-eight seventy-nine eighty eighty-one eighty-two eighty-three eighty-four eighty-five eighty-six eighty-seven eighty-eight eighty-nine ninety ninety-one ninety-two ninety-three ninety-four ninety-five ninety-six ninety-seven ninety-eight ninety-nine one hundred one hundred and one one hundred and two one hundred and three one hundred and four one hundred and five one hundred and six one hundred and seven one hundred and eight one hundred and nine one hundred and ten one hundred and eleven one hundred and twelve one hundred and thirteen one hundred and fourteen one hundred and fifteen one hundred and sixteen one hundred and seventeen one hundred and eighteen one hundred and nineteen one hundred and twenty one hundred and twenty-one one hundred and twenty-two one hundred and twenty-three one hundred and twenty-four one hundred and twenty-five one hundred and twenty-six one hundred and twenty-seven one hundred and twenty-eight one hundred and twenty-nine one hundred and thirty one hundred and thirty-one one hundred and thirty-two one hundred and thirty-three one hundred and thirty-four one hundred and thirty-five one hundred and thirty-six one hundred and thirty-seven | <div class = "kfPopup" >
<div class = "kfBox" >
<div class = "kfMain" >
<div class = "top" >
<div class = "tel" > thirteen billion seven hundred and sixty-four million six hundred and eighteen thousand six hundred and sixty-six </div >
<div class = "time" > 9:00 - 18:00 </div >
<div class = "kfBtn" >
<span class = "open" > <a href = "javascript:void(0);" > </a > </span >
<span class = "close" > <a href = "javascript:void(0);" > </a > </span >
</div >
</div >
<div class = "btm" >
<dl class = "before" >
<dt > Pre sales consultation </dt >
<dd >
<span class = "left" > <i style = "background-image:url(../images/women.png);" > </i > Miss Liu </span >
<span class = "right" > <a rel = "nofollow" target = "_blank" href = " http://wpa.qq.com/msgrd?v=3&uin=1376461&site= " > <i class = "qq" > </i > <em > QQ Contact </em > </a > <a class = "kfwx" href = "../upload/qrcode.png" rel = "nofollow" > <i class = "wx" > </i > <em > We can contact with each other in wechat </em > </a > </span >
</dd >
<dd >
<span class = "left" > <i style = "background-image:url(../images/man.png);" > </i > Miss Li </span >
<span class = "right" > <a rel = "nofollow" target = "_blank" href = " http://wpa.qq.com/msgrd?v=3&uin=1376461&site= " > <i class = "qq" > </i > <em > QQ Contact </em > </a > <a class = "kfwx" href = "../upload/qrcode.png" rel = "nofollow" > <i class = "wx" > </i > <em > We can contact with each other in wechat </em > </a > </span >
</dd >
<dd >
<span class = "left" > <i style = "background-image:url(../images/women.png);" > </i > Miss Liu </span >
<span class = "right" > <a rel = "nofollow" target = "_blank" href = " http://wpa.qq.com/msgrd?v=3&uin=1376461&site= " > <i class = "qq" > </i > <em > QQ Contact </em > </a > <a class = "kfwx" href = "../upload/qrcode.png" rel = "nofollow" > <i class = "wx" > </i > <em > We can contact with each other in wechat </em > </a > </span >
</dd >
</dl > <dl class = "after" >
<dt > After sales consultation </dt >
<dd >
<span class = "left" > <i style = "background-image:url(../images/women.png);" > </i > Miss Liu </span >
<span class = "right" > <a rel = "nofollow" target = "_blank" href = " http://wpa.qq.com/msgrd?v=3&uin=1376461&site= " > <i class = "qq" > </i > <em > QQ Contact </em > </a > <a class = "kfwx" href = "../upload/qrcode.png" rel = "nofollow" > <i class = "wx" > </i > <em > We can contact with each other in wechat </em > </a > </span >
</dd >
<dd >
<span class = "left" > <i style = "background-image:url(../images/man.png);" > </i > Miss Li </span >
<span class = "right" > <a rel = "nofollow" target = "_blank" href = " http://wpa.qq.com/msgrd?v=3&uin=1376461&site= " > <i class = "qq" > </i > <em > QQ Contact </em > </a > <a class = "kfwx" href = "../upload/qrcode.png" rel = "nofollow" > <i class = "wx" > </i > <em > We can contact with each other in wechat </em > </a > </span >
</dd >
<dd >
<span class = "left" > <i style = "background-image:url(../images/man.png);" > </i > Miss Li </span >
<span class = "right" > <a rel = "nofollow" target = "_blank" href = " http://wpa.qq.com/msgrd?v=3&uin=1376461&site= " > <i class = "qq" > </i > <em > QQ Contact </em > </a > <a class = "kfwx" href = "../upload/qrcode.png" rel = "nofollow" > <i class = "wx" > </i > <em > We can contact with each other in wechat </em > </a > </span >
</dd >
</dl >
<div class = "clear" > </div >
</div > </div >
</div >
<div class = "kfWechat" >
<div class = "kfClose" > </div >
<div class = "kfTitle" > Scan WeChat </div >
<div class = "kfQrcode" > </div >
<div class = "kfText" >
<p > Click "Discover" in WeChat and scan </p >
<p > Contact us after adding friends with QR code </p >
</div >
</div >
</div >
<script type = "text/javascript" > /* Plugin by blog Author Url: http://www.boke8.net/ */ function setCookie(cname, cvalue, exdays){ var day = new Date(); day.setTime(day.getTime() + exdays*24*60*60*1000); var expires = 'expires = ' + day.toUTCString(); document.cookie = cname + '=' + escape(cvalue) + ';' + expires + ';path=/'; } function getCookie(cname){ var arrayStr = document.cookie.split('; '); for (var i=0; i <arrayStr.length ; i++ ) {
var temp = arrayStr [ i ] .split ( '=' ) ;
if ( temp [ zero ] == cname ) return unescape ( temp [ one ] ) ;
}
} $ ( function ( ) {
$ ( window ) .resize ( function ( ) {
var _height = $ ( window ) .height ( ) * 0.7 - 10;
$ ( '.kfBox .btm' ) .css ( 'maxHeight' ,_height ) ;
$ ( '.kfBox dl .kfClear' ) .remove ( ) ;
if ( $ ( 'body' ) .width ( ) > 640){ $('.kfBox dl .kfClear').remove(); }else if($('body').width() > 460){ $('.kfBox dl .kfClear').remove(); $('.kfBox dd:nth-child(2n-1)').after(' <div class = "kfClear" > </div > '); }else{ $('.kfBox dl .kfClear').remove(); $('.kfBox dd:nth-child(3n+1)').after(' <div class = "kfClear" > </div > '); } }).trigger('resize'); setTimeout(function(){ $('.kfMain').addClass('show'); },100); $('.kfBtn a').click(function(){ var _this = $(this).parent(); var _class = _this.attr('class'); _this.hide().siblings().show(); if(_class == 'close'){ $('.kfPopup').addClass('narrow'); $('.kfBox .btm').hide(); setCookie('kfStatus','close','1'); }else if(_class == 'open'){ $('.kfPopup').removeClass('narrow'); setCookie('kfStatus','open','1'); setTimeout(function(){ $('.kfBox .btm').slideDown('fast'); },330); } }); if(getCookie('kfStatus') == 'close'){ $('.kfPopup').addClass('narrow'); $('.kfBox .btm').hide(); $('.kfBtn .open').show().siblings().hide(); }else{ $('.kfPopup').removeClass('narrow'); $('.kfBtn .open').hide().siblings().show(); } $('.kfBox .kfwx').click(function(e){ e.preventDefault(); var qrcode = $(this).attr('href'); var img = ' <img src = "'+qrcode+'" alt = "Scan WeChat" /> '; $('.kfQrcode').html(img).parents('.kfWechat').fadeIn('fast'); }); $('.kfWechat .kfClose').click(function(){ $(this).parent().hide(); }); }); </script > |
3. Add the following code to the theme's css file: (generally style. css file)
one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen twenty twenty-one twenty-two twenty-three twenty-four twenty-five twenty-six twenty-seven twenty-eight twenty-nine thirty thirty-one thirty-two thirty-three thirty-four thirty-five thirty-six thirty-seven thirty-eight thirty-nine forty forty-one forty-two forty-three forty-four forty-five forty-six forty-seven forty-eight forty-nine fifty fifty-one fifty-two fifty-three fifty-four fifty-five fifty-six fifty-seven fifty-eight fifty-nine sixty sixty-one sixty-two sixty-three sixty-four sixty-five sixty-six sixty-seven sixty-eight sixty-nine seventy seventy-one seventy-two seventy-three seventy-four seventy-five seventy-six seventy-seven | /* Plugin By Blog Bar Plugin Url: https://www.boke8.net/zblog-kefu-plugin.html */
/*kfPopup*/
.kfClear { clear : both ; width : 100% ; }
.kfPopup { position : fixed ; left : zero ; bottom : zero ; background-color : rgba ( zero , zero , zero , .3 ) ; width : 100% ; height : 100% ; z-index : ten ; }
.narrow { bottom : zero ; background : none ; width : auto ; height : auto ; }
.narrow .kfBox { width : 200px ; right : zero ; bottom : zero ; margin-right : zero ; transform : none ; }
.narrow .kfBox .top { padding : zero 15px ; }
.narrow .kfBox .tel { padding-left : 20px ; }
.narrow .kfBox .kfMain { border-radius : 5px 5px zero zero ; }
.narrow .kfBtn { right : 15px ; }
.kfBox { width : 720px ; position : fixed ; right : 50% ; bottom : 50% ; margin-right : -360px ; transform : translateY ( 50% ) ; transition :all .3s ; }
.kfBox .kfMain { background-color : #fff ; box-shadow : 1px 1px 50px rgba ( zero , zero , zero , .3 ) ; border-radius : 5px 5px 10px 10px ; overflow : hidden ; transform : scale ( zero ) ; transition :transform .3s ; }
.kfBox .kfMain .show { transform : scale ( one ) ; }
.kfBox .top { background-color : #1e3988 ; background :linear- gradient ( 45deg , #1e3988 zero , rgba ( two hundred and thirty-two , one hundred and fifty-five , ninety-five , zero point nine six ) 100% ) ; height : 47px ; line-height : 47px ; color : #fff ; padding : zero 20px ; font-size : 16px ; overflow : hidden ; position : relative ; }
.kfBox .tel { background : url ( images/kf_phone.png ) no-repeat left center ; padding-left : 25px ; float : left ; }
.kfBox .time { float : right ; padding-right : 25px ; }
.kfBtn { position : absolute ; right : 20px ; top : 15.5px ; }
.kfBtn span { display : block ; float : left ; }
.kfBtn a { display : block ; width : 16px ; height : 16px ; background : no-repeat center center ; background-size : contain ; }
.kfBtn a :hover { opacity : .85 ; }
.kfBtn .close a { background-image : url ( images/kf_close.png ) ; }
.kfBtn .open { display : none ; }
.kfBtn .open a { background-image : url ( images/kf_open.png ) ; }
.kfBox .btm { position : relative ; padding : 20px ; overflow-y : auto ; }
.kfBox dl { float : left ; width : 45% ; position : relative ; }
.kfBox dl .after { float : right ; }
.kfBox dt { font-size : 18px ; color : #000 ; line-height : 1.875em ; margin-bottom : 5px ; }
.kfBox dd { font-size : 14px ; color : #4c4c4c ; overflow : hidden ; clear : both ; padding : 10px zero ; }
.kfBox dd span { display : block ; }
.kfBox dd a { display :inline- block ; width : 80px ; padding : zero 10px ; height : 30px ; line-height : 28px ; background-color : #0a8bc0 ; border-radius : 5px ; color : #fff ; margin-left : 10px ; }
.kfBox dd a :hover { opacity : .85 ; }
.kfBox dd i { display :inline- block ; vertical-align : middle ; background : no-repeat center center ; background-size : contain ; }
.kfBox .left { line-height : 30px ; float : left ; }
.kfBox .left i { margin-right : 7px ; width : 23px ; height : 30px ; }
.kfBox .right { float : left ; }
.kfBox .right i { width : 16px ; height : 18px ; margin-right : 5px ; }
.kfBox .right em { font-style : normal ; display :inline- block ; vertical-align : middle ; }
.kfBox .right .qq { background-image : url ( images/kf_qq.png ) ; }
.kfBox .right .wx { background-image : url ( images/kf_wx.png ) ; }
.kfWechat { background-color : #fff ; box-shadow : 0px 0px 8px #666 ; position : fixed ; left : 50% ; top : 50% ; width : 200px ; height : auto ; margin-left : -100px ; transform : translateY ( -50% ) ; border-radius : 5px ; overflow : hidden ; display : none ; }
.kfWechat .kfTitle { color : #777 ; background-color : #f3f3f3 ; height : 30px ; line-height : 30px ; font-size : 12px ; text-align : center ; margin-bottom : 15px ; }
.kfWechat .kfQrcode { padding : zero 30px ; background-color : #fff ; }
.kfWechat .kfQrcode img { display : block ; width : 100% ; height : 100% ; margin : zero auto ; }
.kfWechat .kfText { font-size : 12px ; text-align : center ; color : #666 ; line-height : 1.5em ; padding : 5px zero ; }
.kfWechat .kfClose { width : 12px ; height : 12px ; background : url ( images/kf_close2.png ) no-repeat center center ; background-size : contain ; position : absolute ; right : 10px ; top : 9px ; cursor : pointer ; opacity : .85 ; }
@media only screen and (max-width:960px){
.kfBox { width : 640px ; margin-right : -320px ; }
.kfBox dt { font-size : 16px ; margin-bottom : zero ; }
.kfBox dd { padding : 5px zero ; }
.kfBox dd a { font-size : 12px ; width : 70px ; line-height : 29px ; margin-left : 5px ; }
}
@media only screen and (max-width:768px){
.kfBox { width : 580px ; margin-right : -290px ; }
.kfBox .top { padding : zero 10px ; height : 40px ; line-height : 40px ; font-size : 14px ; }
.kfBox .tel { background-size : auto 14px ; padding-left : 20px ; }
.kfBox .btm { padding : 10px ; margin-bottom : 10px ; }
.kfBox dl { width : 50% ; }
.kfBox dd a { height : 28px ; line-height : 28px ; }
.kfBox .left { line-height : 28px ; }
.kfBox .left i { width : 15px ; height : 20px ; margin-right : 5px ; }
.kfBtn { right : 10px ; top : 12px ; }
}
@media only screen and (max-width:640px){
.kfBox { width : 90% ; margin-right : -45% ; }
.kfBox .left , .kfBox .right { float : none ; }
.kfBox dd { width : 50% ; float : left ; clear : none ; padding : zero ; }
.kfBox dd a { margin-left : zero ; margin-bottom : 5px ; display : block ; }
}
@media only screen and (max-width:460px){
.kfBox dl , .kfBox dl .after { width : auto ; float : none ; clear : both ; }
.kfBox dt { text-align : center ; }
.kfBox dd { width : 33.333% ; text-align : center ; }
.kfBox dd a { padding : zero 5px ; margin : zero auto 5px ; }
} |
4. Prepare icons of "QQ, WeChat, Close, Expand, Phone" according to the following names and sizes (you can download them in iconfont) and add them to the images folder of the theme:
PS: If the css file and images folder are not in the same path, please modify the url path in the CSS code above.
- QQ – kf_qq.png (size: 16 × 18)
- WeChat – kf_wx.png (size: 16 × 18)
- Close – kf_close.png (size: 16 × 16)
- Close – kf_close2.png (size: 16 × 16)
- Expand – kf_open.png (size: 16 × 16)
- Telephone – kf_phone.png (size: 16 × 16)
5. After saving the file, click "[Clear Cache and Recompile Template]" on the background homepage of zblog website to take effect.
Plug in purchase: Zblog Official Application Center (28 yuan/share)
