How to hide the Intercom chat widget in specific pages in a single page application (SPA)?

Question

Consider a single page application written in vanilla JS (to avoid framework-specific answers).

I have an app in which I load Intercom by default, but I want to hide the widget in specific pages.

That should be doable from Intercom itself, as shown in this article in their help center, but it doesn't really work in single page apps - the widget is shown no matter what is configured in Intercom.

One option would be to find the widget on page and hide it manually for the given pages, but that feels, sounds and tastes like a hack (it requires re-enabling the widget when going back to page where the widget is supposed to appear).

So, is there any good practice on how to do it for SPAs?

Unleash

You can conditionally add a CSS class to BODY when you enter the given pages and remove the class when exiting the given pages. Then you can target the Intercom widget with a CSS selector and make it display: none – Girish

@IVOGELOV that's pretty much what I said about what feels like a hack. Making it with CSS selectors instead of js doesn't make it any better. – Unleash

Answer 1

If you want to hide the intercom launcher programmatically, you can do this with the update command.

To hide:

Intercom('update', {
  "hide_default_launcher": true
});

And to show it again (when your next page loads, or the event is triggered that should show it).

Intercom('update', {
  "hide_default_launcher": false
});

I used this exact technique in an angular SPA to hide it on screens where it was obscuring some buttons.

Rootstock

Tip: it is worth checking that Intercom exists on the window object before trying to access it ("Intercom" in window), because some users will have browser extensions that block the Intercom script from being downloaded. Doing this check will save you an error at runtime. – Quadriceps

What would the full script be? – Loireatlantique

@Loireatlantique if (window.Intercom) window.Intercom('upda... or if (typeof window.Intercom !== 'undefined') ... – Katmandu

Answer 2

Intercom('update', {
     "hide_default_launcher": true
});
$(".helpSupport").once().on("click", function() {
     Intercom('update', {
        "hide_default_launcher": false
     });
      Intercom('showMessages');
});

Secondly

Answer 3

Put this code when you load your user data, and set your widget visibility default

// Intercom logged in user variables loader
(<any>window).Intercom("boot", {
    app_id: "abc",
    name: user.username,
    email: user.email,
    created_at: moment(user.addedDate).unix()
  });

// Hide messenger widget after loading user variables
// Will show it manually in specific pages
if ((<any>window).Intercom) (<any>window).Intercom("update", {
     "hide_default_launcher": true
});

Add this code in your guard or navigator to show/hide it in all pages as per your defaults

// Hide messenger widget for all pages by default
// Will show it manually in specific pages
if ((<any>window).Intercom) (<any>window).Intercom("update", {
     "hide_default_launcher": true
});

Then show/hide it in specific pages

ngOnInit()
{
    // Show messenger widget for current page
    // This code will override the default one in auth-guard/navigator
    if ((<any>window).Intercom) (<any>window).Intercom("update", {
     "hide_default_launcher": false
    });
}

Use this link if need to see all boot/update attributes https://developers.intercom.com/installing-intercom/docs/javascript-api-attributes-objects

Armchair

Answer 4

I call this piece of code, when i call my component.

window.Intercom('update', {
    hide_default_launcher: false,
  });

Exemple:

const MyComponent = () => {
     window.Intercom('update', {
        hide_default_launcher: false,
      });

  return (
<div>...</div>);
};

The downside is that you have to set hide_default_launcher to true when you want the widget appear next time.

Coagulate

Answer 5

You can include/exclude pages in your intercom settings based on the current page url, which works for our SPA. The instructions are in the article you linked to in your question, under "Show the Messenger launcher to select website visitors".

• Go to messenger settings > control your inbound conversation volume
• Select 'visitors who match certain data'
• Select 'add data' and add the attribute 'current page URL' to define a page where you do/don't want to show the intercom launcher

Loot

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Parlor

This only works on page reloads of the SPA. Which, the whole point is to not reload the data. I'm assuming it doesn't pay attention to browser route events since it only matters based on what page is initially landed on. – Lightly

Answer 6

The right approach is to use this instruction

https://www.intercom.com/help/en/articles/189-turn-off-show-or-hide-the-intercom-messenger

And I used it until it worked. And after some time intercom started ignoring the option 'hide_default_launcher'. So I disabled it by disabling its loading.

          await page.route('https://widget.intercom.io/**/*', async route => {
              await page.evaluate(() => {
                  if (window && (window as any).intercomSettings) {
                      // Disables the Intercom Chat by stating the "hide_default_launcher" as true
                      (window as any).intercomSettings.hide_default_launcher = true;
                      (window as any).Intercom = () => {
                          console.log('intercom function disabled');
                      };
                      (window as any).intercomInstance = () => {
                          console.log('intercom instance disabled');
                      };
                      console.log('disabling intercom instance');
                  }
              });
              await route.fulfill({
                  status: 200,
                  contentType: 'application/javascript; charset=UTF-8',
                  body: 'console.log("intercom source disabled")'
              });
          });      

Elvera