h5在線客服系統(tǒng)源碼
作者：快商通發(fā)布時間：2021年01月13日
摘要：
在線客服系統(tǒng)源碼h5版本是一套適用于h5頁面的客服功能源代碼，能夠快速為h5頁面實現(xiàn)在線客服對話框和相關(guān)客服功能組件，并支持樣式自定義設(shè)置。本文將分享免費在線客服系統(tǒng)h5源碼。
本文目錄：
一、什么是h5在線客服系統(tǒng)源碼
二、在線客服系統(tǒng)源碼能直接使用嗎
三、使用h5在線客服系統(tǒng)源碼注意事項
四、h5在線客服系統(tǒng)源碼分享
五、總結(jié)
什么是h5在線客服系統(tǒng)源碼
h5在線客服系統(tǒng)源碼是一套適用于h5頁面的在線咨詢客服功能，常用于企業(yè)活動頁面推廣過程中為瀏覽頁面的用戶提供在線咨詢解答的服務(wù)。通過將源碼加載在頁面中，可以為h5頁面生成特定樣式的客服系統(tǒng)，是目前適用性較廣的源代碼。
h5在線客服系統(tǒng)源碼能直接使用嗎
使用h5在線客服系統(tǒng)源碼需要遵循一定的代碼規(guī)范，直接使用則有可能出現(xiàn)代碼沖突的情況，對于代碼基礎(chǔ)較弱的用戶來說并不友好。難點主要在將h5在線客服系統(tǒng)源碼放置在頁面上后，前后端數(shù)據(jù)的收發(fā)會由于參數(shù)上的差異產(chǎn)生問題。
使用h5在線客服系統(tǒng)源碼注意事項
介于大部分站長或項目負(fù)責(zé)人對h5代碼并不是特別了解，建議在頁面中直接調(diào)用通過快商通客服系統(tǒng)生成js代碼（包含完整的h5在線客服系統(tǒng)源碼）進行使用，就可以快速為h5頁面生成在線客服咨詢對話框功能，可以直接與后端客服進行溝通。
h5在線客服系統(tǒng)后臺設(shè)置
1、借助快商通客服系統(tǒng)獲取h5源碼
下載快商通，登錄后找到“站點管理”功能進行網(wǎng)站域名綁定，然后通過功能搜索輸入“代碼”找到“代碼生成”功能，選擇域名和對應(yīng)的站點類型后即可獲得調(diào)用快商通在線客服系統(tǒng)部署在云端h5源碼的js。
2、將頁面進行js調(diào)用
找到需要實現(xiàn)在線客服功能的h5頁面源碼，打開后在html標(biāo)簽結(jié)束之前的位置插入步驟1獲取到的js，即可在頁面調(diào)用完整的在線客服系統(tǒng)h5源碼，避免因為參數(shù)配置錯誤導(dǎo)致某一環(huán)節(jié)出現(xiàn)數(shù)據(jù)問題。
簡便的h5在線客服系統(tǒng)源碼替代使用方式
除了上面提供的方法之外，還可以利用客服系統(tǒng)生成對話鏈接，直接將鏈接地址復(fù)制在h5頁面“在線客服”的功能按鈕上，當(dāng)用戶點擊后可以直接跳轉(zhuǎn)到跟客服人員的溝通對話界面，并且可以使用快商通軟件客戶端執(zhí)行完整的功能，無需花費大量精力搗鼓h5源代碼。
h5在線客服系統(tǒng)效果預(yù)覽
h5在線客服系統(tǒng)源碼分享
為h5大家在線客服系統(tǒng)樣式部位源碼，可以直接拷貝后使用（但還是更推薦使用js進行調(diào)用）
{
//關(guān)閉區(qū)域(對象)的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:#ff9c01; text-align:center;text-decoration:none;border-top-left-radius: 2px;border-top-right-radius: 2px;" onmouseover="this.style.background=\'#ef9405\';" onmouseout="this.style.background=\'#ff9c01\';" href="javascript:void(0);" onclick="KS.openChatWin();return false;" title="立即咨詢" rel="nofollow"><img style="margin-top:15px;margin-bottom:4px;" src="//m.duanwenhong.com/cusimg/ks_fz_bug_20200907.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\';" 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="輸入電話即可免費通話" onclick="this.value=\'\'" onblur="if (value ==\'\'){value=\'輸入電話即可免費通話\'}"><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="體驗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>體驗DEMO</div></a>');
_html.push('<a style="position:relative;display:none; width:70px; height:70px;font-size:13px;letter-spacing: 0; color:#fff;background:#05CCB7; text-align:center;text-decoration:none;margin-top:8px;" href="http://m.duanwenhong.com/huodong/complaints/" title="千元豪禮" target="_blank" rel="nofollow"><img src="//m.duanwenhong.com/cusimg/ks_fz_activity.png" border="0"/></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:block; width:207px; height:300px;font-size:13px;letter-spacing: 0; color:#fff;background:url(//m.duanwenhong.com/cusimg/icon_wechat_nosem.png);background-size:cover; text-align:center;top:50%;right:74px;margin-top:-150px;"><div style="position: absolute; width: 20px;height: 20px;top: 0px;right: 0px;cursor:pointer;" onclick="document.getElementById(\'kswechat_code\').style.display=\'none\';"></div></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)容頭
g_cotent_top: '',
/**部門列表-html代碼
* @_id 部門ID
* @_name 部門名稱
* @_status 部門狀態(tài)
* @_hasCs 是否有需要顯示的客服
*/
g_dpt_list: function(_id, _name, _status, _hasCs) {
return '';
},
/**客服列表-html代碼
* @_id 客服ID
* @_name 客服名稱
* @_status 客服狀態(tài)
*/
g_cust_list: function(_id, _name, _status) {
return '';
},
/**部門客服內(nèi)尾部-html代碼*/
g_cotent_but: '</div></div>',
/**中間按鈕列表-html代碼*/
g_mid: function() {
return '';
},
/**底部-html代碼*/
g_but: function() {
return '';
},
/**浮動*/
g_float: function() {
var f_v = {
_HAlign: 'right',
//放在左邊-left 右邊-right 中間-center
_VAlign: 'middle',
//放在底部-bottom 頂部-top 居中-middle
_HSize: 10,
//水平偏移位置 如上面是 right 則表示距離右邊距50px
_VSize: 0,
//垂直偏移位置 如上面是 bottom 則表示距離底部邊距50px
_zIndex: 888 //層顯示優(yōu)先級,越大顯示時越靠前端--可能會被優(yōu)先級大于該值的層覆蓋
};
return f_v;
}
}
總結(jié)：
在線客服系統(tǒng)h5源碼是能夠為h5頁面添加在線客服功能的源代碼，對于h5代碼規(guī)范掌握不好的用戶可以在頁面中調(diào)用快商通客服系統(tǒng)生成的js，就能夠?qū)崿F(xiàn)完整h5在線客服代碼的效果（后臺可配置）。
專題相關(guān)搜索：
在線客服代碼
本文所有權(quán)歸屬于快商通所有，未經(jīng)本公司許可，不得轉(zhuǎn)載、引用、摘錄、摘編、復(fù)制、下載、打印、傳播，否則快商通將依法追究相關(guān)行為人的法律責(zé)任。
相關(guān)推薦 更多
在線客服系統(tǒng)相關(guān)文章推薦
掃碼關(guān)注微信公眾平臺
商務(wù)合作
聯(lián)系我們
服務(wù)熱線：400-900-1323
地址：廈門市集美軟件園三期B20棟11-13層
掃碼關(guān)注微信公眾平臺