intercomShow directive not loading window

[nicolasroy11]

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>

[scott-wyatt]

@wbhob any input on this? I haven't used the directives yet.

[nicolasroy11]

So here is an update. I got it to work with the directive. The problem was that I hadn't included the Intercom HTML script that actually loads the Intercom functionality (not the window.intercomSettings one - there are two).

This line in the configuration instructions is why I hadn't done that: "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." - being new to Intercom, I had understood this to mean that no HTML script was necessary at all.

So, lesson learned, this HTML script: <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/sjjr60zc'; 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>

is needed even when using this wrapper. My bad

[nicolasroy11]

Misunderstood instructions