需求描述
如果在推广落地页中使用商桥咨询工具的同学都知道,商桥自身没有自动发起对话或自动接受对话邀请的功能,而很多场景下,如果不自动发起对话,客户很可能根本不知道如何找到客服人员。
解决思路
- 找到商桥的js监听的点击咨询按钮;
- 通过js模拟用户点击咨询按钮或直接调用对应的方法;
- 处理商桥的弹出对话框的位置
(个人感觉在页面居中较好)
温馨提示:建议沟通窗口采用小窗口模式,以免弹出框被浏览器拦截;
代码实现
css
样式:
<style>
/* 将PC端的弹出窗口在屏幕居中 */
#nbWebImLightContainer.maxMessageContainer {
right: calc( 50% - 160px) !important;
bottom: calc( 50% - 232px) !important;
}
/* 将PC端的弹出窗口最小化时紧贴右下角 */
#nbWebImLightContainer.minMessageContainer {
right: 5px !important;
bottom: 0 !important;
}
</style>
js
:
<script>
var qiaoObj = "";
$(document).ready(function() {
//自动打开商桥咨询工具
setTimeout("interactiveInit()", 5000);
//页面中普通的点击按钮的class添加openChat,以便自有调起对话框
$(".openChat").click(function() {
qiaoObj.click()
})
});
//判断页面加载的是移动对话框还是PC对话框,并赋值给按钮对象。模拟第一次点击
//问答库 www.datiyi.cn
function interactiveInit() {
qiaoObj = document.querySelector(".nb-icon-groups-item")
if (!qiaoObj) {
qiaoObj = document.querySelector("#nb_icon_wrap")
}
qiaoObj.click()
}
</script>
完整代码示例
<html>
<head>
<title>商桥自动发起-wesen</title>
<!-- 请将以下商桥代码替换成自己的 -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?token";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- 请将以上商桥代码替换成自己的 -->
</head>
<body style="height:100%;width:100%">
<a class="openChat">点击咨询</a>
<style>
/* 将PC端的弹出窗口在屏幕居中 */
#nbWebImLightContainer.maxMessageContainer {
right: calc( 50% - 160px) !important;
bottom: calc( 50% - 232px) !important;
}
/* 将PC端的弹出窗口最小化时紧贴右下角 */
#nbWebImLightContainer.minMessageContainer {
right: 5px !important;
bottom: 0 !important;
}
</style>
<script>
var qiaoObj = "";
$(document).ready(function() {
//自动打开商桥咨询工具
setTimeout("interactiveInit()", 5000);
//页面中普通的点击按钮
$(".openChat").click(function() {
qiaoObj.click()
})
});
//判断页面加载的是移动对话框还是PC对话框,并赋值给按钮对象。模拟第一次点击
function interactiveInit() {
qiaoObj = document.querySelector(".nb-icon-groups-item")
if (!qiaoObj) {
qiaoObj = document.querySelector("#nb_icon_wrap")
}
qiaoObj.click()
}
</script>
</body>
</html>
注意事项
想必聪明如你,一定发现了,以上模拟第一次点击方法,依赖于PC端的.nb-icon-groups-item
或移动端的#nb_icon_wrap
元素。所以:
商桥样式设置中的咨询框一定得有,不能去掉!
但是,如果确实不想显示咨询框
,可以添加css
样式,让其不显示。
题外话
Q:
商桥每个站点对应的代码只支持设置一种设备类型(PC或移动)怎么用同一套代码解决多端问题?
其实只需要设置好默认的PC和移动样式就可以了,不妨去试试吧~