Динамически загружаемый скрипт Zendesk Widget - PullRequest
Новая
       23

Динамически загружаемый скрипт Zendesk Widget

0 голосов
/ 05 октября 2018

Я пытался сэкономить ресурсы на странице, не загружая 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);
};

Ошибка, которую я продолжаю получать и не могу на всю жизнь понять, как ее обойти: enter image description here

1 Ответ

0 голосов
/ 08 октября 2018

Чтобы скрипт скрипта виджета загружался только после нажатия кнопки, вам просто нужно вставить его в ваш 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>

Просто замените «ключ» вашим собственным ключом виджета.

Надеюсь, это поможет.

...