I’ve added the chat feature into my app, and I’d love to have an unread message badge in the app. Preferably it would show the number of unread messages, but just an indicator that unread messages exist would be fine too.
I’d like this indicator to be in two places:
In the chat list where you select which user you’d like to chat with
On the chat tab icon at the bottom
I’ve managed to do item 1 by using a series of user specific columns:
Read at: timestamp set by pressing a button in the chat
Unread chats: query finding chats created after the read at timestamp
Message count: rollup count of total chats
Unread count: rollup count of unread chats
Unread badge: if read at is empty then message count else unread count
Unread label: template (UNREAD_COUNT) USER_NAME
Label: if unread badge > 0 then unread label else user name
As you can see, this is quite a lot of work. The end result is not perfect, I’d like the unread counter to be a different color to stand out, but this gets the job done.
However, I cannot find a way to add a badge or customize the tab label in any way.
So, in summary I have two questions:
How can I add some sort of unread badge to the tab icon?
Is there a way to make my existing unread counter stand out more?
Is this a button you’re expecting a user to click to indicate they’ve read a message?
Rather than relying on the user to do that, you could probably set the timestamp as part of the action when the user opens the chat.
The only way you might be able to do this is with some CSS, but that requires at least a Business Plan, and I’m not even sure it would be possible.
If it was me, I’d probably incorporate the counter into the chat image using Cloudinary. You could dynamically stick a liitle counter in the upper corner of the image. There is a bit of a learning curve with Cloudinary, but it’s well worth the effort.
Yes it is currently a button the user needs to press. A custom action when they open the chat is a much better idea. The problem I have is sending a chat will create a new message with a timestamp greater than the read at property. So as soon as you send a message, the chat becomes unread again. How can I also trigger the custom action when sending a chat?
Ah, that explains why I can’t find the CSS option I keep reading about. I assumed it was removed when Glide Pages was released
Oooh this sounds perfect. I’ve never used Cloudinary before. Where would I start in order to accomplish this?
