Intercom on mobile removes some styles from our website

  • 22 August 2023
  • 6 replies

Problem description:

On our website, after integration with Intercom, our some components lost CSS styles. 

Problem occurs only on mobile devices.

Steps to reproduce:

  • Open Intercom chat window
  • Close Intercom chat window
  • Move between pages

Tech Stack:

  • NextJS 
  • MUI

Best answer by Eden 24 August 2023, 22:01

View original

6 replies

Userlevel 3

Hey @alexforasoft 👋 Eden from the support engineer team here.


In the past, we’ve seen that Material UI can cause issues with the Messenger. Typically these issues have been resolved by disabling focus traps. In the Material UI docs linked, they mention that the default focus trap can cause issues with chatbots, which may be the reason you are seeing this issue. If that doesn’t work for you, we can escalate this as a conversation with the Support team! 👍

Hello, @Eden! It wasn't help me. Maybe has another reason ?

Userlevel 3

@alexforasoft Thank you for giving that a try! This may take additional investigation, so I have escalated this to the Support team as a conversation. They will get back to you in the conversation as soon as possible. 👍

I am facing a similar issue.

Upon closing the Intercom messenger while using, it disrupts the styling of Novu.

Additionally, Novu utilizes the Mantine library, so my problem may be connected to this issue.

Userlevel 2
Badge +3

Hi @Tanuj Soni -- Cam from the Intercom Support Engineering team here!

As an update on this issue - following further discussion it was found that the cause of the original posters issue was not actually related to Material UI and Messenger directly, but rather with some element styling seperate to Messenger/Intercom on this occasion. 

I can see that you’ve had a chat with one of my teammates in Messenger to discuss your particular issue more directly which is great 👍