最近在做项目的时候用到了百度商桥进行在线沟通,现总结下实现步骤:
1.下载百度商桥客户端,注册帐号,主帐号下可以配置多个子帐号,作为不同类别的客服,如售前、售后等
2.在商桥客户端中可简单自定义样式,如设置背景图片、颜色等
3.新建站点,获取代码,拷贝到页面中
4.以上的步骤都是在客户端中完成的,其他功能就不展开说了,如设置自动回复等,下面先给出页面最终的实现思路:打开页面时调用百度商桥代码,先设置咨询栏为隐藏,用定时器延迟自定义方法执行,因为调用的百度商桥代码执行需要时间,不延迟执行自定义方法的话,获取不到咨询栏,在咨询栏上方加关闭按钮后,设置咨询栏为显示,这样用户体验较好,用户看不见加关闭按钮的过程。用cookie存储咨询栏的状态是收起还是关闭。以下是代码实现。
5.直接上代码
<!-- 一定要放在页面加载完成的位置,不能在head标签中 -->
<style type="text/css">
#newBridge{ display:none;}
#newBridge #nb_icon_wrap #closeBridge {
background: #2a5aaa;
color: #fff;
border: 1px solid #2a5aaa;
border-bottom: 0px;
padding: 5px;
text-align: right;
}
#newBridge #openBridge {
background: #2a5aaa;
text-align: center;
border-radius: 0;
right: 0;
color: #fff;
padding: 10px 5px;
right: -20px;
width: 10px;
}
</style>
<script src="js/jquer/jquery.cookie.js"></script>
<script type="text/javascript">
$(function() {
setTimeout(function() {
//加载的图片会默认有圆角,不好看
$('.nb-icon-inner-wrap').css('border-radius', '0');
//加关闭按钮
$("#nb_icon_wrap").prepend("<i class='icon-chevron-right' id='closeBridge'> 关闭</i>");
//右侧在线客服按钮
$("#nb_icon_wrap").before("<ins class='nb-icon-base icon-right-center' id='openBridge'><i class='icon-chevron-left'></i>在线客服</ins>");
$("#closeBridge").click(function(e) {
$("#nb_icon_wrap").animate({
right : -150
}, 200);
$("#openBridge").animate({
right : 0
}, 200);
//引入的jquery.cookie.js,用法可自行百度
$.cookie('bridge_status', 'close', {
path : '/'
});
e.stopPropagation();//阻止事件冒泡,不然点击关闭按钮后,还是会弹出对话框或留言框
});
$("#openBridge").click(function() {
$("#openBridge").animate({
right : -20
}, 200);
$("#nb_icon_wrap").animate({
right : 20
}, 200);
$.cookie('bridge_status', '', {
path : '/'
});
});
$("#newBridge").show();
}, 2000);
var bridge_status = $.cookie('bridge_status');
if (bridge_status == "close") {
$("#newBridge").hide();
setTimeout(function() {
$('#closeBridge').trigger("click");
$("#newBridge").show();
}, 2000);
}
});
</script>
6.效果图