Intercom

We believe that today, more than ever before, the Internet has created a competitive landscape where the best products win. In this environment, there's no room for friction.  It's critical to identify frustration in an online experience and fix it. 

Intercom offers a customer communication platform that includes in-app chat, feedback gathering, and marketing tools.  Together, FullStory and Intercom provide specific, actionable insights to create a more perfect online experience.

Our Intercom integration lets you jump to a customer's most recent FullStory session from within your Intercom dashboard, and puts a link to a customer’s Intercom profile in their FullStory user card.

intercom_fullstory.png

 

Installation

  1. Login to FullStory
  2. Navigate to Settings > Integrations & API Keys
  3. Click the Add button next to Intercom

    141281_1509029925667.jpg

  4. Click the Authorize button

    intercom_initial.png
  5. If the following dialogue doesn't appear, you may need to temporarily disable your browser's pop-up blocker to finish installing the Intercom integration. (You can turn it back on when you're done.) 
  6. Click Connect and the integration will be configured. You should be able to see your Intercom App ID in the FullStory window.

FullStory will now automatically pass new session URLs into Intercom on any page that is running both the FullStory and Intercom scripts. And as long as you use the same email or UID to identify in FullStory and Intercom, then you’ll also get a link to your customers’ Intercom profiles when you view their user cards in FullStory.

Ragehooks for Intercom

Using FullStory Ragehooks, frustration events - like rage clicks - are also sent to Intercom.  These events can be used to find frustrated Users and Leads to engage with specific messages.  Additionally, Intercom Messenger can be customized to engage frustrated users in real-time.  Proactively engaging users can help prevent a support ticket, lost sale, or churn scenario.

Here’s how:

  • Add the FullStory Ragehook for Intercom JavaScript snippet to your website - similar to how you added FullStory and Intercom.
  • Configure the snippet to engage a customer at the moment of frustration using Intercom Messenger.
  • View FullStory sessions to better understand customer frustration and provide assistance. 

Adding the Ragehook for Intercom snippet

Similar to FullStory’s Custom Event API, Ragehook events can be detected and sent to Intercom using trackEvent.  Recording Ragehook events will allow you to further configure Intercom to leverage user frustration signals.

var _fs_intercom_frustration = (function (exports) {
 'use strict';

 /**
  * Executes a callback function when the condition evaluates to true.
  * If the condition is false, the function will be checked again after doubling
  * the wait time until a maximum time is reached.
  *
  * @param condition function to evaluate and decide if callback should run
  * @param callback function to run when the condition is true
  * @param maxWait time to allow retrying the condition; defaults to 4000 ms
  * @param failureMsg message sent to FS.log as a result of timing out
  */
 function retryWithBackoff(condition, callback, maxWait, failureMsg) {
  if (maxWait === void 0) { maxWait = 4000; }
  var wait = 64;
  var resultFn = function () {
   if (condition()) {
    callback();
    return;
   }
   wait *= 2;
   if (wait > maxWait) {
    var fs = window[window['_fs_namespace']];
    if (fs && failureMsg) {
     fs.log('warn', failureMsg);
    }
    return;
   }
   setTimeout(resultFn, wait);
  };
  return resultFn;
 }

 // TODO update threshold to number of ragehook events needed to show Messenger
 // default is 0, which disables showing Intercom Messenger on frustration
 var threshold = 0;
 // TODO update the message to engage the user
 var prepopulatedMessage = 'If you\'re having difficulty, feel free to let us know by messaging our team.';
 var errorMessage = 'FullStory-Intercom frustration events enabled, but Intercom is not defined';
 var storageKey = '_fs_intercomFrustrationCount';
 /**
  * Returns true if Intercom is defined.
  * @param printError when true prints error message to console.error
  */
 function intercomOnPage(printError) {
  var onPage = window['Intercom'] !== undefined &&
   typeof window['Intercom'] === 'function';
  if (!onPage && printError) {
   console.error(errorMessage);
  }
  return onPage;
 }
 /**
  * Adds frustration event listeners.
  */
 function addEventListeners() {
  if (intercomOnPage(true)) {
   ['fullstory/rageclick'].forEach(function (event) {
    window.addEventListener(event, trackFrustrationEvent);
    window.addEventListener(event, showPrepopulatedMessage);
   });
  }
 }
 /**
  * Executes Intercom.trackEvent API when frustration events occur. Event
  * metadata contains the session link similar to the "New FullStory Session"
  * event.
  * @param customEvent the browser CustomEvent emitted by FullStory
  */
 function trackFrustrationEvent(event) {
  var type = event.type;
  var eventReplayUrlAtCurrentTime = event.detail.eventReplayUrlAtCurrentTime;
  var count = parseInt(sessionStorage.getItem(storageKey));
  sessionStorage.setItem(storageKey, isNaN(count) ? '1' :
   (count + 1).toString());
  if (intercomOnPage(true)) {
   window.Intercom('trackEvent', type, {
    'Session Link': {
     value: 'Play in FullStory',
     url: eventReplayUrlAtCurrentTime
    }
   });
  }
 }
 /**
  * Opens the Messenger as if a new conversation was just created.
  * https://developers.intercom.com/installing-intercom/docs/intercom-javascript#section-intercomshownewmessage
  */
 function showPrepopulatedMessage() {
  if (intercomOnPage(true) &&
   threshold.toString() == sessionStorage.getItem(storageKey)) {
   window.Intercom('showNewMessage', prepopulatedMessage);
  }
 }
 function run() {
  retryWithBackoff(intercomOnPage, addEventListeners, 4000, errorMessage)();
 }

 exports.addEventListeners = addEventListeners;
 exports.intercomOnPage = intercomOnPage;
 exports.run = run;
 exports.showPrepopulatedMessage = showPrepopulatedMessage;
 exports.trackFrustrationEvent = trackFrustrationEvent;

 return exports;

}({}));

_fs_intercom_frustration.run(); 


Engaging frustrated users from Intercom Contacts After adding the Ragehook for Intercom snippet to the page, frustration events will be sent to Intercom. You can find frustrated Users or Leads by searching for fullstory/rageclick events for example.

ragehooks-contacts.png

This will allow you to then create outbound messages to users and provide relevant follow up.

ragehooks-sendmessage.png

Selecting a specific user will reveal frustration events in the Recent events list.  Selecting the Play in FullStory link will open the user’s FullStory session at the moment of frustration.

ragehooks-trackevent.png

Engaging frustrated users from Intercom Messenger

ragehooks-messenger2.pngIf you’d like to engage customers in real-time, you can configure the snippet to do so.

  • Update the threshold variable to be a number greater than 0. For example, setting the variable to 1 will engage the customer on the first frustration event. You may want to set this to 3 or higher to prevent engaging the user too early.
  • Update the prepopulatedMessage variable with your own custom message. This message will be shown to the user in the Send a message … textarea.

When a customer has experienced a number of frustration events that crosses the threshold, Intercom Messenger will appear with a message asking the customer to reach out for assistance. The snippet will also remember that the customer was engaged and prevent subsequent messages during the current browser session.

Need to get in touch with us?

The FullStory Team awaits your every question.

Contact us