百度商桥接入客服指南！
2019-10-13 本文已影响0人
DragonersLi
下载地址：https://qiao.baidu.com/download.html
使用手册：https://qiao.baidu.com/assets/doc/bridge2016-manual.pdf
产品基础培训：https://qiao.baidu.com/assets/doc/bridge2016-start.pdf
百度统计：https://tongji.baidu.com/web/welcome/login
image.png
下载电脑版注册登录
站点设置：（电脑和手机端客服和访客信息）
image.png
帮助中心，快速设置，生成代码：
image.png
生成代码放入网站head：
image.png
访客信息和轨迹：
image.png
PC端客服和手机端客服，样式位置颜色等可以自定义：
image.png
image.png
自定义弹出在线咨询：（模仿咨询按钮点击）
#html
<a class="shangqiao" href="javascript:void(0);">我要咨询</a>
#js代码
$(function(){
//点击按钮时判断 百度商桥代码中的“我要咨询”按钮的元素是否存在，存在的话就执行一次点击事件
$(".shangqiao").click(function(event) {
if ($('#nb_invite_ok').length > 0) {
$('#nb_invite_ok').click();
}
});
});
线上案例demo：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>在线客户服务</title>
<link rel="shortcut icon" href="/favicon.ico">
<style>
* {
margin:0;
padding:0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a:link {text-decoration: none;}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
html, body {
width: 100%;
overflow-x: hidden;
}
html { overflow-x: hidden; overflow-y: auto; }
button{border: none; box-shadow: none;font-size: 13px;}
/*---------------productlist.css-----------------------------------*/
.prolist {
height:98px;
border-bottom:1px solid #D7D7D7;
width:80%;
margin:auto;
display:table;
}
.imgbox {
display:table-cell;
vertical-align:middle;
width:48px;
}
.imgbox img {
width:48px;
}
.prolist_text {
margin-left:20px;
float:left;
}
.prolist_text h2 {
font-size:16px;
margin-top:25px;
color:#333333;
letter-spacing:-0.36px;
}
.prolist_text p {
font-size:13px;
color:#666666;
letter-spacing:-0.3px;
}
.arrow {
display:table-cell;
vertical-align:middle;
float:right;
line-height:98px;
}
.arrow img {
width:10px;
}
.prolist_text h3 {
line-height:45px;
font-size:16px;
margin-top:25px;
color:#333333;
letter-spacing:-0.36px;
}
/* 图片导航 */
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
/*height: auto;*/
}
* {
box-sizing: border-box;
}
</style>
<script src="__JS__/jquery.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?576dbcc369c4a7692c1e7cffca3e7466";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
$(function(){
//点击按钮时判断 百度商桥代码中的“我要咨询”按钮的元素是否存在，存在的话就执行一次点击事件
$(".shangqiao").click(function(event) {
if ($('#nb_invite_ok').length > 0) {
$('#nb_invite_ok').click();
}
});
});
</script>
</head>
<body style="background-color: #fff">
<div>
<div style="margin-top: 20px;"></div>
<div class="prolist shangqiao" onclick='' href="javascript:void(0);">
<div class="imgbox">
<img src="__IMG__/icon_navigation_blue_1.png">
</div>
<div class="prolist_text">
<h2>信贷业务</h2>
<p>数据反查、佣金查询</p>
</div>
<div class="arrow">
<img src="__IMG__/icon_navigation_arrow_right.png">
</div>
</div>
</div>
<div>
<div style="margin-top: 20px;"></div>
<div class="prolist shangqiao" onclick='' href="javascript:void(0);">
<div class="imgbox">
<img src="__IMG__/icon_navigation_blue_2.png">
</div>
<div class="prolist_text">
<h2>积分业务</h2>
<p>积分兑换、积分问题</p>
</div>
<div class="arrow">
<img src="__IMG__/icon_navigation_arrow_right.png">
</div>
</div>
</div>
<div>
<div style="margin-top: 20px;"></div>
<div class="prolist shangqiao" onclick='' href="javascript:void(0);">
<div class="imgbox">
<img src="__IMG__/icon_navigation_blue_3.png">
</div>
<div class="prolist_text">
<h2>其他业务</h2>
<p>公众号、APP问题</p>
</div>
<div class="arrow">
<img src="__IMG__/icon_navigation_arrow_right.png">
</div>
</div>
</div>
</body>
</html>
image.png
