Skip to main content

Hey! I configured Intercom using instructions for the Angular Web app. We have requirements to support visitors without logins and users with logins. So I followed your instructions and implemented it like this:
 

// In the AppComponent which is the root component, I added  this code
import {Intercom} from '@intercom/messenger-js-sdk';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls:  './app.component.scss']
})
export class AppComponent implements OnInit {

  ngOnInit(): void {
    this.initIntercom();
  }

  private initIntercom(): void{
      Intercom({app_id: environment.intercomSettings.app_id});
  }
}


// We are calling the boot method when the user successfully logs in

boot({
          'app_id': environment.intercomSettings.app_id,
          'id': this.userApi.currentUser.id,
          'user_id': String(this.userApi.currentUser.id),
          'name': this.userApi.currentUser.name,
          'email': this.userApi.currentUser.email,
          'created_at': Math.floor(new Date(this.userApi.currentUser.created_at).getTime()/1000),
          'Admin User': this.userApi.currentUser.is_admin,
        });


// We are calling the shutdown and boot methods when the user logs out to clear a user session and start a visitor session

shutdown();
boot({app_id: environment.intercomSettings.app_id});

The problem is:
If a user (visitor without login) does not touch the Intercom widget before signing in and then a user (user logged in) logs in, there is a conversation history.
But if a user (visitor without login) touches the Intercom widget or writes a message and then a user (user logged in) logs in, there is no conversation history for him (only refreshing the page in a browser helps to get a list of all conversations).

Hey there 👋 Jacques here from Support Engineering!

This issue looks to be related to how Intercom manages sessions and user identification. When a visitor interacts with the Intercom widget without logging in, they are tracked based on a browser cookie. Then when they log in, Intercom updates their session to reflect their user details, and their conversation history should become visible to them. However, if the conversation history is not visible until the page is refreshed, this would suggest that the session update is not occurring immediately upon login.

When integrating Intercom in a single-page app framework such as Angular, if your user's data changes or if you change the URL in some way without a page load, you could call window.Intercom('update', {user_data}), where user_data is a set of changes to your user data. This update call simulates a page refresh, causing Intercom to check for changes to send to the customer.

I’ll attach our documentation below that explains how to integrate Intercom in SPAs in more detail:

Hope this helps! Feel free to reach out to our Support Team if you run into any issues with this :)

 

 

Thank you for your response. We found that we need to call an update before initiating a user session, but this is not enough because sometimes the update method doesn't finish before initiating a new session, so we added a timeout in 3s. What is going on? Why don't you have events and callbacks at all like (initiating, booting, updating, shutdowning. etc) to track the state of your widget?  Please, add some useful events and listeners with callbacks in the future. It will help to debug your widget. Thank you.

initIntercomSessionWhenUserIdentified(){
    const intercomMeta = {
      ...environment.intercomSettings,
      'user_id': 1,
      'name': 'John Doe', // User's name
      'email': 'john.doe@example.com',
      'created_at': 1640995200
    };

    update(intercomMeta);
    setTimeout(()=> {
      shutdown();
      boot(intercomMeta);
      this.setIntercomSessionActive(true);
    },3000); // This is a workaround for the Intercom SDK not being ready immediately,
    // We will remove this once we have a better solution or Intercom has events for SDK readiness
  }

 

Reply


Terms & ConditionsCookie settings