Hiding the Helply Widget on Specific Pages for Mobile Devices

If you need to hide the Helply widget on certain pages when viewed on mobile screens, you can do so using CSS. This is especially useful for avoiding overlap.

#🎯 Example Use Case

Let’s say you want to hide the widget on the Communication page:

1. Add a class to the tag of the page, such as:

class="communication-page">

2. Use the following CSS to hide the Helply widget only on mobile screens (max width 768px):

.communication-page #helply-agent-root-container {
  @media (max-width: 768px) {
    display: none !important;
  }
}

✅ Make sure this CSS is included in your main stylesheet or wherever you manage global styles for the page.

#💡 Notes

• You can repeat this pattern for other pages by using different body classes (e.g. settings-page, profile-page, etc.).
• This only hides the widget on mobile. On desktop or tablet, it will remain visible as usual.