Giter Club home page Giter Club logo

ng-intercom's Introduction

ng-intercom

npm npm Build status Maintenance

This is an Intercom wrapper for Angular 2+ which supports AoT and SSR.

It intends to supports all documented intercom methods and PRs for functionality is greatly appreciated.

BETA VERSION

master is now hosting the 7.0.0 beta version of ng-intercom. If you need to make changes to the latest stable version, please PR against 0.x.x. If you need to use the last 0.x version, please run npm install --save --save-exact [email protected].

If you find issues with this version, please file an issue as soon as possible so we can take a look at it. We appreciate your cooperation!

ALPHA VERSION

If you want to try the latest features, check out the 7.0.0-alpha branch! Features include automatic script loading and intercom directives! If you find an issue, please report it!

Installation

This package is on NPM, so just run

$ npm install ng-intercom@latest --save

Configuration

  1. Import IntercomModule to app.module.ts. The module will automatically include the APP_ID instantiation, so you DO NOT need to copy the install script from Intercom and place it in your index.html.
import { IntercomModule } from 'ng-intercom';

@NgModule({
  imports: [
    ...
    IntercomModule.forRoot({
      appId: <your_app_id>, // from your Intercom config
      updateOnRouterChange: true // will automatically run `update` on router event changes. Default: `false`
    })
    ...
  ]
})
export class AppModule { }
  1. Use in your components/directives/whatever you want!
// App
import { Component, OnInit } from '@angular/core';
import { Intercom } from 'ng-intercom';

@Component({
  selector: 'app',
  template: `...`
})
export class AppComponent implements OnInit {
  constructor(
    public intercom: Intercom
  ){}

  ngOnInit() {
    this.intercom.boot({
      app_id: <app_id>,
      // Supports all optional configuration.
      widget: {
        "activator": "#intercom" 
      }
    });
  }
}

Development

To run live testing: ng test

To run tests: npm test

To run distribution: npm run build:dist

To publish npm run build:dist && npm publish dist

Credits

Maintained by Scott Wyatt and Wilson Hobbs in 2017 with contributions from Florian Reifschneider, Devon Sams, Humberto Rocha, and Luca GOUTY

ng-intercom's People

Contributors

adrogon avatar andy-hook avatar devonsams avatar flore2003 avatar humrochagf avatar koslun avatar lucagouty avatar scott-wyatt avatar wbhob avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

ng-intercom's Issues

intercomShow directive not loading window

This may or may not be a bug, I am just having a hard time getting the API to function as described in the docs. I can't seem to get the button with the 'intercomShow' directive to do anything. Clicking the button with the directive also does not produce any JS errors in the console, nor does it produce a network log in the network tabs of my Chrome debugger. I think I've adequately followed the docs, but no cigar. The default setup with the index.html script works fine, so my intercom settings are likely not the issue. I wanted to run my setup by you to see if you spot anything. Important to note that as per the instructions, I did not include any script tag in my index.html.

  • Angular Version: 5.2.5
  • Angular CLI Version: 1.7.0
  • Node & NPM Version: 8.11.1 & 5.6.0

I need to allow the user to click a button to get the message dialog from a component available after a successful login (my Dashboard login)

my app.module.ts file:

import { IntercomModule } from 'ng-intercom';
import { BrowserModule } from '@angular/platform-browser';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import {AppComponent} from './app.component';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'Dashboard',
    pathMatch: 'full'
  }
]

