Safe-area issue in reactjs pwa

Question

I'm using Intercom in my React.js PWA,but the tool's default styles don't account for 'safe-area's, causing issues on devices with notches, such as the iPhone. Is there a solution for this? //padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); Adding the style to the “body” element would solve the problem, but custom styles aren’t available.

Emilygav · Accepted Answer

Hey there ​@Goli, Emily here from Support Engineering at Intercom 👋🏼If you're experiencing issues with the Intercom widget placement on your React.js PWA, particularly on devices with notches,you can adjust the size of the messenger on the screen.Since you're not using a native SDK and are instead packaging your web app, you can add safe areas to the top of Intercom using CSS to get around this issue. This approach allows you to account for the 'safe-area' insets on devices like the iPhone. However, it's important to note that this type of customization is not a native feature of Intercom, and as such, it falls outside the scope of Intercom's standard support.Hope this helps! 💪🏼

Goli · Answer

Hey there ​@Goli, Emily here from Support Engineering at Intercom 👋🏼If you're experiencing issues with the Intercom widget placement on your React.js PWA, particularly on devices with notches,you can adjust the size of the messenger on the screen.Since you're not using a native SDK and are instead packaging your web app, you can add safe areas to the top of Intercom using CSS to get around this issue. This approach allows you to account for the 'safe-area' insets on devices like the iPhone. However, it's important to note that this type of customization is not a native feature of Intercom, and as such, it falls outside the scope of Intercom's standard support.Hope this helps! 💪🏼Hey Emily, thanks for your answer!I can't use native SDKs. The widget is rendered inside an iframe as a fixed full-width, full-height element, and it doesn't account for safe-areas. Since there's no straightforward way to access the iframe from outside, does this mean I can't use the widget in my pwa?

Join the Intercom Community 🎉

Intercom Customers and Employees

Login to the community

Intercom Customers and Employees

Scanning file for viruses.

This file cannot be downloaded