zopim callback is never called

Question

Following the instruction of the this documentation, I end up with the following code:

window.zEmbed || (function (d, s) {
          var z = $zopim = function (c) { z._.push(c) },
              $ = z.s =
          d.createElement(s), e = d.getElementsByTagName(s)[0]; z.set = function (o) {
              z.set.
              _.push(o)
          }; z._ = []; z.set._ = []; $.async = !0; $.setAttribute("charset", "utf-8");
          $.onload = (event) => {
              console.log("chat script has loaded");
          };
          $.src = "//v2.zopim.com/?@zopimClientID"; z.t = +new Date; $.
              type = "text/javascript"; e.parentNode.insertBefore($, e);   
      })(document, "script");

      var onChatStart = function () {
          $zopim.livechat.window.show();
          window['onChatStart'] && window['onChatStart']();
      };

      $zopim(function () {
          $zopim.livechat.clearAll();
          (......)
      });

The problem is that the $zopim(funtion() {..}) callback function is never called, but the script is successfully loaded. I know based on the console.log made by:

$.onload = (event) => {
     console.log("chat script has loaded");
};

Any one knows why this is happening? Thank you

Answer 1

The problem is you're running the $zopim script before it's fully loaded. Once all the parts of the $zopim object have loaded it will stop looping and run your script.

var zopimConfig = function() {
    $zopim(function() {
        $zopim.livechat.clearAll();
        (......)
    });
};

var waitForZopim = setInterval(function () {
    if (
        window.$zopim === undefined ||
        window.$zopim.livechat === undefined ||
        window.$zopim.livechat.departments === undefined
    ) {
        return;
    }
    zopimConfig();
    clearInterval(waitForZopim);
}, 100);

Waiting for window.$zopim.livechat.departments is optional, however if you're doing anything around departments I would recommend keeping this