Answered

Can I delay loading Intercom on my site to reduce the JS load?

  • 9 September 2020
  • 5 replies
  • 1456 views

Userlevel 2
Badge

Can I delay loading Intercom on my site to reduce the JS load? i.e. only load it after a page is fully loaded for a visitor?

icon

Best answer by Roy 14 April 2021, 17:52

View original

5 replies

Userlevel 1

You can modify the Intercom load function by splitting it out like this, and it runs inside a setTimeout function

 

      // Intercom

      window.intercomSettings = {

        app_id: "<YOUR WIDGET ID>"

      };

     var w = window;

    var ic = w.Intercom;

    if (typeof ic === "function") {

        ic('reattach_activator');

        ic('update', w.intercomSettings);

    } else {

        var d = document;

        var i = function() {

            i.c(arguments);

        };

        i.q = [];

        i.c = function(args) {

            i.q.push(args);

        };

        w.Intercom = i;

        var l = function() {

            var s = d.createElement('script');

            s.type = 'text/javascript';

            s.async = true;

            s.src = 'https://widget.intercom.io/widget/lt;YOUR WIDGET ID>';

            var x = d.getElementsByTagName('script')[0];

            x.parentNode.insertBefore(s, x);

        };

        l();

    }

 

The difference is that the part that runs l() normally is onLoad and that gets stuffed up after the setTimeout.

 

You can also strip out the l() function entirely if you like (and just have the variables declared etc) and just run it, as it’ll be wrapped in a setTimeout function.

But I don't see any use of setTimeout in the code?

Badge

Hello @alex b13​ , Can you try this one?

 

======================================================

<script>

 window.intercomSettings = {

  app_id: "APPID" // Replace this with your workspace ID

  

 };

</script>

 

<script>

(function () {

  var w = window;

  var ic = w.Intercom;

  if (typeof ic === "function") {

    ic('reattach_activator');

    ic('update', w.intercomSettings);

  } else {

    var d = document;

    var i = function () {

      i.c(arguments);

    };

    i.q = [];

    i.c = function (args) {

      i.q.push(args);

    };

    w.Intercom = i;

    var l = function () {

      setTimeout(function () {

        var s = d.createElement('script');

        s.type = 'text/javascript';

        s.async = true;

        s.src = 'https://widget.intercom.io/widget/b>APPID';

        var x = d.getElementsByTagName('script')[0];

        x.parentNode.insertBefore(s, x);

      }, 5000);

    };

    if (w.attachEvent) {

      w.attachEvent('onload', l);

    } else {

      w.addEventListener('load', l, false);

    }

  }

})();

</script>

======================================================

 

Thank you Roy! I'm trying to get this working with tagmanager. I can see it firing (on window load) but no sign of Intercom appearing. No console errors either. Any suggestions for me?

 

<script>
window.intercomSettings = {
app_id: "<ID>"
};

(function () {
 
var w = window;
 
var ic = w.Intercom;
 
if (typeof ic === "function") {
 
ic('reattach_activator');
 
ic('update', w.intercomSettings);
 
} else {
 
var d = document;
 
var i = function () {
 
i.c(arguments);
 
};
 
i.q = [];
 
i.c = function (args) {
 
i.q.push(args);
 
};
 
w.Intercom = i;
 
var l = function () {
 
setTimeout(function () {
 
var s = d.createElement('script');
 
s.type = 'text/javascript';
 
s.async = true;
 
s.src = 'https://widget.intercom.io/widget/lt;ID>';
 
var x = d.getElementsByTagName('script')[0];
 
x.parentNode.insertBefore(s, x);
 
}, 5000);
 
};
 
if (w.attachEvent) {
 
w.attachEvent('onload', l);
 
} else {
 
w.addEventListener('load', l, false);
 
}
 
}
 
})();
</script>

 

But I don't see any use of setTimeout in the code?

A complete working example would be awesome

 

Also, Intercom ought to distribute the code using setTimeout by default. Google is punishing us despite brilliant page load speed because the Intercom bubble takes more than four seconds to appear.

Reply