【详细】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.效果图

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

网页中集成百度商桥，自定义样式，可参照江苏美圣官网
下文是2016年10-24写的,11月份发现百度商桥更新了,所以下面的方法已经不存在了,目前(2016-11-18)商桥删除了内嵌样式,所以不能自定义了. 如今想在网站中集成一个在线即时沟通的功能是非 ...
vue项目使用百度商桥实现在线聊天功能
1.首先下载百度商桥,并注册一个账号,然后登陆这个账号. 2.登陆进去之后是这样的界面,找到基础设置 3.点击站点,然后点击新建站点 4.在域名那里输入主机的IP地址,不知道IP的按下Windows+ ...
网站集成百度商桥在线咨询的相关操作
相关信息 *善于借用百度商桥的官网文档和客服 *百度商桥在线咨询和qq在线咨询一样,都是在网站集成在线咨询: *注销登录账号(详见图片注销) : *分为主账号和分账号,分账号权限有限: *有vip版和 ...
百度商桥放在php网站哪里_怎么在自己的网站上添加百度商桥？最详细的版本！...
在分享怎么在自己的网站上添加百度商桥之前,先和大家分享下什么是"百度商桥",简单的说"百度商桥"是百度旗下的一款产品,它的最大作用就可以帮助网站实现访客即时沟通 ...
鼠标单击按钮后就能弹出百度商桥聊天窗口
首先需要把你的bai按钮添加一个class,例如加一du个 "shangqiao"zhi 1 <a class="shangqiao" href=&qu ...
点击自定义按钮弹出百度商桥对话框和易聊的对话框
百度商桥的对话框: <button class="btn btn-large bg-main align-center" onclick="$('#nb_invit ...
百度商桥放在php网站哪里_如何在网站中添加百度商桥？
大部分新手站长都不知道竹子建站可以添加第三方的在线客服,商桥等功能.看到别人的网站设置的在线客服可以主动发消息,可以实时在线沟通,羡慕不能再羡慕了,告诉你不用羡慕,今天就教大家如何在网站中添加在线沟通 ...
怎么在html使用百度商桥,百度商桥怎么使用百度商桥软件使用教程
百度商桥是一款网站商务沟通工具,百度商桥最新版提供网络营销"成单关键环节"所需的全部服务.安装商桥客户端后,只需在网站上添加一段代码,您即可获得网民:"进入网站.浏览网页 ...
php加入百度商桥代码,在WP网站上使用百度商桥
百度商桥是一种网页即时沟通工具最近有不少朋友通过WEB主题公园的百度商桥和我们联系,也对于百度商桥这种即时网页沟通比较感兴趣. 因此这里我们也对这种比较好用的网页即时沟通工具进行一个介绍,大家也可以 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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