Forums/Community/Community tips & tricks

Loading the feedback tab asynchronously

Brett Cave
posted this on June 29, 2012 01:08

One thing that we always consider with 3rd party integrations on our site is performance. Where ever possible, we load external scripts asynchronously. The only implementation that doesn't work when loading async is if the remote script uses the document.write() function.

Fortunately, Zendesk's feedback widget doesn't do this, so it can be safely loaded asynchronously to improve page load times (async scripts will load in a seperate browser thread on the client, so no delays at all when using this code):

Remove

<script type="text/javascript" src="//assets.zendesk.com/external/zenbox/v2.4/zenbox.js">

 

And use:

<script type="text/javascript">
(function() {
  var zd = document.createElement('script');
  zd.type = 'text/javascript';
  zd.async = true;
  zd.src = '//assets.zendesk.com/external/zenbox/v2.4/zenbox.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(zd, s);
 })();
</script>
 

Comments

User photo
Brett Cave
jemstep

the loading mechanism is shamelessly taken from Google Analytics async loading.

June 29, 2012 01:11
User photo
Dan Farrelly

I personally use this to load the css & javascript async, then initialize Zenbox in the callback, granted you're using jQuery or Zepto or something similar.

<script type="text/javascript">
  // async load of Zendesk
    function loadZendesk() {
      var c = document.createElement('link');
     c.rel = "stylesheet";
     c.type = "text/css";
     c.href = "//asset.zendesk.com/external/zenbox/v2.4/zenbox.css";
     var h = document.getElementsByTagName('head')[0];
     h.appendChild(c);
     $.ajax({
       url: "//asset.zendesk.com/external/zenbox/v2.4/zenbox.js",
       dataType: "script",
       cache: true,
       success: function() {
         Zenbox.init({
           dropboxID: "200xxxxxx",
           url: "https://xxxxx.zendesk.com",
           tabID: "",
           tabColor: "black",
           tabPosition: "Right"
         });
       }
    })
  }
</script>

December 05, 2012 07:26
User photo
Jennifer Rowe
Zendesk

Awesome, Dan! Thanks for sharing this!

December 05, 2012 09:23