Baidu Business Bridgeは定期的に対話を自動的に開始します(モバイルサイトとPCサイトの両方をサポート)

要件の説明

プロモーションのランディングページでShangqiaoコンサルティングツールを使用する学生が、Shangqiaoにダイアログを自動的に開始したり、ダイアログへの招待を自動的に受け入れたりする機能がないことを知っている場合、多くのシナリオで、ダイアログが自動的に開始されない場合、顧客はそれを見つける方法を知らない可能性があります。顧客サービス。

ソリューション

  1. Shangqiaoのjsモニターを見つけて、相談ボタンをクリックしてください。
  2. jsでユーザーをシミュレートして、相談ボタンをクリックするか、対応するメソッドを直接呼び出します。
  3. ビジネスブリッジを処理するポップアップダイアログの場所(个人感觉在页面居中较好)

 

注意:ポップアップボックスがブラウザによってブロックされないように、通信ウィンドウは小ウィンドウモードを採用することをお勧めします。

 

コード

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要素に依存していることを発見したはずです。など:

Shangqiaoスタイル設定のコンサルテーションボックス必ず存在し、削除することはできません!


ただし、本当に表示したくない咨询框場合は、cssスタイルを追加して表示しないようにすることができます。

 

余談

Q:Commerce Bridgeの各サイトに対応するコードは、1つのデバイスタイプ(PCまたはモバイル)のみをサポートしています。同じコードを使用して複数の問題を解決するにはどうすればよいですか?
実際、デフォルトのPCとモバイルスタイルを設定するだけで十分です。

おすすめ

転載: blog.csdn.net/qq_41608099/article/details/102745288