nuxt3+ts：集成百度-爱番番客服

布满荆棘的人生 2024-02-23 01:39 14阅读 0赞

#### 一、本文目标 ####

nuxt3 + ts 集成百度爱番番（客服）

[百度爱番番—企业的一站式智能营销管家][Link 1]

#### 二、百度爱番番客服能力 ####

![3e436b4c31534ca6bf3ff078322071ad.png][]

#### 三、爱番番后台基础配置 ####

#### 3.1、设置中心 ####

登录后点右上角设置中心

![95bd2707b2d84a3780fada3f823fb86d.png][]

#### 3.2、沟通与触达 -- > 站点设置 -- > 新建站点 ####

![4ddeca50bda049a9a5e65162db775e39.png][]

填写信息

![ca46e3be560445c8b9ddf9bafd2f5ebe.png][]

#### 3.3、获取代码 ####

![32deba5da9dd4b7096ab23d29015442f.png][]

![9bea0a47658b484a80fdc05e9f355a6e.png][]

有了这段代码就可以集成到项目里边了

#### 四、代码集成 ####

#### 4.1、方式一 ####

public/js/baidu.js

![892f657445f9436eacfb8986935fe3f2.png][]

baidu.js

var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?7xxxxxxxxxxxxxxxxxxxxxxxxxx8";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();

nuxt.config.ts

app: {
        head: {
            script: [
                {
                    {
                        type: 'text/javascript',
                        src: '/js/baidu.js'
                    },
                }
            ]
        }
    }

#### 4.2、方式二（推荐） ####

app.vue 使用 useHead 方法

useHead({
      script: [
        {
          src: 'https://hm.baidu.com/hm.js?7cxxxxxxxxxxxx8'
        }
      ]
    })

![1ccfad8000934c628df39c55a78ca016.png][]

![dec46431410248fabe72e03222f41a0d.png][]

![218f57d3c57847d1bde7dac871e61744.png][]

集成成功，测试成功。

#### 五、去掉弹窗的“在线咨询” ####

#### 5.1、目标--去掉在线咨询 ####

![1ccfad8000934c628df39c55a78ca016.png][]

在电脑下载的客户端--点设置按钮--样式设置-PC样式-邀请框右上的关闭哈

#### 5.2、下载客户端 ####

![b80b5f875f1f4fa3ababe7e4bfe909a3.png][]

#### 5.3、设置--样式设置--编辑 ####

![d05ce2c08a94415e87318ba93217aad9.png][]

#### 5.4、邀请框--自动邀请--关闭 ####

![d1781448a695469c928200de777aaa22.png][]

测试成功，，咨询过客服，只能下载软件后设置，在pc端不可以。

#### 六、点击页面dom元素，唤起客服 ####

咨询了客服，没有对应的配置，那我们调一下爱番番默认样式，设置为透明，定位到指定位置即可

// 爱番番在线咨询样式定位
    @media screen and (min-width: 987px) {
      #newBridge {
        .nb-icon-base{
          top: 340PX!important;
          height: 100PX!important;
          background: transparent!important;
          .nb-icon-inner-wrap{
            background: transparent!important;
          }
        }
      }
    }
    
    // 爱番番在线咨询样式定位
    @media screen and (max-width: 987px) {
        #newBridge {
          .nb-icon-wrap{
            left: 0!important;
            bottom: -33PX!important;
            top: unset!important;
            background: transparent!important;
            width: calc(50% - 30px)!important;
          }
          .nb-icon-wrap-base{
            background: transparent;
            display: none;
          }
        }
    }

#### 七、过程记录 ####

百度-爱番番 与 百度-统计

百度-爱番番 与 百度统计 的集成是一致的，如果之前集成过百度统计，那么百度爱番番会自动集成，重启项目后自动出现百度爱番番客服。

[https://www.cnblogs.com/hity-tt/p/7699756.html][https_www.cnblogs.com_hity-tt_p_7699756.html]

#### 八、欢迎交流指正 ####

#### 九、参考链接 ####

[百度爱番番—企业的一站式智能营销管家][Link 1]

[Link 1]: https://aifanfan.baidu.com/
[3e436b4c31534ca6bf3ff078322071ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/4c16ecc8a3f449a98c4f2207ec84713f.png
[95bd2707b2d84a3780fada3f823fb86d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/4c32a55522e34f9ca707f5e8530a0654.png
[4ddeca50bda049a9a5e65162db775e39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/93a0d74541aa4d428ea299cd74d66aff.png
[ca46e3be560445c8b9ddf9bafd2f5ebe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/8837bb4cdf534bf7916066d261cb4d1e.png
[32deba5da9dd4b7096ab23d29015442f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/4c16da16668a4c3fb777bce3fa36c364.png
[9bea0a47658b484a80fdc05e9f355a6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/7b7d52af245c469b9562ae2e9c8ed6a2.png
[892f657445f9436eacfb8986935fe3f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/b837533583bd4bfeb8d16416a418d445.png
[1ccfad8000934c628df39c55a78ca016.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/32081e80bd8c4f68a772f177df942fda.png
[dec46431410248fabe72e03222f41a0d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/f6e8e146040a42dfb11413ec30fef254.png
[218f57d3c57847d1bde7dac871e61744.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/cbcc1eab80bf435fa93b473403bc7639.png
[b80b5f875f1f4fa3ababe7e4bfe909a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/fd7c7c08b9a04f92bc9a5bcd51028769.png
[d05ce2c08a94415e87318ba93217aad9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/26fd011eeb76417989b9d6f6bbd89492.png
[d1781448a695469c928200de777aaa22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/f6c173a761094452b71fadd2cedc8a63.png
[https_www.cnblogs.com_hity-tt_p_7699756.html]: https://www.cnblogs.com/hity-tt/p/7699756.html