日本韩国欧美精品大片卡二,国产精品一区在线免费观看,欧美自拍资源在线

首頁(yè) > 在線客服系統(tǒng)問(wèn)答 > 懸浮在網(wǎng)站上的微信在線客服如何實(shí)現(xiàn)

懸浮在網(wǎng)站上的微信在線客服如何實(shí)現(xiàn)

作者：快商通發(fā)布時(shí)間：2020年08月06日閱讀量：

摘要：

通過(guò)快商通在線客服系統(tǒng)的后臺(tái)配置，為網(wǎng)站添加在線客服的分組圖標(biāo)，根據(jù)需求設(shè)置自己的微信二維碼，就可以實(shí)現(xiàn)將在線客服的功能組件懸浮在網(wǎng)站上的效果，鼠標(biāo)觸摸微信圖標(biāo)可以自動(dòng)彈出微信二維碼。

網(wǎng)站在線客服系統(tǒng)

網(wǎng)站上的微信在線客服是什么

經(jīng)常能夠在他人網(wǎng)站上看到右側(cè)浮動(dòng)的在線客服系統(tǒng)，其中就包含有“微信咨詢”的相關(guān)按鈕，觸摸或點(diǎn)擊的時(shí)候會(huì)自動(dòng)彈出企業(yè)的二維碼，非常方便。也可以點(diǎn)擊旁邊的在線咨詢，可以直接跟客服人員進(jìn)行對(duì)話。這種效果是目前大公司想要做微信營(yíng)銷主流的頁(yè)面展示方式。

網(wǎng)站上的微信在線客服

懸浮在網(wǎng)站上的微信在線客服如何實(shí)現(xiàn)

1、打開快商通，找到【設(shè)置中心】-【生成代碼】，點(diǎn)擊進(jìn)入后選擇【圖標(biāo)設(shè)置】，點(diǎn)擊【分組圖標(biāo)】進(jìn)入浮動(dòng)在線客服功能組件的設(shè)置界面。

在線客服圖標(biāo)設(shè)置

在圖標(biāo)外觀下面選擇自定義樣式，在彈出的【定制代碼】?jī)?nèi)容框中加入自己想要定制化的代碼就可以了。

自定義在線客服樣式

如果不會(huì)寫代碼沒(méi)關(guān)系，這邊分享一下快商通官網(wǎng)的在線客服代碼，先復(fù)制粘貼出來(lái)，Ctrl+f搜索“微信咨詢”，找到微信二維碼的圖片地址，秀改成你自己的公眾號(hào)二維碼就可以了（文章底部分享完整代碼）。

替換代碼中的微信公眾號(hào)二維碼

當(dāng)然，除了微信咨詢的其他功能組件的鏈接地址也要一并修改，調(diào)整完以后再?gòu)?fù)制進(jìn)【定制代碼】欄中，點(diǎn)擊保存就可以了。

保存圖標(biāo)樣式

懸浮在網(wǎng)站上的微信在線客服代碼分享

下載快商通后找到【設(shè)置中心】-【生成代碼】，點(diǎn)擊進(jìn)入后依次選擇：【圖標(biāo)設(shè)置】-【分組圖標(biāo)】-【圖標(biāo)外觀】-【自定義樣式】，將下面的代碼調(diào)整后復(fù)制到【定制代碼】?jī)?nèi)容框中就可以了。

以下是完整代碼：

