Activating Resource Center by UI element

Comments

11 comments

  • Avatar
    Angus Yang

    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
    Comment actions Permalink
  • Avatar
    Eric Miller

    Thanks Angus Yang for the info and demo.

    0
    Comment actions Permalink
  • Avatar
    Eric Miller

    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
    Comment actions Permalink
  • Avatar
    Angus Yang

    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
    Comment actions Permalink
  • Avatar
    Kyle Ledbetter

    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
    Comment actions Permalink
  • Avatar
    Will Kelly

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

    0
    Comment actions Permalink
  • Avatar
    Dan Verwolf

    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.

    0
    Comment actions Permalink
  • Avatar
    Kyle Ledbetter

    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
    Comment actions Permalink
  • Avatar
    brandon

    Thank you for sharing Kyle Ledbetter!

    Dan Verwolf may we see your CSS?

    0
    Comment actions Permalink
  • Avatar
    Dan Verwolf

    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;
    }
    0
    Comment actions Permalink
  • Avatar
    brandon

    Dan Verwolf nice! :) Appreciate you both.

    0
    Comment actions Permalink

Please sign in to leave a comment.