动态脚本加载 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>

只需将“key”替换为您自己的小部件键即可。

希望这会有所帮助。