Skip to main content
Answered

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

  • September 9, 2020
  • 5 replies
  • 1929 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>

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

 

View original
Did this topic help you find an answer to your question?

5 replies

Eric Fitz
Employee
Forum|alt.badge.img+5
  • Employee
  • 1630 replies
  • 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
  • 3 replies
  • April 14, 2021

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


Forum|alt.badge.img+5
  • Expert User
  • 1152 replies
  • 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
  • 1 reply
  • 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>

 


Alex B13 wrote:

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.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings