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?

 

2

Comments

11 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.

    1
  • Thanks Angus Yang for the info and demo.

    0
  • 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? 

    0
  • 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.

    0
  • 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... 

    0
  • We're experiencing the same issue. Is it possible to hide the Alert badge?

    1
  • 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.

    1
  • 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; 
    }
    1
  • Thank you for sharing Kyle Ledbetter!

    Dan Verwolf may we see your CSS?

    0
  • brandon Sure thing! Here's what worked for us. Someone smarter than me actually wrote it.

    /* ------------------------------
     * -- Your Custom Classes/IDs ---
     * ------------------------------ */
    .pendo-notification-bubble-unread-count {
    top: 52% !important;
    color: #f0f0f0 !important;
    width: 28px !important;
    font-size: 11px !important;
    text-align: center !important;
    right: -6px !important;
    font-family: Roboto !important;
    }

    .pendo-resource-center-badge-notification-bubble {
    line-height: 0px !important;
    height: 16px !important;
    width: 16px !important;
    background-color: #458128 !important;
    top: 24px !important;
    left: 25px !important;
    outline-color: #f0f0f0 !important;
    outline-width: 1px;
    outline-style: solid;
    }
    1
  • Dan Verwolf nice! :) Appreciate you both.

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post