Integrating intercom.io into a meteor app.

I was struggling to find comprehensive documentation on integrating intercom.io into a meteor app so here is a guide which hopefully lays everything out very clearly. This should get you up and running quickly.

The process is as follows:

  1. Set up an Intercom.io account
  2. Install the verso:intercom package
  3. Put the intercom id/secret/key into your settings.json
  4. Ensure username/email of logged in users are being sent to intercom (for products other than Acquire)

1.This is fairly straightforward. You will need to have a credit card handy even to sign up for the free trial. ‘Acquire’ is the product that let’s you talk to visitors (i.e. logged-out/anonymous) to your site and this is a good place to start. If you’re gonna cancel, put a reminder in your calendar 13 days out!

Note that you can customise the color of the intercom icon to match your site.

2.In the command line (CLI) navigate to your meteor project directory and install the package:

meteor add verso:intercom

This package is written/maintained by Tom Coleman and works a treat.

3.If your app doesn’t already have a settings.json file in the root of your project, create one now. It is the file where you store settings for Intercom, stripe, galaxy, compose.io etc and having one means that you now need to deploy your app using
meteor — settings settings.json instead of plain old meteor

First, let's get the necessary information by logging into intercom.io. In the bottom left corner, hover over your avatar and navigate to App Settings.

Again, towards the bottom left go to API Keys — Take note of your APP ID and get a Full Access API Key.

Again, towards the bottom left go to Secure Mode — Take note of your Secret Key.

Your settings.json should look as follows (assuming you don't have settings for other services here):

{
     “public”: {
          “intercom”: {
               “id”: “your-app-id”,
               “allowAnonymous”: true
          }
     },
     “intercom”:{
          “secret”: “your-secret-here”,
          “apikey”: “your-API-key-here”
     }
}

The allowAnonymous setting is set to true so that you can communicate with visitors (i.e. not logged-in) to your site.

At this stage you should have an intercom message icon in the bottom right hand side of every screen and you should be able to see yourself (userId only) in your intercom.io dashboard (click the people icon on the left navbar). Go ahead, have a little chat with yourself to see it working!

4.We now want to see the name and email of logged in users (if you are using Engage/Learn/Support products). In a client-side javascript file (I used client/lib/main.js) put the following snippet that reads the username and email of the current user.

IntercomSettings.userInfo = function(user, info) {  
     info.email = Meteor.user().emails[0].address;
     info[‘name’] = Meteor.user().username;
};

This is assuming that you are using username and password registration for your app. If not you can leave out one or other.

If you are using a service such as google for login, you can use the following:

IntercomSettings.userInfo = function(user, info) {  
    if (user.services.google) {
      info.email = user.services.google.email;
      info[‘name’] = user.services.google.given_name + ‘ ‘ + user.services.google.family_name;
    }else{
      info.email = Meteor.user().emails[0].address;
      info[‘name’] = Meteor.user().username;
    }
}

I hope this helps somebody out there. Any feedback or improvements are always welcome.

brianjlennon

Read more posts by this author.

Dublin, Ireland

Subscribe to Meteor University

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!