Zendesk Widget: Control widget control import via javascript

 I am trying to save resources on the page and only import Zendesk widget when a user requests for it on the front end side using javascript.

One code snipper of an example i have tried: 

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

I have as part of the html an element like this: 

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

I have a button that triggers the method above once per page and it does not render the <script /> tag on initial render. 

Now if i trigger the render i end up with a 429 (multiple requests error). I was wondering if some one could give me some advice on how i can trigger the zendesk widget on a page dynamically rather than on page render/load.