# Add unread counter to chats **URL:** \ **Category:** Ask for Help\ **Created:** [October 22, 2023, 12:06pm UTC](https://community.glideapps.com/t/add-unread-counter-to-chats/67183 "2023-10-22T12:06:38Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![ndench](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ndench/32/65501_2.png) [@ndench](https://community.glideapps.com/u/ndench)\ **Post date:** [October 22, 2023, 12:06pm UTC](https://community.glideapps.com/t/add-unread-counter-to-chats/67183/1 "2023-10-22T12:06:39Z")
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: 1. In the chat list where you select which user you’d like to chat with 2. 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: 1. How can I add some sort of unread badge to the tab icon? 2. Is there a way to make my existing unread counter stand out more? ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/3/13a7a006e4251e7862b8bcf57ee49401181de52f.png) ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [October 22, 2023, 12:22pm UTC](https://community.glideapps.com/t/add-unread-counter-to-chats/67183/2 "2023-10-22T12:22:08Z")
> [@ndench](#): > > Read at: timestamp set by pressing a button in the chat 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. > [@ndench](#): > > How can I add some sort of unread badge to the tab icon? 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. > [@ndench](#): > > Is there a way to make my existing unread counter stand out more? 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. ---
**Author:** ![ndench](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ndench/32/65501_2.png) [@ndench](https://community.glideapps.com/u/ndench)\ **Post date:** [October 22, 2023, 12:30pm UTC](https://community.glideapps.com/t/add-unread-counter-to-chats/67183/3 "2023-10-22T12:30:10Z")
> [@Darren\_Murphy](#): > > > [@ndench](#): > > > > Read at: timestamp set by pressing a button in the chat > > 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. 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? > [@Darren\_Murphy](#): > > > [@ndench](#): > > > > How can I add some sort of unread badge to the tab icon? > > 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. 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 🤦‍♂️ > [@Darren\_Murphy](#): > > > [@ndench](#): > > > > Is there a way to make my existing unread counter stand out more? > > 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. Oooh this sounds perfect. I’ve never used Cloudinary before. Where would I start in order to accomplish this? ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [October 22, 2023, 12:48pm UTC](https://community.glideapps.com/t/add-unread-counter-to-chats/67183/4 "2023-10-22T12:48:29Z")
> [@ndench](#): > > 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? Not sure I understand the problem. Wouldn’t your query for unread chat messages exclude those created by the signed in user? > [@ndench](#): > > Oooh this sounds perfect. I’ve never used Cloudinary before. Where would I start in order to accomplish this? Search the Community for Cloudinary, you should find plenty of examples. ---
**Author:** ![ndench](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ndench/32/65501_2.png) [@ndench](https://community.glideapps.com/u/ndench)\ **Post date:** [October 22, 2023, 11:20pm UTC](https://community.glideapps.com/t/add-unread-counter-to-chats/67183/5 "2023-10-22T23:20:57Z")
Ah yes, updating my unread query to limit by user. Can’t believe I didn’t think of that 😅 Thanks for your help! ---
**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\ **Post date:** [October 29, 2023, 11:21pm UTC](https://community.glideapps.com/t/add-unread-counter-to-chats/67183/6 "2023-10-29T23:21:47Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.