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