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?

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.

Answer 2

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

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

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.

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

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")'
              });
          });