纷享在线客服对接

概述

纷享在线客服对接的操作说明。

开始之前

[!IMPORTANT]
使用有权访问本功能的账号。按下方步骤准备对应的业务数据或配置资料。

操作说明

对接纷享在线客服，访客发起咨询，可自动附带线索来源信息（例如广告投放 UTM 参数），打通官网访客和线索身份，可无缝请按照以下步骤配置对接纷享在线客服。

进行纷享在线客服前，请先在官网埋码官网 SDK，查看绑定企业官网教程。

接入纷享客服插件

1 网页渠道接入

点击查看接入流程，需注意嵌入的代码需追加参数，用于打通官网访客和纷享在线客服产生的线索身份，代码示例如下：

普通接入，按钮样式通过在线客服后台配置

<script type="text/javascript" charset="utf-8">
  // 纷享IM客服配置参数
  var imChatConfig = {
      webImId: '我是webImId', // 必填：纷享IM在线客服ID
      name: '我是客服按钮文字', // 可选：客服按钮文字
      icon: '我是客服按钮图标URL', // 可选：客服按钮图标URL
      theme: '#0067ED' // 可选：主题颜色
  };

  // 检查fsImchat是否加载完成
  function checkImChatReady() {
      return new Promise(function(resolve, reject) {
          var attempts = 0;
          var maxAttempts = 20; // 最多尝试20次

          var checkInterval = setInterval(function() {
              attempts++;

              if (window.FSImChat) {
                  clearInterval(checkInterval);
                  resolve();
                  return;
              }

              // 如果超过最大尝试次数，退出
              if (attempts >= maxAttempts) {
                  clearInterval(checkInterval);
                  reject(new Error('FSImChat not ready after timeout'));
                  return;
              }
          }, 500); // 每500ms检查一次
      });
  }

  // 更新对象字段
  function updateVisitorData() {
      try {
          var config = FsYxt.getConfig();
          var visitor = {
              visitor_id: config.visitorId
          };
          FSImChat.updateRelateObjData({
              objList: [
                  {
                      apiName: 'CustomerServiceSessionObj', // 会话列表
                      objectData: {
                          visitor_id: visitor.visitor_id // 来源字段值称
                      }
                  },
                  {
                      apiName: 'WebImVisitorObj', // 访客用户
                      objectData: {
                          marketing_visitor_id: visitor.visitor_id // 字段值
                      }
                  }
              ]
          });
      } catch (error) {
      }
  }

  // 注册营销通访客id到全局参数
  function registerMarketingId() {
      var config = FsYxt.getConfig();
      var serviceSessionParams = JSON.stringify({
          visitor_id: config.visitorId
      });

      window.FSImChatParams = {
          serviceSessionParams: serviceSessionParams
      };
  }

  // 加载fsImchat
  function loadImChat() {
      var config = FsYxt.getConfig();
      var serviceSessionParams = JSON.stringify({
          visitor_id: config.visitorId
      });

      // 构建IM客服URL
      var imChatUrl = 'https://www.fxiaoke.com/open/imchat/static/creat.js' +
          '?webImId=' + encodeURIComponent(imChatConfig.webImId) +
          '&name=' + encodeURIComponent(imChatConfig.name) +
          '&icon=' + encodeURIComponent(imChatConfig.icon) +
          '&theme=' + encodeURIComponent(imChatConfig.theme) +
          '&internalAppType=' +
          '&customParams=' +
          '&updateParams=' +
          '&serviceSessionParams=' + encodeURIComponent(serviceSessionParams);

      var serviceCode = document.createElement("script");
      serviceCode.onload = function () {
          registerMarketingId();
          checkImChatReady().then(function() {
              updateVisitorData();
          }).catch(function(error) {
              console.warn('FSImChat not ready:', error.message);
          });
      };
      serviceCode.id = "fs-im-script";
      serviceCode.type = "text/javascript";
      serviceCode.src = imChatUrl;
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(serviceCode, s);
  }

  var script = document.createElement('script')
  script.type = "text/javascript";
  script.charset = "utf-8";
  script.src = "https://www.fxiaoke.com/ec/kemai/release/static/marketing-website-access.js?id=" + Math.random();

  script.onload = function () {
      FsYxt.configure({
          ea: "我是企业ea",     // 企业ea(必填)
          websiteId: "我是网站ID", // 网站ID(必填)
          host: "www.fxiaoke.com",        // API HOST地址(必填)
          enableSpaTracking: false      // 是否启用SPA单页应用埋点(可选)
      });
      loadImChat();
  }
  document.head.appendChild(script)
</script>

接入自定义按钮，自定义按钮需要添加 css class 类名 ‘fs-im-wrapper’，如：<button class="fs-im-wrapper">我是自定义按钮</button>

