How To | Implement Intercom with React JS 0.14

gistfile1.txt

Disclaimer : I was using Webpack with React/Flux, this is just an implementation that I got to work.  Many other ways you could do this.
  -Reference Intercom for more information on implementation: https://docs.intercom.io/install-on-your-web-product/integrating-intercom-in-one-page-app
  
  Step 1) create 2 files in your apps root, chat.js and intercom.js.
  Step 2) In chat.js paste in the JS library file given to you in the docs, but replace {app_id} with your actually app_id:
  
    (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;
    s.src='https://widget.intercom.io/widget/{app_id}';
    var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()

  Step 3) In intercom.js include the code for window.Intercom from the docs inside of an immediately  invoked function:
  
    (function() {

    if (typeof document === 'undefined')
      return
      
    window.Intercom('boot', {
       app_id: 'your_app_id',
       email: '[email protected]',
       user_id: 'abc123',
       created_at: 1234567890
    })

})();

Step 4) WEBPACKK SPECIFIC: in entry.js I included Intercom like so:

  if (typeof document !== 'undefined') {
  const Intercom = require('./chat.js');
  }
  
  
Step 5) Whichever components you want intercom to be available:

  componentWillMount() {
    require('../../intercom.js');
  }
  
Step 6) Apply any logic or event handlers to the intercom icon or functionality using the Intercom API docs found here:
  https://docs.intercom.io/install-on-your-web-product/intercom-javascript-api

  

the intercom javascript SDK is over 1.2MB , wouldn't this slow your app load time.

Looks like someone wrote an npm package which seems to work pretty well https://www.npmjs.com/package/react-intercom