Loading the feedback tab asynchronously

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):


<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);


  • 0

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

  • 0

    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];
           url: "//asset.zendesk.com/external/zenbox/v2.4/zenbox.js",
           dataType: "script",
           cache: true,
           success: function() {
               dropboxID: "200xxxxxx",
               url: "https://xxxxx.zendesk.com",
               tabID: "",
               tabColor: "black",
               tabPosition: "Right"

  • 0

    Awesome, Dan! Thanks for sharing this!

Please sign in to leave a comment.