Unread Message Indicator

In this tutorial we are going to setup an unread message indicator for Memberchat within Webflow.

Design your indicator

First of all, decide where you want your indicator to be displayed at.

In our example we add the indicator to one of the links in website header. We set that link's position to "relative" and add a text block with a class "mc-indicator" in position "absolute" aligned to upper-right corner of the link element.

Next we style the indicator in the way that it looks good in our design. You can follow the design presented in the video tutorial or have a look at our demo projects.

Add ID to the element

To make things work you need to add an ID to your indicator element.

Go to element settings and set it's ID as "memberchat-info".

ID setup for indicator element

Setup class for Unread state

Next, set your indicator's element class to display "none" to make sure it is not shown when page loads.

Indicator's display is set to None

When there are unread messages, Memberchat will automatically add a class "unreaded" (yeah misspell, but it works like that already🤷) as a combo class and set display to "block" or "flex" etc according to your design so that the indicator becomes visible with a combo class. In our example we set display property as "flex".

Combo class with visible display state

Add Memberchat Script

To make sure that everything works, you need to include Memberchat script on every page, where you put indicator. If you have it in your header, it makes sense to add Memeberchat script to global custom code in your Webflow project settings. Be careful not to have it set twice in project settings and page's custom code.

That's all! Publish your website and test.