Creating a user in Intercom via Angular 4 Signup

Live Customer Engagements have become a popular service provided by various business websites today. Intercom is one of the emerging chat tools we have today due to its simple user friendly UI and the convenience of using it.

So I have been using intercom for a few months now and as a developer I have come across different user scenarios in implementing intercom with an Angular 4 project. I would like to share some knowledge with you guys on,

1. Integrating Intercom to an Angular 4 application
2. How to interact each user in the Angular application with the Intercom
3. How to create a new user in Intercom when he/she is signing up from an Angular application

Let’s see how to integrate intercom with your application

Step 1: According to their documentation, they will provide you with two scripts to include in the index.html page in your application.

• First script is about your account details such as the APP_ID and initiating intercom settings in your Angular app.
• Secondly, the intercom application will boot in your angular application

The above snippet should be placed inside the tag of the index.html in the angular application.

Step 2: Create an angular sign up page

You can create your own application or use the following repository.git clone https://github.com/lakindu95/Angular-Signup-Intercom-User-Creation.git

This signup application is referred from

Angular 2/5 User Registration and Login Example & Tutorial | Jason Watmore's Blog
*UPDATED Nov 23, 2017 to Angular 5.0.3 - An example and tutorial of how to implement user registration and login…*jasonwatmore.com

Therefore, I’m skipping the sign up application part and moving on to the intercom work.

Step 3: Go to your home component controller (home.component.ts)

Paste the above code in your controller.

Above snippet will take the APP_ID from environments.ts, therefore you have to add your APP_ID given from intercom to the file in environments.

Note that you can add custom attributes in the application and configure the custom attributes in intercom application as you wish.

BONUS: So now, you can see that we are booting the intercom chat twice. Yes, If we delete APP_ID from index.html, while keeping it in the environment variables, the chat will pop up only when the user is logged in.

Let’s see the process now.

1. User Registers

2. User is created in Intercom account

3. User Login

4. Home page

5. User will be shown as online in intercom

Tip: After logging into the home page, there will be more pages that the user can access.

Remember to use the following update code on each component related to home component after logging in.

Intercom('update');

Why? This will look for new messages that should be displayed to the current user by pinging to the intercom chat each time.

For more tech tutorials from Lakindu, check out his blog on Medium