<script type="text/javascript" charset="utf-8">
  // 纷享IM客服配置参数
  var imChatConfig = {
      webImId: '我是webImId', // 必填：纷享IM在线客服ID
      name: '我是客服按钮文字', // 可选：客服按钮文字
      icon: '我是客服按钮图标URL', // 可选：客服按钮图标URL
      theme: '#0067ED' // 可选：主题颜色
  };

  // 检查fsImchat是否加载完成
  function checkImChatReady() {
      return new Promise(function(resolve, reject) {
          var attempts = 0;
          var maxAttempts = 20; // 最多尝试20次

          var checkInterval = setInterval(function() {
              attempts++;

              if (window.FSImChat) {
                  clearInterval(checkInterval);
                  resolve();
                  return;
              }

              // 如果超过最大尝试次数，退出
              if (attempts >= maxAttempts) {
                  clearInterval(checkInterval);
                  reject(new Error('FSImChat not ready after timeout'));
                  return;
              }
          }, 500); // 每500ms检查一次
      });
  }

  // 更新对象字段
  function updateVisitorData() {
      try {
          var config = FsYxt.getConfig();
          var visitor = {
              visitor_id: config.visitorId
          };
          FSImChat.updateRelateObjData({
              objList: [
                  {
                      apiName: 'CustomerServiceSessionObj', // 会话列表
                      objectData: {
                          visitor_id: visitor.visitor_id // 来源字段值称
                      }
                  },
                  {
                      apiName: 'WebImVisitorObj', // 访客用户
                      objectData: {
                          marketing_visitor_id: visitor.visitor_id // 字段值
                      }
                  }
              ]
          });
      } catch (error) {
      }
  }

  // 注册营销通访客id到全局参数
  function registerMarketingId() {
      var config = FsYxt.getConfig();
      var serviceSessionParams = JSON.stringify({
          visitor_id: config.visitorId
      });

      window.FSImChatParams = {
          serviceSessionParams: serviceSessionParams
      };
  }

  function onloadOnlineIm() {
      var loadOnlineImTimer = setInterval(function() {
          if (window.otherFsChat && typeof window.otherFsChat.callImChat == 'function') {
              window.otherFsChat.callImChat();
              clearInterval(loadOnlineImTimer)
          }
      }, 1000);
  }

  // 加载fsImchat
  function loadImChat() {
      var config = FsYxt.getConfig();
      var serviceSessionParams = JSON.stringify({
          visitor_id: config.visitorId
      });

      // 构建IM客服URL
      var imChatUrl = 'https://www.fxiaoke.com/open/imchat/static/creat.js' +
          '?webImId=' + encodeURIComponent(imChatConfig.webImId) +
          '&userMemcpy=true' +
          '&name=' + encodeURIComponent(imChatConfig.name) +
          '&icon=' + encodeURIComponent(imChatConfig.icon) +
          '&theme=' + encodeURIComponent(imChatConfig.theme) +
          '&internalAppType=' +
          '&customParams=' +
          '&updateParams=' +
          '&serviceSessionParams=' + encodeURIComponent(serviceSessionParams);

      var serviceCode = document.createElement("script");
      serviceCode.onload = function () {
          onloadOnlineIm()
          registerMarketingId();
          checkImChatReady().then(function() {
              updateVisitorData();
          }).catch(function(error) {
              console.warn('FSImChat not ready:', error.message);
          });
      };
      serviceCode.id = "fs-im-script";
      serviceCode.type = "text/javascript";
      serviceCode.src = imChatUrl;
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(serviceCode, s);
      window.FSImChatParams = {
          serviceSessionParams: window.FsYxt.getServicePostParams()
      }
  }

  var script = document.createElement('script')
  script.type = "text/javascript";
  script.charset = "utf-8";
  script.src = "https://www.fxiaoke.com/ec/kemai/release/static/marketing-website-access.js?id=" + Math.random();

  script.onload = function () {
      FsYxt.configure({
          ea: "我是企业ea",     // 企业ea(必填)
          websiteId: "我是网站ID", // 网站ID(必填)
          host: "www.fxiaoke.com",        // API HOST地址(必填)
          enableSpaTracking: false      // 是否启用SPA单页应用埋点(可选)
      });
      loadImChat();
  }
  document.head.appendChild(script)
</script>

注意，上述代码需替换 webImId 等变量，并且上述代码已包含官网 sdk 接入代码，如之前已经接入官网 sdk，请自行移除，不要重复接入

webImId 可在客服插件处获取

2 微信渠道接入

预期结果与验证

完成上述操作后，在对应页面检查处理结果，并与本步骤的目标核对。

常见问题与故障排除

无法继续操作时，先核对上文说明的条件和输入信息；遇到权限提示时，请管理员确认访问权限。