【详细】web项目集成百度商桥步骤 简单修改默认样式 咨询栏可收起与展开

最近在做项目的时候用到了百度商桥进行在线沟通，现总结下实现步骤：

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.效果图