Intercom + EmberJS: A Match Made in Heaven

February 03, 2015

With the release of Candidio 3.0 in early January, we wanted to make a change away from Zendesk as our helpdesk software. I've had my eye on Intercom for a quite a few months now. Not only is Intercom a robust customer service application, but they seem to be great people who know what they're taking about, not only on the customer service side of the business, but with product management and developing great software. Lastly, the Intercom web app is built with EmberJS, so that can't hurt.

Setting up Intercom in EmberJS

We took a fairly simple course of action to intergrate the Intercom tools into our ember-cli application.

Include the JS snippet

In app/index.html add the Intercom JS library snippet (don't forget to update the APP_ID in this snippet):

<script>(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/<INSERT APP_ID HERE>';
var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()</script>

We've also added Intercom to our global variables list in .jshintrc so we can call that variable anywhere in the app.

Initialize Intercom

Intercom provides a method to boot up the service and give them context, which you could add a number of places. We had it in an initializer previously, but currently we include it in an observer on the application controller, which watches the current user object. In our circumstance, this isn't an issue, because we never change the authenticated user. The boot method tells Intercom details about the current user, which is ultimately what you're using Intercom for in the first place.

Intercom('boot', {
  app_id: app_id,
  user_id: user_id,
  user_hash: hashed_user_id, // This is for secure Intercom connections
  name: user_full_name,
  email: user_email,
  created_at: create_at_in_utc
});

At minimum, you must send the user_id and email for Intercom to function. The documentation on setting up Intercom in a single-page app has more details.

Notify Intercom of route changes

Every time a user navigates to a new page, we want to notify Intercom. We can easily do this by reopening the router class in router.js.

Router.reopen({
  notifyIntercom: function () {
    Intercom('update');
  }.on('didTransition')
});

Other Useful Intercom Methods

Tracking events and providing context
Javascript API
We use the JS API to implement our own button to open the chat panel. The chat bubble overlay they provide by default interferes with our user interface. In route/application.js, we've added the following action, which can be trigger from anywhere in the app.

// route/application.js
actions: {
    openIntercomWidget: function () {
      Intercom('show');
    },
    ...
}

// Usage in a template
<button {{action 'openIntercomWidget'}}>...</button>

Feel free to response in the comments below, or hit me up on Twitter at @ToddSmithSalter with any.