search

单页应用

如果接入的网页是单页应用，比如用 reactJs、VueJS、AngularJS 编写的网页应用程序，页面进行跳转的时候无法同步更新访客当前访问的页面以及访问轨迹，可以通过下面的方法让单页应用正常处理访客页面跳转事件。 注意：使用开放接口需要一定技术能力，请由网站技术人员参考本文代码对接实现。

hashtag
接口函数：_ZHCHAT('update')

请确保在页面底部</body>前插入「网页接入代码」再按需调用。 网页接入代码在客服工作台「客户接入渠道」里创建「网页」类型的渠道生成。

hashtag
示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>测试</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>

    <script>
      //在 reactJs、VueJS、AngularJS 中建议在组件生命周期里的组件加载完成后执行
      //为避免组件的生命周期变化导致的重复加载，可以通过全局变量来判断是否加载过接入代码
      //以 react 组件为示例
      class testComp extends Component {
        //组件第一次渲染完成后
        componentDidMount(){
          //_ZHCHAT 为全局变量，如果存在则代表已经加载过接入代码
          if(!window._ZHCHAT){
            //接入代码在客服工作台「客户接入渠道」里创建生成
            (function(d, w, c) {
              var s = d.createElement('script');
              w[c] = w[c] || function() {
                (w[c].z = w[c].z || []).push(arguments);
              };
              s.async = true;
              s.src = 'https://res.onechat.one/plug/widget.js';
              if (d.head) d.head.appendChild(s);
            })(document, window, '_ZHCHAT');
            _ZHCHAT('ini',{ channelId : 'xxxxx' });
            //以上是网页接入代码
          }
          //在页面路由切换的地方执行下面的方法，以更新聊天组件获取到用户当前访问的页面及轨迹
          if(window._ZHCHAT)_ZHCHAT('update');
        }
        render() {
          return (<div>组件内容</div>)
        }
      }
    </script>
</body>
</html>
Previous聊天窗口是否可见Next传递顾客资料（CRM对接）

Last updated