动态脚本加载 Zendesk 小部件

Question

除非需要，我一直试图通过不加载 Zendesk 小部件来节省页面上的资源。

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

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

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

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

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

我目前的尝试是这样的：

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

我不断收到的错误是我一生都无法弄清楚如何解决它：

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>

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

希望这可以帮助。