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:
Add a class to the <body> tag of the page, such as:
<body 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.