LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
  
  
  


  
  

Intercom Single Page App

This is a simple example of how you can install and use Intercom in a single page app.
You can interact with the messanger and the other basic functionality on the page to 
get an idea of how you can use Intercom to communicate with your customers. You can use 
the deafult test app or click the "Use Your App" Button to enter your own App ID

Intercom JS Library File

First things first, you need to include the Intercom JS library file in your HTML 
head element
Show JS Library code

Start as a visitor

The messenger on the right does not yet know anything about you. If you have not 
interacted with the messenger you are a visitor. If you are a visior you will have
a visitor ID. This ID will not appear in your Intercom console, You will only see
leads and users there.But you can acess this information via Javascript

Show visitor ID Code

Become a lead

To become a lead you just need to interact with the messenger on the right. If 
you start a conversation then you will automtically logged as a lead. Note that
to talk to leads you will need to subscribe to Acquire. You will need to include
the Acquire JS snippet to enable the Messenger which will allow you to talk to 
your leads
Show Acquire Snippet

Create an event for a lead

Enter an event below and click "Create Event". This will create an event and
associate it with the current lead. If you become a user this event, as with
conversations and other data, will be associated with the new converted user 

Show Event Code

Turn your lead into a user

  To create a user we need either an email address or a user ID.
  So lets get your user to Signup and ask them for this information.

Show User Code

Sign user/lead out of Intercom

Remember, its important to sign the user out of Intercom. If you don't then 
on a shared computer the next person will see the text of the previous
conversation and communicate with you as that person

Show Signout Code
CSS

.center {
  text-align: center;
  color: mediumblue;
  }

input[type=text], input[type=email], input[type=number] {
    width: 40%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid red;
    border-radius: 4px;
}
JS
//Set default test AppID
var appId = "fyq3wodw";

//Normally include as part of your HTML 
(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/' + appId;
            var x=d.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s,x);
        }
        if(w.attachEvent){w.attachEvent('onload',l);
        }
        else{
            w.addEventListener('load',l,false);}
    }
})()

window.Intercom('boot', {
   app_id: appId,
});

function customAppId() {
    appId = prompt("Please enter your App ID \nNote: This test setup will not work if you have secure mode enabled. \nIn this case please use the test app provided", "fyq3wodw");
    if (appId != "" && appId != null) {
      console.log(appId)
      Intercom('shutdown');
      window.Intercom('boot', {app_id: appId});
      document.getElementById("useYourApp").innerHTML =
        "The app ID has been set to " + appId;
    }
  else
    {
      appId = "fyq3wodw";
    }
}

function intercomevent(){
  var x = document.getElementById("event-form");
  var event=x.elements['event'].value;
  Intercom('trackEvent', event)
  document.getElementById("sent").innerHTML = "Event Submitted";
}

function getVisitorID(){
  var vid = Intercom('getVisitorId');
  if (vid == null || vid == ""){
    document.getElementById("visitorID").innerHTML = "There is no visitor ID available. Are you a lead or a user"
  } else {
    document.getElementById("visitorID").innerHTML = "Your Visitor ID is: " + vid;
  }
  
}

function loggedin() {
  var x = document.getElementById("user-form");
  var uname=x.elements['name'].value;
  var email=x.elements['email'].value;  
  var userid=x.elements['userid'].value; 
   
  if ((email == "") && (userid == "")) {
        alert("You need to provide at least one of Email and/or UserID");
        return false;
    }
  var userObject = {app_id: appId};
  if (email != ""){
      userObject.email = email;
      }
  if (userid != ""){
    userObject.user_id = userid;
  }
 
  window.Intercom('update', userObject);
    document.getElementById("createUser").innerHTML = "A new user should now be created";
}

function signout() {
  window.Intercom('shutdown');
  window.Intercom('boot', {
   app_id: appId,
  });
  location.reload(false)
  document.getElementById("shutdown").innerHTML = 'Signing out of Intercom';
}

function toggle(element) {
    document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
}
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:54

Related Codes

Pen ID
Pen ID
Pen ID