动态脚本加载 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> 标记执行 "dynamic script load"。

我目前的尝试是这样的：

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" 替换为您自己的小部件密钥即可。

希望对您有所帮助。

动态脚本加载 Zendesk 小部件

Dynamically Script Loading Zendesk Widget

javascript

dynamic-script-loading

zendesk