Intercom.io integration for Ember.js apps.
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.
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'
}
},
...
};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', '[email protected]');
this.get('intercom').set('user.createdAt', 1447135065173);
}
});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
}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.
| Name | Type |
|---|---|
| autoUpdate | Boolean |
| hideDefaultLauncher | Boolean |
| isOpen | Boolean |
| isBooted | Boolean |
| unreadCount | Integer |
| user | Object |
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
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 |
git clonethis repositorynpm install
npm run lint:hbsnpm run lint:jsnpm run lint:js -- --fix
ember test– Runs the test suite on the current Ember versionember test --server– Runs the test suite in "watch mode"ember try:each– Runs the test suite against multiple Ember versions
ember serve- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit http://www.ember-cli.com/.
Copyright (c) 2015 Levanto Financial, 2016-18 Mike Works, Inc.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent