百度商桥定时自动发起对话(同时支持移动和PC站点)

需求描述

如果在推广落地页中使用商桥咨询工具的同学都知道，商桥自身没有自动发起对话或自动接受对话邀请的功能，而很多场景下，如果不自动发起对话，客户很可能根本不知道如何找到客服人员。

解决思路

找到商桥的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和移动样式就可以了，不妨去试试吧~