动态脚本加载Zendesk小部件

Question

我一直试图通过不加载Zendesk Widget来节省页面上的资源。

如果我手动将以下标签添加到页面，则一切正常：

<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=[MyKey]> </script>

作为我页面的一部分，我总是在某个地方存在div标签：

<div id="ze-snippet"> </div>

我想拥有的是，当用户单击按钮时对<script>标签进行“动态脚本加载”。

我当前的尝试如下：

window.onload = function () {
  var zendeskWidgetOn = false;
  document.getElementById('enable-zendesk-widget').addEventListener('click', function( event ) {
    if (!zendeskWidgetOn) {
      zendeskWidgetOn=true;
      (function(d, script) {
        script = d.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.onload = function(){
          console.log('script finished loading ...');
        };
        script.src = 'https://static.zdassets.com/ekr/snippet.js?key=[my key]';
        d.getElementsByTagName('head')[0].appendChild(script);
      }(document));
    }
  }, false);
};

我不断得到的错误，我一生无法解决，该错误是：

Answer 1

要仅在单击按钮时加载小部件脚本，只需将其插入到html中即可。

<script>
  function loadZendeskWidget() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.id = 'ze-snippet';
      script.async = true;
      script.src = 'https://static.zdassets.com/ekr/snippet.js?key=<key>';
      document.getElementsByTagName('head')[0].appendChild(script);
  };
</script>

只需用您自己的小部件密钥替换“密钥”即可。

希望这会有所帮助。