Activating Resource Center by UI element
The Resource Center support article states "You can also choose to activate your Resource Center by clicking on an existing element in your application."
If we do this, is it correct to assume we lose the alert badge notification inherent to the built-in badges? Is it possible to retain the alert functionality?
4
Comments
Hey Eric Miller, the badge alert still shows up for new announcements even if you target the RC to an element but you really aren't able to control where the numbered badge alert (or maybe there's a way to do it with custom code) shows up. Example below where I targeted the "Charts" element on my page.
Thanks Angus Yang for the info and demo.
We tried this out in our app and does work as you described and like you showed the alert badge is to the top left and not moveable. That's not the ideal location for us from a UX perspective. Any suggestions on how custom code could be leveraged here? We don't use the Global CSS styles and we don't use the Classic designer. Would a dummy customer code module in the RC be able to handle that in some way?
I just tried poking around but it doesn't look possible without Global CSS or Classic Designer & transparently, I'm not 100% sure how it would work there either.
Here's a related feature request to reposition the badge alert if you want to follow.
We're having the same issue where the alert badge on the top left of a targeted element doesn't work well. We follow the standard pattern of using badges on the top right for things like notifications and this results in the Pendo badge overlapping ours. Really wish there was a placement or location feature on alert badges for target elements...
We're experiencing the same issue. Is it possible to hide the Alert badge?
We were able to adjust the size and location of the alert badge by adding some lines to the Global CSS via the Classic Designer. Kind of an intimidating workaround, but it got us the look we needed.
If it helps anyone, once we were able to re-enabled the Classic Designer, this is the custom CSS I used to position the alert badge where we needed it (similar to Dan Verwolf's but on the top right)
I used the ID of our custom element (button) for more specificity, and !important (shamefully)
#btn-toolbar_help .pendo-resource-center-badge-notification-bubble {left: auto !important;
right: -8px !important;
top: -2px !important;
height: 20px !important;
width: 28px !important;
}
#btn-toolbar_help .pendo-notification-bubble-unread-count {
font-size: 12px !important;
}
Thank you for sharing Kyle Ledbetter!
Dan Verwolf may we see your CSS?
brandon Sure thing! Here's what worked for us. Someone smarter than me actually wrote it.
Dan Verwolf nice! :) Appreciate you both.
How do we get to the Classic Designer?
What if we don't have the classic designer (members in Pendo after 2019)? Is there another alternative?
Noa Porat Jimmy Hiller i was able to get access to the Classic Designer by talking to support quickly
Dan Verwolf does your customization retain the animated radiating rings around the notification bubble?
Eric Miller Looking at it again, I don't think my custom CSS includes the animated rings. I would imagine its possible for a CSS guru to add that in there, but I wouldn't know where to start. If you ever find out, share with us here!
Dan Verwolf I came across this post which reveals the animation CSS, I wonder if that could be leveraged on a target element?
https://support.pendo.io/hc/en-us/community/posts/4407862760987-How-do-I-turn-off-the-announcement-notification-pulse-effect-
if you do target an element for the resource center, a crucial step to help position the notification badge is to add the css rule "position: relative" to the element you have targeted. combined with overriding the positioning using global styles (like Dan Verwolf suggested a year ago) should help you position the button for responsive layouts.
Please sign in to leave a comment.