Hello Fliplet Community!
CHAT FEATURE NOTIFICATION BADGE IN MENU!
In one eye, I have a code that helps with adding the Badge (little red dot) to the menu of the chat screen when a user gets a message. It works with all the apps I have made, but one!
Steps 1 - 5 will work great on most apps!
The other eye is the Community App, it doesn’t work… Can anyone help with that? (It’s after the 5 steps)
Here is the code for the NON community apps out there:
1. This is for the menu option: Bottom Icon Bar
2. You need to go into the “Global” section of the coding:
3. Paste this code into the JS section:
Fliplet.Pages.get().then(async function (pages) {
var chatPage = _.find(pages, function (page) {
return page.title == 'Chat 3.0 - User filter'
});
if (!chatPage) {
return;
}
const chat = await Fliplet.Chat.init();
const unread = await chat.unread.count();
if (!unread || unread == 0) return;
$('.fl-bottom-bar-menu-holder ul > li[data-page-id="' + chatPage.id + '"]').each(function () {
var $li = $(this);
$li.find('.fl-bottom-bar-icon-holder .fl-menu-icon .fa').html('<span class="notification-badge"></span>');
var $more = $li.parents('ul').find('[data-show-more]');
if ($more.length && $li.index() > $more.index()) {
$more.find('.fl-bottom-bar-icon-holder .fl-menu-icon .fa').html('<span class="notification-badge"></span>');
}
});
});
4. You see in line 3 it says Chat 3.0 - User filter? Replace that with the screen name where your chat is. Notice it matches mine in the example:
It doesn’t matter what the screen is called. What matters is, the JS code and the Screen Name match.
5. Now add this code in the CSS section (What the dot looks like):
/* Notification badge for chat menu item */
.fl-bottom-bar-icon-holder .notification-badge {
background-color: red;
color: white;
position: absolute;
top: -5px;
right: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
z-index: 10;
display: inline-block;
}
/* Hide badge when chat is active */
.fl-bottom-bar-icon-holder.is-active .notification-badge {
display: none;
}
/* Align the badge properly in the menu */
.fl-app-menu .has-notification-badge {
display: flex !important;
align-items: center;
}
HOPE THAT HELPS!
In the other eye, If you are to add this to your COMMUNITY APP TEMPLATE - Something is conflicting as it disables or conflicts with the screen “Groups” where the top row is different groups, and blow is a list of Topics. If you have the codes in your global section the way I mentioned, then you will see that “Groups” no longer functions…
Fliplet Help?