Can I delay loading Intercom on my site to reduce the JS load? | Community
Skip to main content
Answered

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

  • September 9, 2020
  • 5 replies
  • 2168 views

Forum|alt.badge.img

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?

Best answer by Roy

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>

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

 

5 replies

Eric Fitz
Employee
Forum|alt.badge.img+5
  • Employee
  • September 9, 2020

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.


  • New Participant
  • April 14, 2021

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


Roy
Top Expert ✨
Forum|alt.badge.img+5
  • Top Expert ✨
  • Answer
  • April 14, 2021

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>

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

 


  • New Participant
  • May 25, 2021

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>

 


  • New Participant
  • July 17, 2023

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.