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".
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.
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".
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.
