如何加载百度商桥代码？

要将百度商桥代码正确加载到网站中,需结合网站类型（如PC端、移动端、不同开发框架）选择合适的方法，并确保代码位置、配置及后续维护符合规范，以下是具体操作步骤、注意事项及不同场景下的适配方案，帮助顺利完成代码加载并实现客服功能。

（图片来源网络，侵删）

准备工作：获取百度商桥代码

在加载代码前,需先登录百度商桥后台获取专属代码，具体步骤如下：

登录百度商桥官网（https://shangqiao.baidu.com/），使用百度账号进入管理后台。
在左侧导航栏找到“代码管理”或“安装代码”选项，进入代码获取页面。
根据网站类型选择“PC端代码”或“移动端代码”，若需自适应PC+移动端，可选择“自适应代码”。
复制生成的代码片段（通常为一段JavaScript代码，包含商桥ID及初始化配置）。

加载代码的通用方法（以HTML网站为例）

对于普通HTML静态网站或未使用复杂框架的网站,可通过直接修改HTML文件加载商桥代码，核心是将代码插入到<body>标签内的合适位置（建议在页面底部，避免影响页面加载性能）。

操作步骤：

打开网站HTML文件：使用文本编辑器（如VS Code、Sublime Text）或网站管理后台的编辑器，打开需要加载商桥的HTML文件（通常是index.html或其他公共页面）。

定位代码插入位置：在<body>标签结束前（即</body>前），粘贴复制的百度商桥代码。

示例代码：

<body>
  <!-- 页面其他内容 -->
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      }
      else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>
  <!-- 百度商桥代码 -->
  <script>
    (function(){
      var w=window,d=document,s=d.createElement('script');
      w.__bd_ccid=w.__bd_ccid||[];
      s.src='https://pos.baidu.com/cc.js?ccid='+w.__bd_ccid.join('&ccid=');
      s.charset='utf-8';
      s.async=true;
      var h=d.getElementsByTagName('script')[0];
      h.parentNode.insertBefore(s,h);
    })();
  </script>
</body>

保存文件并上传：保存修改后的HTML文件，若使用FTP或网站后台管理工具，需将文件上传到服务器对应目录。
验证加载效果：重新打开网站，检查页面右下角是否出现商桥客服图标；或通过浏览器开发者工具（F12）在“Network”标签页中查看是否成功加载商桥相关JS文件（如cc.js）。

不同场景下的代码加载适配方案

移动端网站加载商桥代码

移动端网站（如响应式设计、独立移动域名）需使用百度商桥移动端专用代码，或通过以下方式适配：

方法一：直接使用移动端代码（与PC端代码获取方式一致，选择“移动端”类型），插入位置与PC端相同（</body>前）。

方法二：通过设备判断动态加载（若同一套代码适配PC+移动端），在商桥代码外层添加设备判断逻辑：

<script>
  function isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  }
  if (isMobile()) {
    // 移动端商桥代码
    (function(){
      var w=window,d=document,s=d.createElement('script');
      w.__bd_ccid=w.__bd_ccid||[];
      s.src='https://pos.baidu.com/ccm.js?ccid='+w.__bd_ccid.join('&ccid='); // 移动端JS文件路径可能不同，以后台为准
      s.charset='utf-8';
      s.async=true;
      var h=d.getElementsByTagName('script')[0];
      h.parentNode.insertBefore(s,h);
    })();
  } else {
    // PC端商桥代码
    (function(){
      var w=window,d=document,s=d.createElement('script');
      w.__bd_ccid=w.__bd_ccid||[];
      s.src='https://pos.baidu.com/cc.js?ccid='+w.__bd_ccid.join('&ccid=');
      s.charset='utf-8';
      s.async=true;
      var h=d.getElementsByTagName('script')[0];
      h.parentNode.insertBefore(s,h);
    })();
  }
</script>

内容管理系统（CMS）加载商桥代码

对于WordPress、Drupal、织梦CMS等系统，可通过插件或主题模板文件加载代码：

（图片来源网络，侵删）

WordPress：
- 方法一（推荐）：安装“Header and Footer”插件，在插件后台的“Footer”中粘贴商桥代码，保存后所有页面将自动加载。
- 方法二：通过主题的footer.php文件，在</body>前插入代码（需修改主题文件，建议使用子主题避免更新后丢失）。
织梦CMS：登录后台，在“模板”-“默认模板管理”中修改index.htm或footer.htm，在</body>前粘贴代码。

JavaScript框架（如Vue、React）加载商桥代码

在单页应用（SPA）中，需确保商桥代码在页面渲染完成后加载，并在路由切换时保持客服功能可用，以Vue为例：

方法：在public/index.html的</body>前插入基础代码，或通过Vue的生命周期钩子动态加载：
```
// 在App.vue的mounted钩子中
mounted() {
  const script = document.createElement('script');
  script.src = 'https://pos.baidu.com/cc.js?ccid=你的商桥ID';
  script.async = true;
  document.body.appendChild(script);
}
```
注意：若使用路由懒加载，需在切换路由时重新初始化商桥（可通过监听$route变化实现）。

代码加载常见问题及注意事项

代码位置错误：避免将商桥代码插入<head>标签内，可能导致页面加载阻塞或功能异常。
重复加载：同一页面不要多次插入商桥代码，否则可能造成资源浪费或客服图标重复显示。
缓存问题：代码修改后，若未生效，需清除浏览器缓存或使用Ctrl+F5强制刷新页面；若使用CDN，需同步清除CDN缓存。
HTTPS兼容：确保网站协议与商桥代码的JS资源协议一致（如网站为HTTPS，商桥JS链接也需为https://）。
权限限制：部分服务器或CMS系统可能限制脚本执行，需检查文件权限或安全设置。

不同场景加载方式对比表

场景类型	推荐加载方式	注意事项
静态HTML网站	直接在`</body>`前粘贴商桥代码	避免代码重复，确保文件上传至服务器正确目录
移动端网站	使用移动端专用代码，或通过设备判断动态加载	注意移动端JS文件路径可能不同，需以商桥后台为准
WordPress	通过“Header and Footer”插件插入Footer，或修改主题`footer.php`文件	使用子主题修改文件，避免主题更新后代码丢失
Vue/React等SPA	在`public/index.html`中插入，或通过组件生命周期钩子动态加载	需处理路由切换时的代码初始化，避免重复加载
企业CMS（如织梦）	修改模板文件`footer.htm`，在`</body>`前插入代码	备份原模板文件，避免修改后导致页面样式异常

如何加载百度商桥代码？

准备工作：获取百度商桥代码