ember-intercom-io

Intercom.io integration for Ember.js apps.

Setup

Install this addon with ember-cli ember install ember-intercom-io

Add the {{intercom-io}} component to one of your templates` The chat widget will appear whenever this component has been rendered, and should disappear whenever it's destroyed.

Configuration

In your config/environment.js file, you must provide your appId

module.exports = function(environment) {
  ...
  intercom: {
    appId: null, // <-- REPLACE WITH YOUR INTERCOM.IO app_id
    enabled: true, // <-- Setting to false in your testing environment prevents unneccessary network requests (true by default)
    userProperties: {
      createdAtProp: 'createdAt',
      emailProp: 'email',
      nameProp: 'name',
      userHashProp: 'hash',
      userIdProp: 'id'
    }
  },
  ...
};

Users vs Leads

In the intercom.io world, a lead is a visitor to your site or app, without an email or name associated with them. A user has a name and email, and is a good construct for tracking the history of all interactions w/ a single person.

You can make ember-intercom-io aware of a "user" context (shifting into "users" mode instead of "leads" mode) by adding an object to the intercom service (i.e., your user authentication service).

When the application updates the intercom.user object, changes will be sent to Intercom and reflected in your Intercom dashboard.

app/services/authentication.js

import Service, {inject as service} from '@ember/service';

export default Service.extend({
  intercom: service(), // the intercom service
  didLogin(user) {
    ...
    this.get('intercom').set('user.name', 'Joe Username');
    this.get('intercom').set('user.email', 'joe@example.com');
    this.get('intercom').set('user.createdAt', 1447135065173);
  }
});

Custom Properties

To send custom properties on to intercom, add them to the intercom.user object. All property names will be underscored prior to being sent. undefined values will be removed (however, null is kept).

  let customProperties = {
    myCustomThing: 1,
    numberOfCats: false,
    notDefined: undefined
  }
  set(this, 'intercom.user', customProperties);

becomes

{
  my_custom_thing: 1,
  number_of_cats: false
}

API

The intercom service exposes several public API methods that match Intercom.com's existing Javascript API. For full details on the client API, read the Intercom docs.

Properties

Name	Type
autoUpdate	Boolean
hideDefaultLauncher	Boolean
isOpen	Boolean
isBooted	Boolean
unreadCount	Integer
user	Object

Methods

The following intercom methods are implemented. See services/intercom.js for full details.

boot()

update()

shutdown()

hide()

show()

showMessages()

showNewMessage()

trackEvent()

getVisitorId() Returns the current id of the logged in user.

startTour() Your intercom account needs to support product tours

Events

Subscribe to events in your app with event listeners:

//fancy-component.js

...

intercom: service(),
newMessageAlert: on('intercom.unreadCountChange', function() {
    alert('Unread Count Changed!');
}),

...

Available Events

(Read the Intercom documentation for full details)[https://developers.intercom.com/v2.0/docs/intercom-javascript#section-intercomonhide]

Ember Event	Intercom Event
hide	`onHide`
show	`onShow`
unreadCountChange	`onUnreadCountChange`

Installation

git clone this repository
npm install

Linting

npm run lint:hbs
npm run lint:js
npm run lint:js -- --fix

Running tests

ember test – Runs the test suite on the current Ember version
ember test --server – Runs the test suite in "watch mode"
ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

ember serve
Visit the dummy application at http://localhost:4200.

For more information on using ember-cli, visit http://www.ember-cli.com/.

johanrd/ember-intercom-io