Lazy load

[CarloSaccone]

Is it possible to lazy-load the intercom script & init event? Loading the script in the head tag has a massive impact on the page load speed and time to interactive.

[GarrettJMU]

x2 on this. Was just coming here to post a question about this.

[stianjensen]

This should be fairly straight-forward to implement. Looking at the current install example from Intercom's documentation, they actually do wait for the onload event before adding the intercom script tag to the webpage there now:
https://developers.intercom.com/installing-intercom/docs/basic-javascript

I assume wrapping the following lines in a function that is called when the onload event fires should work:

react-intercom/src/index.js

Lines 35 to 50 in 6d1bf31

	if (!window.Intercom) {
	(function(w, d, id, s, x) {
	function i() {
	i.c(arguments);
	}
	i.q = [];
	i.c = function(args) {
	i.q.push(args);
	};
	w.Intercom = i;
	s = d.createElement('script');
	s.async = 1;
	s.src = 'https://widget.intercom.io/widget/' + id;
	d.head.appendChild(s);
	})(window, document, appID);
	}

[JPWallhorn]

@nhagen Do you think this can be implemented? It really slows down the website performance :/

[GeKorm]

Is there any reason we shouldn't implement this on our side? I'm just rendering <Intercom /> after a delay/scroll trigger and it works fine. I can't think of a reason why this should be implemented by react-intercom internally. Some quick pseudocode:

class MyComponent extends Component {
  state = { intercomVisible: false };

  componentDidMount() {
    this.intercomTimeout = setTimeout(this.showIntercom, 3000);
  }

  componentWillUnmount() {
    clearTimeout(this.intercomTimeout);
  }

  showIntercom = () => {
    this.setState({ intercomVisible: true });
  };

  render() {
    return this.state.IntercomVisible && <Intercom /> 
  }
}

[JPWallhorn]

@GeKorm That doesn't really make a difference.

[GeKorm]

@JPWallhorn Have you tried it? react-intercom has no way of loading the script before the 3 seconds (or whatever trigger you set) in the example above.

[JPWallhorn]

@GeKorm Yes, I've implemented a 1 sec delay and it still drags down the performance & time for visible content.

[GeKorm]

One second is probably just not enough, I use 7-10 and a scroll trigger. Try adding just a scroll trigger and nothing else, you'll see that the <script> just isn't there on page load.

[nhagen]

I believe I've implemented this in #73 and v2.0.0-alpha.1. Closing, but if this is actually not addressed, please let me know before a full 2.0 release.

[devrnt]

@JPWallhorn @GeKorm @CarloSaccone @GarrettJMU
I'm keen to announce that I've released a React Intercom integration:
https://github.com/devrnt/react-use-intercom

Features

• Hooks
• Written in TypeScript
• Documented, self explaining methods

Motivation
I've found it not very developer friendly to integrate Intercom in a React application.

Note
I don't want to spam this issue with advertisement, that's why I'll delete this message in the near future.