Intercom opens automatically when state is completed

If I understood the code correctly, when Intercom finishes loading

react-live-chat-loader/src/hooks/useChat.ts

Line 89 in b802033

if (state === 'complete') return chatProvider.open()

state will be set to complete and Intercom is opened automatically without user interaction.

Call to setting complete state:

react-live-chat-loader/src/providers/intercom.ts

Line 57 in ab41513

setTimeout(() => setState('complete'), 2000)

This is very bad UX since on mobile Intercom pops up and takes the whole viewport when opened. Therefore, without any notice a new screen pops up for the user on mobile. I think it should be out of scope of this package to automatically open the Intercom window without user interaction involved or people calling window.Intercom('show') on their code manually.

Hi @jaska120,

Did you observe this behaviour or is this just from reading the code?

The way loadChat works is that it handles a number of different ways for the loading of the live chat. In the components it is first used to load when idle, however when a user hovers over the fake widget we expedite the loading as they're showing intent to interact and if they click the fake widget then we ensure that we load the provider and open it when it's ready.

Therefore, if you don't interact with the fake widget at all then it wont automatically open.

I actually experienced this in real life.

Here's reproduction: https://60a667ee8ac96f67ceeaf17e--augment-escoot.netlify.app/fi/

When it doesn't happen:

Load the website
Wait for idle period
Intercom is not opened automatically

When it happens:

Load the website
Wait for idle period
Intercom is not opened automatically
Navigate to another page
Wait for idle period
Intercom is now opened automatically without user intenting to open it.

This is somehow related to Gatsby as well since the issue occurs only after navigating to another page.

EDIT: Inspecting network tab on chrome one can get pretty clear picture when open is fired and it is due to fact that setting the state to complete.

@mikedijkstra I know read your comment again and hovering or interacting with the component will open the chat sounds reasonable. When the chat is loaded for first time after idle period finishes, it won't open the Intercom Messenger. However, if the chat was loaded using idle loading for first time, then navigated to another page, idle loading automatically opens the Intercom Messenger on new page. This was demonstrated in my previous comment and seems UX issue to me.

EDIT: On some occasional cases even the initial page load on my reproduction url triggers to open the Intercom without further action of the user.

Hi @mikedijkstra, I work with @jaska120 and tried to find a sequence to reliably reproduce the problem, but it seems very random from an end-user's perspective.

Here's a link to a screen recording (75MB, valid for 7 days): https://wetransfer.com/downloads/31a041b8aa457871c02dedd12de719b220210521130106/566558

There you'll see 34 seconds of no problems whatsoever. Once the chat pops open for the first time, it's very random from there on.

loadChat is an action, which is called when you click on or hover over a fake widget. If it's opening up unexpectedly then it must have something to do with how it's being implemented because it shouldn't called unless a user interacts with it. As you can see in the Intercom component, the loadChat function is only called inside onClick and onMouseEnter.

Are you able to share an example project with the same setup? It's hard to diagnose why this is behaving differently without understanding how it's being implemented.

This is somehow related to Gatsby SRR not unmounting components when added to wrapRootElement compared to way how Next.JS persist state between route changes.

However, with a slight performance decrease (still so little comparing not using this lib) I moved the provider lower done in the tree to ensure the provider will be remounted on route change. This seems to resolve the issue.

The issue still remains with Gatsby but since it won't bother us at this time I am closing this issue. Thanks @mikedijkstra for your support and your work is amazing!

I'm also hitting this exact issue after putting the Provider in the Next.js _app.js. Intercom keeps opening every couple settings, even when a user explicitly closes it.

That unfortunately is a deal-breaker for using this package 😭 How did you manage to resolve this @jaska120?

I think I fixed it by setting key={location.pathname}, however it's really difficult to verify as it only happens randomly. 😕

@mxstbr Sorry for the delay. I did "fix" it by moving Provider lower down in the tree. Basically, the parent component for LiveChat component (eg. Intercom) is now the LiveChatProvider on our setup. This ensures that the provider will be remounted while navigating and therefore the state I am mentioning on my first post will get reset.

We should, however, be able to to add the Provider higher up in the tree, but it is a workaround for now until somebody has time to fix the state issue especially on Intercom component.