How to Install Intercom into a ReactJS App
This blog will cover how to install and configure a basic Intercom messenger into a ReactJS application. I will explain how to implement two messaging configurations, one for logged-in users, and one for visitors who are not logged in. I will be using the “Starter” version of Intercom, which is $79 a month. You can sign up for a 14-day free trial of the service here.
What is Intercom?
Intercom is a “Conversational Relationship Platform” that allows businesses to interact in real-time through messages with their customers/leads. It provides a message window interface that can be utilized in many ways. You may want to chat with first-time visitors, allowing them to ask questions and learn more about a service or product. Customer service can also be improved by allowing messaging from an existing customer to an employee or representative from the business. Intercom can also be configured with chatbots that can be easily set up to answer common questions and concerns. All communication takes place through the stand-alone messaging interface that sits on top of your application.
Getting Started
I’ll be explaining how I installed Intercom in my own ReactJS app — you can view the official documentation here.
Place the following code in the <head></head> element of your ReactJS application's index.html file. Make sure to replace YOUR_INTERCOM_APP_ID with your unique Intercom app ID string.
<script>var APP_ID = "YOUR_INTERCOM_APP_ID";
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){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(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>
You will not see the Intercom messenger on your app until the next step!
Intercom for Logged-in Users
I think this process is easier to understand if we implement the messaging system for logged-in users first. When a user logs into your application, we need to send some information to the Intercom messenger that tells them which user has logged in. In my application, I send this information to Intercom after a user’s data has successfully been retrieved from my database. I populate the object to be sent to Intercom with values from the object I receive back from my database of user info:
window.Intercom('boot', {
app_id: 'YOUR_INTERCOM_APP_ID',
name: data.user.username,
email: data.user.email,
user_id: data.user.id,
});This will also boot up the Intercom messenger with 'boot' . You should now see the messenger in the bottom right corner of your website! When a logged-in user messages you through Intercom, you will see which user is messaging you as well as any past conversations with them in your Intercom hub inbox.
You may have noticed that even if a user logs out of your application, they will still be logged into the Intercom messenger. Let’s fix that!
Shutdown Intercom Messenger
When a user logs out of the website, we want Intercom to shut down. This can be achieved with a simple function on the window object, similar to how 'boot' worked:
window.Intercom('shutdown');In my application, I run this when the user selects “logout” from the navbar. I also run it in App.js inside of useEffect if I detect (via JWT in my app) that the current visitor is not logged in upon a page refresh or a new visit.
Intercom for Not Logged-in Users
In my application, I am running Intercom for logged-in users as well as those who are not logged in to my website. We already have implemented it for when a user logs in, now let’s see how anyone visiting the site could use Intercom.
We will boot the Intercom messenger the same way as before, except this time we only use our Intercom app ID:
window.Intercom('boot', {
app_id: 'YOUR_INTERCOM_APP_ID'
});I run this immediately anytime after I shut down Intercom. This will give us a fresh start in the messenger, and log out any previous user and their messages. The messenger will not know who is using it, and thus we have created an ephemeral messenger session that will not be saved like a logged-in user’s conversations! You will not know who is messaging you through Intercom when it is operating like this.
So when a user logs out, or if the current visitor isn’t an authorized user (i.e. they don't have a JWT), I run this:
window.Intercom('shutdown');
window.Intercom('boot', {
app_id: 'YOUR_INTERCOM_APP_ID'
});Custom Intercom Settings
You can add an Intercom settings object to the <head></head> element in index.html to customize the messenger. You can change the location in which the messenger is displayed as well as setting an element to open (or launch) the messenger.
window.intercomSettings = {
app_id: 'YOUR_INTERCOM_APP_ID',
alignment: 'left',
horizontal_padding: 20,
vertical_padding: 20,
custom_launcher_selector: '#launcher'
};The custom_launcher_selector can be any id or class name that you choose. This setting would open the messenger anytime an element with an id of ‘launcher’ is clicked. If we wanted to use a class name and change it to ‘launch-intercom’ it would look like this in the object:
custom_launcher_selector: '.launch-intercom'Conclusion
We’ve only scratched the surface of what Intercom can do. This has been a quick tutorial to get you up and running with Intercom. I encourage you to next explore the Intercom hub’s inbox and operator — they give you all sorts of options and control over how you want to handle the different kinds of interactions with your users and visitors. Intercom is a great tool to boost user interaction, satisfaction, and the level of support available to your clientele!
