Get Menu item to show if there are 'unread' without user going to page

Help Center Get Answers
1

Hi all,
I have a customer that now has messages, and chat tabs at the top, it would be great to show a * on the tab if there are unread messages or new chats.

Just wondering if anyone had needed this or has a direction to point me in?

Here is a part of the menu at the top but the user has to go into page frequently to see if there is anything new.

Screenshot 2023-08-01 at 10.34.57 pm

If it said CH* in the tab if there were new chats they had not seen that would save them time.

Any ideas?

2

Try adding a Count field to the user record, which counts the number of unread messages connected to the user. Then you can use Knack’s Javascript utility functions such as Knack.getUserAttributes() to retrieve the value of this field, and show/hide a star with HTML. This approach assumes Knack has a record for each message/chat. If not, then you’re likely using some third-party chat solution like Intercom or CometChat, in which case you’d need to use their webhooks.

1 Like
3

Thanks, I have a Yes/No field for each user that indicates if there are unread (field_1199), this now but still I can’t work out how to append a * to just one element of the Menu tab (app-menu-list ?)

// Does the user have any unread chats
UnreadChats();
function UnreadChats() {
 Knack.getUserAttributes().values.field_1199;
}

It might even be easier to append a text field (where the users have * if they have unread and its blank if they don’t have unread ) to all occurrences of that menu list item 4.

But I cant see how to isolate one tab in particular. And I can’t use is_active like I would with CSS to isolate, say the active tab, or #app-menu-list li 4

Do I need to get the element by tag name maybe? document.getElementsByTagName(‘app-menu-list’)

I will keep experimenting!

4

You can try selecting it by slug (page).

For example, see #my-page in the code below.

$(document).on('knack-scene-render.any', function (event, scene) {
  const $tab = $('#app-menu-list [data-kn-slug="#my-page"]')
  $tab.append('<span>*</span>')
})
1 Like