@NgModule({
declarations: [
    AppComponent,
    DashboardComponent,
imports: [
    routes,
    BrowserModule,
    IntercomModule.forRoot({
      appId: '<my app id>',
      updateOnRouterChange: false
})
export class AppModule {}

my dashboard.component.ts component:

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import { Intercom } from 'ng-intercom';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {
constructor(public intercom: Intercom) {}

ngOnInit() {
    this.getList();
}

getList = function () {
    this.addressDS
      .home()
      .then(res => {
        this.home = res;
        this.intercom.boot({
          app_id: '<my app id>',
          name: res.name,
          email: res.email,
          created_at: new Date(),
        });
      });
  };
}

my dashboard.component.html:

<p>message us:</p>
<button intercomShow>test this</button>

my app.component.html:

<router-outlet></router-outlet>

window.Intercom is not a function

Versions

  • Angular: 6.1.6
  • Angular CLI: 6.1.5
  • ng-intercom: 6.0.0-beta.3
  • Node.JS: 10.9.0
  • NPM: 6.4.1

Description

After moving to beta.3, started getting errors Object doesn't support property or method 'Intercom'

File
webpack:///node_modules/ng-intercom/esm5/ng-intercom.js:57e.prototype.update

Sometimes another error shows window.Intercom is not a function

File
webpack:///node_modules/ng-intercom/esm5/ng-intercom.js:58e.prototype.update

It was working fine with beta.2

Attached image from bugsnag for reference.
screenshot 2018-09-12 13 15 29

Error: Can't resolve 'ng-intercom'

Hello, I am getting this error when i run my app. I am using angular-cli.

Error: "Error: Can't resolve 'ng-intercom'" in app.module"

Error: "Error: Can't resolve 'ng-intercom' in component"

Version Mismatch

I could use it for dev with no problems, but when i build for prod i had this error comming up:

ERROR in Metadata version mismatch for module C:/mdc/mdc.pagalee.dashboard/node_modules/ng-intercom/dist/index.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/mdc/mdc.pagalee.dashboard/src/app/app.module.ts, resolving symbol AppModule in C:/mdc/mdc.pagalee.dashboard/src/app/app.module.ts, resolving symbol AppModule in C:/mdc/mdc.pagalee.dashboard/src/app/app.module.ts

I'm running this application on angular5

Sending custome values with intercom.update

Versions

  • Angular: "^5.2.0",
  • ng-intercom: "ng-intercom": "^6.0.0-beta.1",

Description

When doing an intercom update call like this:

this.intercom.update({
      'foo': 'bar',
    });

The custom variable (defined in intercom) is not being set for the user.

Production build throws error in version 1.0.0-beta.0

Problem
When building an app using the ng-intercom library in production mode, the following error is thrown:

ERROR in /path/to/project/src/$$_gendir/node_modules/ng-intercom/intercom.module.ngfactory.ts (26,82): Argument of type '{}' is not assignable to parameter of type 'IntercomConfig'.                           
  Property 'app_id' is missing in type '{}'.

This is due to the Intercom class being specified in both the module's providers and in the providers of the forRoot() method.

Solution
Only the forRoot() method should specify the Intercom class as a provider.

Automatically send update pings when user navigates in the app to simulate page loads

Usually, Intercom track the user on their journey through the app using page loads. However, when using Intercom with a SPA, the user navigation is not automatically recorded, rather, the Intercom JavaScript SDK provides an update method that can be called whenever the URL changes without a real page load to tell Intercom that the user has navigated (https://developers.intercom.com/v2.0/docs/integrate-intercom-in-a-single-page-app)

It would be a nice addition to this library to automatically listen for Router events and send the update pings to Intercom, whenever the user navigates in the app. It would be probably best to make this an optional behavior that can be turned on using some kind of configuration flag.

Publish to NPM?

I think this is an NPM worthy package... would you consider publishing it?

Function calls are not supported

Copied from @craigeddy #11

When I use this version, I'm getting a compile error on ng serve:

ERROR in Error encountered resolving symbol values statically. Calling function 'IntercomModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symb ol AppModule in C:/Users/eddycr/Source/Repos/registration/src/app/app.module.ts, resolving symbol AppModule in C:/U sers/eddycr/Source/Repos/registration/src/app/app.module.ts

the code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { IntercomModule } from 'ng-intercom';
import { AppComponent } from './app.component';
import { RegisterModel } from './app.registermodel';
import { RegistrationComponent } from 'app/registration/registration.component';

@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    IntercomModule.forRoot({ app_id: 'sq739kpn'})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I also have a repo with my whole project if you want to take a look. I'm probably doing/forgetting something noob-ish. craigeddy/IntercomProtype (angular2-intercom-alpha branch)

Installation Error

I'm getting the following error when I tried installing ng-intercom using yarn

error [email protected]: Expected version ">= 6.0.0 < 7.0.0.

Before you submit an issue, please include:

  • Angular Version: 4
  • Angular CLI Version: 1.2.6
  • Node & NPM Version: 9.5.0 & 5.6.0 respectively

Detailed Description on how to reproduce error:
yarn add ng-intercom or yarn add ng-intercom@latest

No Error but Intercom not showing at all

We use issues to track bugs and fixes, so general questions or advice should be asked on Stack Overflow or the Gitter Channels. Non "Fix/Bug" issues may closed without a formal response.

Before you submit an issue, please include:

  • Angular Version (5.2)
  • Angular CLI Version (1.7.3)
  • Node (v9.8.0) & NPM Version (v5.6.0)

Detailed Description on how to reproduce error:

I followed instructions from the readme. not sure what's the problem

add vertical_padding: options

I don't see any possibility on how I can change the vertical padding for my intercom chat. In the docs of intercom they suggest to use this method. Is there a possibility to do this?
Cheers

window.intercomSettings = {
    app_id: ‘abc123’,
    alignment: 'left',			# Customize left or right position of messenger
    horizontal_padding: 20,		# Customize horizontal padding
    vertical_padding: 20		# Customize vertical padding
  };

Intercom js loaded on window.onload instead of scriptElement.onload

Versions

  • Angular: 5.2.0
  • Angular CLI: 1.6.8
  • ng-intercom: 6.0.0-beta.2
  • Node.JS:
  • NPM: 5.8.0

Description

IntercomJS is loaded on window.onload event instead of scriptElement.onload, or by a function to init and load the js.

When intercom js is injected before window.load is fired, the module will load and work just fine.
But when intercom is injected after window.load was fired, the intercom JS won't be loaded because window.load already fired, and thus the component won't work.

To fix this issue, we had to use this workaround in our wrapper component to manually load the intercom js.

const intercomJsNotLoaded = !$(`script[src="https://widget.intercom.io/widget/${environment.intercomKey}"]`).length;
if (intercomJsNotLoaded) {
  // Load Intercom JS
  const loadIntercomJS: any = this.intercom.l(this.intercomConfig);
  loadIntercomJS.apply(this.intercom);
}

Possible solution

Is it possible to move the module loading through a function to be called manually or replace the window.onload with scriptElement.onload of the intercom js script injected?

Type mistmatch

Following the tutorial in the README, I added in my ngOnInit:

		this.intercom.boot({
			app_id: 'my-app-id',
				// Supports all optional configuration.
			widget: {
				"activator": "#intercom" 
			}
		});

And I got a TS error:

ERROR in src/app/components/app/index.ts(87,22): error TS2345: Argument of type '{ app_id: string; widget: { "activator": string; }; }' is not assignable to parameter of type 'BootInput'.
  Type '{ app_id: string; widget: { "activator": string; }; }' is not assignable to type 'UserWithUid & DefaultBootInput & Any'.
    Type '{ app_id: string; widget: { "activator": string; }; }' is not assignable to type 'UserWithUid'.
      Property 'user_id' is missing in type '{ app_id: string; widget: { "activator": string; }; }'.

Property 'init' does not exist on type 'Intercom'

In the readme regarding ngOnInit() it says that the following line should be used:

this.intercom.init({

This gives me the error:

Property 'init' does not exist on type 'Intercom'

This error only occurred for version 1.0.0-beta.11 and not for 1.0.0-beta.10. I managed to fix it by using update instead of init. Perhaps the line in the readme should be changed to:

this.intercom.update({

Error with ng build --prod

With version 1.0.0-beta.12 - when ng build --prod is called it fails to compile saying:

ERROR in Error during template compile of 'CoreModule'
  Function calls are not supported in decorators but 'IntercomModule' was called.

P.S: I use a CoreModule instead of AppModule

It works fine with 1.0.0-beta.11 though

Angular CLI: 1.7.2
Node: 9.5.0
OS: darwin x64
Angular: 5.2.7
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

@angular/cli: 1.7.2
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Received "window.Intercom is not a function" error

Until I added the following to my app's index.html:

<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/<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);}}})()
</script>

TypeError: Cannot read property 'boot' of undefined

I have installed the module following the instructions and i get this error ”TypeError: Cannot read property 'boot' of undefined”. Here is the code:

` public intercom: Intercom
constructor() {
}

ngOnInit() {
this.intercom.boot({ /// <--- on this line is the error
app_id: 'app-id',
widget: {
"activator": "#intercom"
}
});
}`

Can't bind to 'intercomShow' since it isn't a known property of 'button'

Using 1.0.0-beta.6 ,

Added it to app.module.ts and app.component.ts as per installation directions.

On Route change Pings are send out as well the iframe is loaded. However when I try to use the directive : <button [intercomShow]="yourMessage"> . I get the above error.

Uncaught Error: Template parse errors:
Can't bind to 'intercomShow' since it isn't a known property of 'button'. ("


<button class="al-footer-right btn btn-default" [ERROR ->][intercomShow]="test">

  <!--<div class="al-footer-right" translate>{{'general.created"): ng:///PagesModule/Pages.html@10:48
at syntaxError (compiler.es5.js:1690) [<root>]
at TemplateParser.parse (compiler.es5.js:12811) [<root>]
at JitCompiler._compileTemplate (compiler.es5.js:26963) [<root>]
at :4200/vendor.bundle.js:113285:62 [<root>]
at Set.forEach (<anonymous>) [<root>]
at JitCompiler._compileComponents (compiler.es5.js:26883) [<root>]
at :4200/vendor.bundle.js:113172:19 [<root>]
at Object.then (compiler.es5.js:1679) [<root>]
at JitCompiler._compileModuleAndComponents (compiler.es5.js:26769) [<root>]
at JitCompiler.compileModuleAsync (compiler.es5.js:26698) [<root>]
at PlatformRef_._bootstrapModuleWithZone (core.es5.js:4535) [<root>]
at PlatformRef_.bootstrapModule (core.es5.js:4521) [<root>]
at Object.373 (main.ts:10) [<root>]

Align Intercom to left instead of right.

We use issues to track bugs and fixes, so general questions or advice should be asked on Stack Overflow or the Gitter Channels. Non "Fix/Bug" issues may closed without a formal response.

Before you submit an issue, please include:

  • Angular Version - 5
  • Angular CLI Version - 1.5.5
  • Node & NPM Version - V9.9.0cli -version

Detailed Description on how to reproduce error:

My function call in my service is as follows:
'''initializeIntercom(username, userEmail) {
this.intercom.boot({
app_id: 'xj20wy47',
alignment: 'left',
horizontal_padding: 20,
vertical_padding: 20,
// Supports all optional configuration.
name: username, // Full name
email: userEmail, // Email address
widget: {
'activator': '#intercom'
}
});
}'''

But the chat button is on the right side of the screen rather than the left.

loadIntercom function doesn't work

We use issues to track bugs and fixes, so general questions or advice should be asked on Stack Overflow or the Gitter Channels. Non "Fix/Bug" issues may closed without a formal response.

Before you submit an issue, please include:

  • Angular Version - 4.4.6
  • Angular CLI Version - 4.4.6
  • Node & NPM Version - 6.13.1 and 3.10.10

Detailed Description on how to reproduce error:

Followed installation instructions; loadIntercom() method reaches following piece of code:
if (w.attachEvent) { w.attachEvent('onload', l); } else { w.addEventListener('load', l, false); }

runs addEventListener, but l() never fires

Publish 0.2.0

0.2.0 is ready to publish. We should use a CI script to publish so I don't have to ask you to pub every time 😄

appId being ignored in boot method

Versions

  • **Angular: 6.0.0
  • **Angular CLI: 6.2.3
  • **ng-intercom: 6.0.0
  • **Node.JS: 8.12.0
  • **NPM: 6.4.1

Description

I have followed the instruction in the main readme, which indicates that the intercom appId can be overridden via a boot method which is what we require. The project we are working on has multiple appId's, depending on the domain that's being accessed.

Unless an appId is specified in the forRoot method, the intercom messenger does not load. Based on the documentation it would seem that the appId can be replaced via the boot method, but this is not the case.

ng-intercom undefined

Re-opeing issue #6 as I'm getting the same issue. I followed the instruction on he home page, I add the import in my module.ts file, then add ng-intercom to the list of imports and get this error:

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'ng-intercom' in '/Users/otusweb/Documents/tweetPresenter/tweetapp-web/src/app'
 @ ./src/app/app.module.ts 18:0-45
 @ ./src/main.ts
 @ multi ./src/main.ts

my app.module.ts file

// angular imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, Http, RequestOptions } from '@angular/http';
import { provideAuth, AuthHttp, AuthConfig } from 'angular2-jwt';

// third party imports
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {InlineEditorModule} from 'ng2-inline-editor';
import {RollbarModule} from 'angular-rollbar/lib';
import { ProgressHttpModule } from "angular-progress-http";
import { IntercomModule } from 'ng-intercom';

[... other imports ]
@NgModule({
  declarations: [
      AppComponent,
      PresentationsComponent,
      PresentationDetailComponent,
      SlideDetailComponent,
      HomeComponent,
      NotFoundComponent,
      UploadProgressModalContent,
      BetaGateComponent
  ],
  imports: [ 
      BrowserModule,
      FormsModule,
      HttpModule,
      ProgressHttpModule,
      AppRoutingModule,
      InlineEditorModule,
      RollbarModule.forRoot({
        accessToken: 'xxxxx',
      }),
      NgbModule.forRoot(), 
    IntercomModule.forRoot()
  ],
  providers: [
    { provide: ErrorHandler, useClass: CustomErrorHandler },
    PresentationService,
    SlideService,
    UserService,
    Auth,
    {
      provide: AuthHttp,
      useFactory: authHttpServiceFactory,
      deps: [ Http, RequestOptions ]
    },
  AuthGuard,
  BetaGuard,
  LoggedOutGuard],
  entryComponents:
  [UploadProgressModalContent],
  bootstrap: [AppComponent]
})

export class AppModule { }

OS: mac OS 10.12

os: darwin x64
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.2```

npm view ng-intercom version
```0.2.1```

error TS2304: Cannot find name 'object'

hi,

  • I am getting below error when I install intercom package.
    https://github.com/CaliStyle/angular2-intercom
    npm install ng-intercom@latest --save
  • its pointing to this line ---> init(intercomData?: object): any;
  • can you guys tell me how to fix it.
  • providing my code snippet below.
  • this is the line I included in app.module.ts ---> import { IntercomModule } from 'ng-intercom';

node_modules/ng-intercom/dist/intercom/intercom.d.ts(19,25): error TS2304: Cannot find name 'object'.
node_modules/ng-intercom/dist/intercom/intercom.d.ts(26,25): error TS2304: Cannot find name 'object'.
node_modules/ng-intercom/dist/intercom/intercom.d.ts(41,19): error TS2304: Cannot find name 'object'.

import { Router } from '@angular/router';
import { IntercomConfig } from '../shared/intercom-config';
/**

  • @description A provider with every Intercom.JS method
  • @export
  • @Class Intercom
    /
    export declare class Intercom {
    private config;
    private router;
    constructor(config: IntercomConfig, router: Router);
    /
    *
    • @description Method used to instantiate Intercom
    • @param {object} [intercomData]
    • @memberof Intercom
    • @deprecated
      /
      init(intercomData?: object): any;
      /
      *
    • @description
    • If you'd like to control when Intercom is loaded, you can use the 'boot' method. This is useful in situations like a one-page Javascript based application where the user may not be logged in when the page loads. You call this method with the standard intercomSettings object.
    • @param {object} [intercomData] Your intercom configuration
    • @memberof Intercom
      /
      boot(intercomData?: object): any;
      /
      *
    • @description
    • If you have the Respond product (combined with another product like Engage) you should call the Intercom shutdown method to clear your users’ conversations anytime they logout of your application. Otherwise, the cookie we use to track who was most recently logged in on a given device or computer will keep these conversations in the Messenger for one week. This method will effectively clear out any user data that you have been passing through the JS API.
    • @memberof Intercom
      /
      shutdown(): any;
      /
      *
    • @description
    • Calling the update method without any other arguments will trigger the JavaScript to look for new messages that should be displayed to the current user (the one whose details are in the window.intercomSettings variable) and show them if they exist.
    • Calling the update method with a JSON object of user details will update those fields on the current user in addition to logging an impression at the current URL and looking for new messages for the user.
    • @param {object} [data]
    • @memberof Intercom
      /
      update(data?: object): any;
      /
      *
    • @description
    • This will hide the main Messenger panel if it is open. It will not hide the Messenger Launcher.
    • @memberof Intercom
      /
      hide(): any;
      /
      *
    • @description
    • This will show the Messenger. If there are no conversations it will open with the new message view, if there are it will open with the message list.
    • If a message parameter is supplied, it will automatically open a new message window, aliasing showNewMessage().
    • @param {string} [message]
    • @memberof Intercom
      /
      show(message?: string): any;
      /
      *
    • @description To open the message window with the message list you can call showMessages().
    • @memberof Intercom
      /
      showMessages(): any;
      /
      *
    • @description To open the message window with the new message view you can call showNewMessage().
    • This function takes an optional parameter that can be used to pre-populate the message composer as shown below.
    • @param {string} message
    • @memberof Intercom
      /
      showNewMessage(message?: string): any;
      /
      *
    • @description
    • You can submit an event using the trackEvent method. This will associate the event with the currently logged in user and send it to Intercom. The final parameter is a map that can be used to send optional metadata about the event.
    • You can also add custom information to events in the form of event metadata.
    • @param {string} eventName
    • @param {*} [metadata]
    • @memberof Intercom
      /
      trackEvent(eventName: string, metadata?: any): any;
      /
      *
    • @description
    • A visitor is someone who goes to your site but does not use the messenger. You can track these visitors via the visitor user_id. This user_id can be used to retrieve the visitor or lead through the REST API.
    • @returns {string}
    • @memberof Intercom
      /
      getVisitorId(): string;
      /
      *
    • @description Alias for getVisitorId()
    • @alias getVisitorId()
    • @readonly
    • @type {string}
    • @memberof Intercom
      /
      readonly visitorId: string;
      /
      *
    • @description
    • Gives you the ability to hook into the show event. Requires a function argument.
    • @param {() => void} handler
    • @memberof Intercom
      /
      onShow(handler: () => void): any;
      /
      *
    • @description
    • Gives you the ability to hook into the hide event. Requires a function argument.
    • @param {() => void} handler
    • @memberof Intercom
      /
      onHide(handler: () => void): any;
      /
      *
    • @description
    • This method allows you to register a function that will be called when the current number of unread messages changes.
    • @param {(unreadCount?: number) => void} handler
    • @memberof Intercom
      */
      onUnreadCountChange(handler: (unreadCount?: number) => void): any;
      }

Publish 0.1.1

Sorry, I found a bug and scrambled to fix it. If you could please pull the latest changes and run tsc, and publish 0.1.1 to NPM, that'd be great.

Angular Unit Tests

Versions

  • Angular: 6.0.9
  • Angular CLI: 6.0.8
  • ng-intercom: 6.0.0-beta.2
  • Node.JS: 8.11.2
  • NPM: 6.1.0

Description

I have previoulsy been using the method recommended on the Intercom site (https://developers.intercom.com/docs/integrate-intercom-in-a-single-page-app) and found to be rather inconsistent/unstable. I ran accross this package and things started to work much more smooth. However, after including it in my Angular app, the majority of my unit tests fail with

Error: StaticInjectorError(DynamicTestModule)[IntercomService -> Intercom]:
StaticInjectorError(Platform: core)[IntercomService -> Intercom]:
NullInjectorError: No provider for Intercom!

I know that this means I need to add it as a provider to the unit test, but that doesn't seem to work either. Looking through the repo, I do see a tests directory, but it doesn't appear to be testing any of the Intercom module itself. What's the recommended way to make it so I can use the ng-intercom in my application without having all of my unit tests fail. Mock it?

showing for Angular 2+ wrapper version

Versions

  • Angular:
  • Angular CLI:
  • ng-intercom:
  • Node.JS:
  • NPM:

Description

this error is coming while running ng build --prod

/node_modules/ng-intercom/ng-intercom.d.ts, found version 4, expected 3

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

Error initialising Intercom in app.module.ts

I've installed Intercom throughnpm install ng-intercom@beta --save

When trying to import the Intercom in app.module.ts

import { IntercomModule } from 'ng-intercom';
..
    IntercomModule.forRoot({
      appId: "your_app_id", 
      updateOnRouterChange: trueDefault: `false`
    })
..

I get the following two errors:

Argument of type '{ appId: string; updateOnRouterChange: boolean; }' is not assignable to parameter of type 'IntercomConfig'.
Object literal may only specify known properties, and 'appId' does not exist in type 'IntercomConfig'.

I'm using Angular 4.

Replacing API keys with Access Tokens

Hi, is ng-intercom going to publish an update in order to support latest update with Access Tokens? You can read about it here: https://developers.intercom.com/v2.0/docs/replacing-your-api-keys-with-access-tokens-step-by-step-guide#section-step-2-replace-your-api-keys

I received an email which says:

As you may be aware, we've been in the process of deprecating API Keys over the past 18 months in favour of more secure methods. As the final step of this process, your API Keys will be disabled at 4pm GMT on April 23 2018.

Thanks in advance for any reply!

How to use app_id returned from API

Is it possible to provide the {app_id} for intercom at a later stage? I have to pull that using an API call so its not available at boot time.

For that reason i dont have app_id to put here:

IntercomModule.forRoot({
      appId: <your_app_id>, // from your Intercom config
})

boot not working after shutdown

I think this is a general issue with boot as it seems like it's not possible the use boot more than once.

This means if I want to use shutdown and then boot like below it doesn't work.

    this.intercom.shutdown();
    this.intercom.boot({
      app_id: environment.intercom,
      custom_launcher_selector: '#custom-intercom',
      alignment: 'left',
      hide_default_launcher: true
    });

I believe the issue is is due to the loadIntercom function as the callback isn't used after

     ic('reattach_activator')
     ic('update', config)

Publish 0.1.2

Oopsy, I made an emergency fix. No API changes, but it does work!

If no script tag is on page a parentNode error is thrown

First off love the easy to use library that you have. I ran into a bug recently when trying to use this library. We didn't have a script tag on our page and we ended up getting a parentNode error because of this which was a bit misleading.

Would it be a more ideal situation to rely on the head element here or possible add some documentation about the requirement of at least one script tag? Thanks and if you would like me to put a PR in for this change just let me know!

https://github.com/CaliStyle/angular2-intercom/blob/56135794e7a351215b68720ccfae2c84588d136b/src/util/load-intercom.ts#L11

Undefined from http request

Bug

Angular Version = 5.2.1
Angular CLI Version = 1.7.4
Node & NPM Version = 5.8.0

When loading the app at localhost and booting intercom widget, http request returns undifind from the request to 'https://widget.intercom.io/widget/undifined'.
I've traced this back to ng-intercom.js at:

Intercom.prototype.l = function () { var d = document; var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = "https://widget.intercom.io/widget/" + this.id; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); };

as this.id is not a known variable of the function call this.l it returns undifined and should be:

Intercom.prototype.l = function (config) { var d = document; this.id = config.appId; var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = "https://widget.intercom.io/widget/" + this.id; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); };,

than used as 'this.l(config);'

Angular 6 support

  • Angular Version 6.0.0
  • Angular CLI Version 6.0.0
  • RxJS Version 6.1.0
  • TypeScript Version 2.7.2
  • Node Version 8.9.1
  • NPM Version 5.5.1
  • ng-intercom Version 1.0.0-beta.13

Expected/desired
Support Angular 6, TypeScript 2.7 and RxJS 6 without errors

Actual
Getting this error when starting a newly created angular-cli project with this library added to it:

TypeError: Cannot read property 'events' of null

Here is the project and branch reproducing the above error. Created the project using angular-cli defaults with yarn as the package manager while also adding rxjs-compat, which should smooth over being able to use RxJS 5.x.

Solution
A large part of the work might be possible by simply using ng update with @angular/core and rxjs as outlined in the Angular 6 release post.

Given that I think upgrading to support Angular 6 will invariably break everyone using below angular 5 and below I think it would make sense to couple this update with a major version bump. Meaning bumping the version number to 2.x.

ReferenceError: document is not defined

The intercom package is referencing the document which is a bad practise when using Angular. In my case it results in an error as I use Angular Universal to compile the app.

Directives Tracking

I think we need to develop some directives to tie/hook into Intercom. If anyone has other ideas about what to put here, please add it as a comment below.

Current Plan:

  • Show Intercom: show a new message window
  • Show Intercom with Message: Show a new message window prepopulated with content
  • Track event: Track an event by name
  • Log Out/Shutdown: shut down intercom, for use on a log out button

Attach a method or service on route change

Is it possible to attach a method to be called from service on each route change?

For example,
If i setup:

IntercomModule.forRoot({
      updateOnRouterChange: true
})

Can i bind a function to be called on each route change to manipulate intercom data to be sent?

Issues getting set up

Hi - the instructions as written are not working for me.

$ npm install ng-intercom@beta --save <-- appears to be installing an alpha build that is not with the rest of the instructions:

IntercomModule.forRoot({
appId: "w0admjxc",
updateOnRouterChange: true // will automatically run update on router event changes. Default: false
})

appId and updateOnRouterChange through errors with this alpha build.

Updating to the latest beta 1.0.0-beta.9 gets eliminates these errors,

However, at compile time I get:
`
ERROR in Error: Metadata version mismatch for module C:/Projects/VisualStudio/ppnsystem/Websites/VPortalNV10/node_modules/ng-intercom/dist/index.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/Projects/VisualStudio/ppnsystem/Websites/VPortalNV10/src/app/app.module.ts, resolving symbol AppModule in C:/Projects/VisualStudio/ppnsystem/Websites/VPortalNV10/src/app/app.module.ts, resolving symbol AppModule in C:/Projects/VisualStudio/ppnsystem/Websites/VPortalNV10/src/app/app.module.ts
at Error (native)
at syntaxError (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler\bundles\compiler.umd.js:1729:34)
at simplifyInContext (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler\bundles\compiler.umd.js:25111:23)
at StaticReflector.simplify (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler\bundles\compiler.umd.js:25123:13)
at StaticReflector.annotations (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler\bundles\compiler.umd.js:24553:41)
at _getNgModuleMetadata (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler-cli\src\ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler-cli\src\ngtools_impl.js:109:26)
at Object.listLazyRoutesOfModule (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@ngtools\webpack\src\plugin.js:207:44)
at _donePromise.Promise.resolve.then.then.then.then.then (C:\Projects\VisualStudio\ppnsystem\Websites\VPortalNV10\node_modules@ngtools\webpack\src\plugin.js:443:24)
at process._tickCallback (internal/process/next_tick.js:109:7)'

Any ideas what's going on here?

Angular Release Cadence and Version Numbers

Unless there is anyone in disagreement with a good use case, ng-intercom will follow the major release numbers of Angular. The next released version of ng-intercom will be v6 and the current master will be marked as v5.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.