Unread Message Indicator

Hello everyone! This is Igor from LikePay.dev.

In today's tutorial I will show you how to add an indicator of unread messages to any element on your site and display how many unreead messages your member has. All done simply within Webflow and without any code, of course.

Here is a video walkthrouth:

‍

Build your indicator

First of all, you will need to create a button linked to a chat page (I made it look like an icon) and put the indicator element inside (or actually it can be wherever you want). In my example I created a simple text block and positioned it as absolute to the button link block. I also put a default value of "0" inside to fill the space.

Setup Classes

When you finished designing your indicator, we need to use a css class to control the state of indicator between "You have an unread message" and "No new messages".

When member has an unread message, a css class named "unreaded" will be added to the element automatically.

‍

So you need to make sure that your indicator is invisible without this class and visible when the class is added.

Setup an element ID

Finally, to make everything work, you need to set an ID for the indicator element. it should be "memberchat-info".

‍

That's it! Publish and test it out!