Basic JavaScript

If you have a web app with multiple pages where each one triggers a new page refresh then you will most likely need the basic JavaScript method. This means you will not need to create separate actions which trigger when the Messenger will appear or update. The page refresh itself is enough to trigger the action. To set up the basic JavaScript you will only need to follow one step.

Step 1: Install Intercom JS Library

To get the Messenger to appear on your web app simply copy and paste the snippet below before the tag on every page where you want the Messenger to appear for logged out users.

Logged Out Users

//Set your APP_ID
var APP_ID = "APP_ID";

window.intercomSettings = {
    app_id: APP_ID
  };
(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);}}})()

📘

Logged Out v Logged In?

Logged out users are generally leads (visitors if they have not communicated via the Messenger) whereas logged in users are users in the Intercom sense. The main difference is the amount of information you know about them. You will have more info on logged in users so you will want to provide this when sending data via the Messenger.

Logged In Users

//Set your APP_ID
var APP_ID = "APP_ID";
var current_user_email = "[email protected]";
var current_user_name = "Jean Paul Sartre";
var current_user_id = "1940";

window.intercomSettings = {
    app_id: APP_ID,
    name: current_user_name, // Full name
    email: current_user_email, // Email address
    user_id: current_user_id // current_user_id
  };
(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);}}})()

Interactive Install Example

Intercom Install Example

The above link is to a Codepen where you can test the install steps above. Codepen allows you to copy and paste code into an JS (or HTML and CSS) editor where you see the results immediately. You can use your own App ID if you have one or your can user our test example App ID, whatever you find easier. For more info on Codepen and how to use it please see this page