Baidu Business Bridge automatically initiates a dialogue at regular intervals (supports both mobile and PC sites)

Description of Requirement

If the students who use the Shangqiao consulting tool in the promotion landing page know that Shangqiao itself does not automatically initiate a dialogue or automatically accept the dialogue invitation function, and in many scenarios, if the dialogue is not automatically initiated, the customer may not know how to find it. Customer service.

Solutions

Find the js monitor of Shangqiao and click the consultation button;
Simulate the user by js to click the consultation button or directly call the corresponding method;
The location of the pop-up dialog that handles the business bridge(个人感觉在页面居中较好)

Reminder: It is recommended that the communication window adopts a small window mode to prevent the pop-up box from being blocked by the browser;

Code

`css`style:

<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>

Complete code example

<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>

Precautions

Presumably as smart as you, you must have discovered that the above method of simulating the first click depends on the PC .nb-icon-groups-itemor mobile #nb_icon_wrapelements. and so:

The consultation box in the Shangqiao style setting must be present, and cannot be removed!

However, if you really don’t want to display it 咨询框, you can add a cssstyle to make it not displayed.

Digression

Q:The code corresponding to each site of Commerce Bridge only supports one device type (PC or mobile). How to use the same code to solve multiple problems?
In fact, you only need to set the default PC and mobile styles, you might as well try it~