{

//關(guān)閉區(qū)域(對(duì)象)的id值

g_close: '',

//頂端-html代碼

g_top: function() {

var g_id = KS.$(KS.grouping2IconId);

var ksscrollToTop = KS.$(KS.ksscrollToTop);

window.onscroll= function(){

var t = document.documentElement.scrollTop||document.body.scrollTop;

var ksscrollToTop = document.getElementById('ksscrollToTop');

if(t>0){

ksscrollToTop.style.display="block";

}else{

ksscrollToTop.style.display="none";

}

this.g_scrollToTop();

var _html = [];

_html.push('<a style="position:relative;display:block; width:70px; height:75px;font-size:13px;letter-spacing: 0; color:#fff;background:#05CCB7; text-align:center;text-decoration:none;border-top-left-radius: 2px;border-top-right-radius: 2px;" onmouseover="this.style.background=\'#05BEB4\';" onmouseout="this.style.background=\'#05CCB7\';" href="https://test.kuaishang.cn/bs/im.htm?cas=1061___168168&fi=1136" title="在線咨詢" target="_blank" rel="nofollow"><img style="margin-top:15px;margin-bottom:4px;" src="//m.duanwenhong.com/cusimg/ks_fz_before_20200221.png" border="0"/><div>在線咨詢</div><img style="position:absolute;left:3px;bottom:0;" src="//m.duanwenhong.com/cusimg/ks_fz_line_20200221.png" border="0"/></a>');

_html.push('<a style="position:relative;display:block; width:70px; height:74px;font-size:13px;letter-spacing: 0; color:#fff;background:#05CCB7; text-align:center;text-decoration:none;cursor:pointer;" onmouseover="this.style.background=\'#05BEB4\';document.getElementById(\'kswechat_code\').style.display=\'block\';" onmouseout="this.style.background=\'#05CCB7\';document.getElementById(\'kswechat_code\').style.display=\'none\';" title="微信咨詢" rel="nofollow"><img style="margin-top:13px;margin-bottom:4px;"

src="//m.duanwenhong.com/cusimg/ks_fz_wechat_20200229.png" border="0"/><div>微信咨詢</div><img style="position:absolute;left:3px;bottom:0;" src="//m.duanwenhong.com/cusimg/ks_fz_line_20200221.png" border="0"/></a>');

_html.push('<div style="position: relative; display: block; width: 70px; height: 74px; font-size: 13px; letter-spacing: 0px; color: rgb(255, 255, 255); background: rgb(5, 204, 183); text-align: center; text-decoration: none;overflow: hidden;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;" onmouseover="this.style.overflow=\'\';" onmouseout="this.style.overflow=\'hidden\';"><img style="position:absolute;right:3px;bottom:0;" src="//m.duanwenhong.com/cusimg/ks_fz_line_20200221.png" border="0"><div style="width:300px;height:73px;float:right;background:#05CCB7;margin-right:-230px;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;position: absolute;z-index:1;right:0;top:0;" onmouseover="this.style.marginRight=\'0\';" onmouseout="this.style.marginRight=\'-230px\';"><div style="width:70px;height:73px;float:left;text-align:center;color:#fff;font-weight:300;line-height:1;overflow:hidden;"><img style="margin-top:13px;margin-bottom:4px;" src="//m.duanwenhong.com/cusimg/ks_fz_phone_20200221.png" border="0"><div>電話咨詢</div></div><div style="width:230px;height:73px;float:left;"><div style="width: 220px;height:34px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;margin-top: 20px;overflow:hidden;"><form name="f" id="f" method="post" action="https://tel.kuaishang.cn/calld.php" target="aa"><input type="hidden" name="fromurl" id="call_fromurl" value="http://m.duanwenhong.com/mianfeidianhua.html"><input type="hidden" name="sid" value="26"><input type="hidden" name="did" value="199"><input style="display:block;width: 140px;padding:0 10px;height:34px;float:left;color:#a4a4a4;border:none;outline:0;font-size: 12px;font-weight:300;box-sizing: border-box;" name="tel" type="text" id="tel" value="輸入電話即可免費(fèi)通話" onclick="this.value=\'\'" onblur="if (value ==\'\'){value=\'輸入電話即可免費(fèi)通話\'}"><input style="display:block;width: 80px;height:34px;float:right;padding: 0;line-height:34px;text-align:center;background-color:#ff9c01;color:#fff;border:none;outline:0;font-size: 13px;font-weight:300;box-sizing: border-box;cursor:pointer;" name="Submit" type="submit" id="callBtn" value="立即回電"><iframe name="aa" frameborder="0" width="0" height="0" style="display: none"></iframe></form></div></div></div></div>');

_html.push('<a style="position:relative;display:block; width:70px; height:75px;font-size:13px;letter-spacing: 0; color:#fff;background:#05CCB7; text-align:center;text-decoration:none;" onmouseover="this.style.background=\'#05BEB4\';" onmouseout="this.style.background=\'#05CCB7\';" href="https://kuaishang.cn/reg.html?refer=demo" title="體驗(yàn)DEMO" target="_blank" rel="nofollow"><img style="margin-top:14px;margin-bottom:4px;" src="//m.duanwenhong.com/cusimg/ks_fz_demo_20200221.png" border="0"/><div>體驗(yàn)DEMO</div><img style="position:absolute;left:3px;bottom:0;" src="//m.duanwenhong.com/cusimg/ks_fz_line_20200221.png" border="0"/></a>');

_html.push('<a style="position:relative;display:block; width:70px; height:75px;font-size:13px;letter-spacing: 0; color:#fff;background:#ff9c01; text-align:center;text-decoration:none;" onmouseover="this.style.background=\'#ef9405\';" onmouseout="this.style.background=\'#ff9c01\';" href="https://kuaishang.cn/reg.html?refer=rightFloatingBox" title="使用免費(fèi)版" target="_blank" rel="nofollow"><img style="margin-top:14px;margin-bottom:4px;" src="//m.duanwenhong.com/cusimg/ks_fz_free_20200221.png" border="0"/><div>使用免費(fèi)版</div></a>');

_html.push('<a id="ksscrollToTop" style="position:relative;display:none; width:70px; height:48px;font-size:13px;letter-spacing: 0; color:#fff;background:#dedfdf; text-align:center;text-decoration:none;cursor:pointer;" onmouseover="this.style.background=\'#eaeaea\';" onmouseout="this.style.background=\'#dedfdf\';" onclick="window.scrollTo(0,0)" target="_blank"><img style="position:absolute;left:22px;top:16px;" src="//m.duanwenhong.com/cusimg/ks_fz_top_20200221.png" border="0"/></a>');

_html.push('<div id="kswechat_code" style="position:absolute;display:none; width:207px; height:290px;font-size:13px;letter-spacing: 0; color:#fff;background:url(//m.duanwenhong.com/cusimg/icon_wechat_nosem.png); text-align:center;top:50%;right:74px;margin-top:-146px;"></div>');

return _html.join('');

g_scrollToTop: function() {

var t = document.documentElement.scrollTop||document.body.scrollTop;

setTimeout(function() {

var ksscrollToTop = document.getElementById('ksscrollToTop');

if(t>0){

ksscrollToTop.style.display="block";

}else{

ksscrollToTop.style.display="none";

}

}, 100);

//部門客服內(nèi)容頭