百度商桥在网页中的调用;百度商桥如何嵌入到网页中;百度商桥如何自定义右侧(左侧)图标
[重要通告]如您遇疑难杂症,本站支持知识付费业务,扫右边二维码加博主微信,可节省您宝贵时间哦!
有的网站前端要用到独立的百度商桥沟通代码,但是直接放进去可能展示的方式不太友好,在当前页面打开了,或者打开了一个新的页面,用下面的js调用的方法,可以在页面中调用,第一个方法只能调用一次,第二个方法可以在一个页面中调用多次。
百度商桥的对话框:
<button class="btn btn-large bg-main align-center" onclick="$('#nb_invite_ok').click()"><i class="i-commenting-o size-big"></i> 立即咨询</button>
html:
<a class="cli_a" href="javascript:void(0);">我要咨询</a>
js:
$(function(){ //点击按钮时判断 百度商桥代码中的“我要咨询”按钮的元素是否存在,存在的话就执行一次点击事件 $(".cli_a").click(function(event) { if ($('#nb_invite_ok').length > 0) { $('#nb_invite_ok').click(); } }); });
在当前页面,打开客服独立沟通链接
方法一(只能调用一次):
html:
<input type=”button” value=”点我咨询” id="open" />
js:
<script> var btn = document.getElementById("open"); btn.onclick = function () { window.open('此处请替换独立沟通URL地址','windowForBridgeIM','left=100,top=200,width=480,height=580,location=no,resizable=yes,status=no,toolbar=no,menubar=no'); } </script>
方法二(可以调用多次):
html:
<a href="#" onclick="open()">点我咨询</a>
或者:
<a href="javascript:open()">点我咨询</a>
js:
<script language="JavaScript"> function open() { window.open ("此处请替换独立沟通URL地址", "newwindow", "height=600, width=800, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") } </script>
参数解释如下:
<SCRIPT LANGUAGE="javascript"> js脚本开始; window.open 弹出新窗口的命令; 'page.html' 弹出窗口的文件名; 'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替; height=100 窗口高度; width=400 窗口宽度; top=0 窗口距离屏幕上方的象素值; left=0 窗口距离屏幕左侧的象素值; toolbar=no 是否显示工具栏,yes为显示; menubar,scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小,yes为允许; location=no 是否显示地址栏,yes为允许; status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许; </SCRIPT>
易聊的对话框
html:
<a href="javascript:void(0)" onclick="openJesongChatByGroup(13059,24845);return false;"></a>
或者
<a href="javascript:jesong.monitor.accept()"></a>
方法一 前端使用
<input type=”button” value=”点我咨询” id=”Aisionnet” />
插入js
<script> var btn = document.getElementById(‘Aisionnet’); btn.onclick = function () { window.open('此处请替换独立沟通URL地址','windowForBridgeIM','left=100,top=200,width=480,height=580,location=no,resizable=yes,status=no,toolbar=no,menubar=no'); } </script>
因为是用id的调用方式,所以一个页面只能使用一次。
方法二 前端使用
<a href="#" onclick="Aisionnet()">点我咨询</a>
插入js代码
<script language="JavaScript"> function Aisionnet() { window.open ("此处请替换独立沟通URL地址", "newwindow", "height=600, width=800, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") } </script>
上面js代码是用方法的形式来应用,所以一个页面可以多次调用,参数解释如下,可以根据需求调整
<SCRIPT LANGUAGE="javascript"> js脚本开始; window.open 弹出新窗口的命令; 'page.html' 弹出窗口的文件名; 'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替; height=100 窗口高度; width=400 窗口宽度; top=0 窗口距离屏幕上方的象素值; left=0 窗口距离屏幕左侧的象素值; toolbar=no 是否显示工具栏,yes为显示; menubar,scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小,yes为允许; location=no 是否显示地址栏,yes为允许; status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许; </SCRIPT>
百度商桥如何自定义
我们在使用百度商桥的时候,可能发现百度商桥不太符合我们的审美观,那如何操作呢?具体请看下面的介绍:(以下图1为百度商桥自定义,图2位自定义)
/*百度商桥代码*/ var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f6c6885ed6b8a99c743fd6a4b0706e87"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); //联系我们显示 !function() { var timer = setInterval(function() { //处理免费电话 if ($(".lxb-container").length > 0) { var btn = $(".lxb-close-btn"), icon = $(".lxb-container"); btn.remove(); icon.css({ "right": "61px","bottom": "auto","top": "40%","left":"auto"}); var cssText = icon.attr("style") + ";display: none !important;"; icon.css("cssText", cssText); icon.find(".lxb-hide-btn").remove(); clearInterval(timer); } //隐藏在线客服图标 if($("#nb_icon_wrap").length > 0){ $("#nb_icon_wrap").hide(); } }, 1); setTimeout(function() { clearInterval(timer); }, 30000); } (); $(".webService .tel").hover(function(){ $(".lxb-container").show(); },function(){ $(".lxb-container").hide(); });
问题未解决?付费解决问题加Q或微信 2589053300 (即Q号又微信号)右上方扫一扫可加博主微信
所写所说,是心之所感,思之所悟,行之所得;文当无敷衍,落笔求简洁。 以所舍,求所获;有所依,方所成!
赏
支付宝赞助
微信赞助
免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。
您必须遵守我们的协议,如您下载该资源,行为将被视为对《免责声明》全部内容的认可->联系老梁投诉资源 LaoLiang.Net部分资源来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。
敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:service@laoliang.net
意在交流学习,欢迎赞赏评论,如有谬误,请联系指正;转载请注明出处: » 百度商桥在网页中的调用;百度商桥如何嵌入到网页中;百度商桥如何自定义右侧(左侧)图标