Pure JS Intercom Facade

Intercom.... so slow. If you are loading Intercom using GTM well then you it is 2x slower. As a front end dev always trying to make sites load fast and perform well Intercom has been challenging to contend with. An easy fix is to load UI that looks and behaves like Intercom but waits to initialize the heavy scripts until the user has interacted with it. Many of the solutions I have come across point out that if your business uses timed messages then their solution won't work and you'll need to create a bypass on your own. Well I have created one so you don't have to 😁

Script Configuration

javascript

const config = {
    appId: 'INTERCOM_APP_ID',
    bypassUrls: ['/add-list-of-urls-intercom-must-load-on'],
    facadeContainerClass: 'companyname-intercom-facade',
    intercomLogo: 'INTERCOM_SVG_LOGO',
    facadeColor: 'pink',
    siteIsSPA: true,
};
  • appId In order to use Intercom you need an appId so paste it in as a string.
  • bypassUrls If the array is empty which it can be then the facade will load on every page this script runs on. If you do need to run Intercom on specific pages then add relative paths to this array.
  • facadeContainerClass This is a unique class to guard against css collision.
  • intercomLogo It is important to match the intercom logo provided by intercom. You can also grab an svg from Font Awesome.
  • facadeColor This should match the same color as your brand color used in Intercom.
  • siteIsSPA If your site is traditional and each page navigation creates a page refresh then you can change this value to false.

Google Tag Manager Intercom Facade

The following was designed to be used in Google Tag Manager on a SPA website. In my situation GTM is triggered on page change and on initial page load. Another thing I should point out here is GTM will minify your code for you so there is no need to minify your code before you paste it into your html tag.

Leave a comment