Add fully customizable commenting to a Webflow project. No coding is required; it's maintenance-free and comes with built-in moderation features, permission, user accounts, edit, delete, and reply functionality. Notifications, real-time commenting, and public profiles are in the roadmap.
We recommend starting with one of our cloneables. Click here for the full list of cloneable components.
We recommend starting with one of our cloneables - we've already released one for blog comments, one for live stream comments, and one for video comments. Click here for the full list of cloneable components.
Commenting will be a paid add-on - however, any paid Memberstack apps with at least one comment before January 1, 2024, will have raised limits on the free plan and heavily discounted pricing - for life!
There are something like 60 unique attributes in the commenting UI, so be very careful when updating the HTML structure. Frequent testing will be key to avoiding frustrating debugging sessions.
Each commenting section is called a "Channel" and has an attribute of
data-ms-channel-id="". If the Channel ID is empty, then Memberstack will look to the page slug to decide where to save the comments, and when to load them. Inside of a channel are your posts and threads.
Public Custom Fields
Ensure that custom fields used in your commenting UI are marked as 'public'. This allows you to build your own usernames displayed with comments using the data attributes:
Note: If the field value is empty, the default text in your commenting UI will appear instead.
Ordering Posts & Threads
Utilize the two available attributes to adjust the order as needed.
data-ms-channel-sort="newest" // default is oldest
data-ms-thread-sort="newest" // default is oldest
Use the following attributes to set the maximum number of posts or threads to load at a time.
data-ms-post-load="100" // default 50 & max 100
data-ms-thread-load="100" // default 20 & max 100
Multiple Sections Per Page
If you want to display multiple commenting sections on a single page you'll need to manually set the Channel ID using the
Waiting for Moderation
If you enable moderation settings in the dashboard, or flag a comment as spam/hidden, we will display a message to the commenter. Place the following attributes on a div containing your "Wait for Moderation" prompt. Note there are 2 attributes. 1 for posts and 1 for threads.
Max character count for a post or thread is 5,000 characters.
Formatting is unavailable at this time.
In Memberstack's dashboard, admins can grant 'moderator' roles to members. Moderators have the authority to edit or delete any post, ensuring a clean and positive community environment.
- data-ms-channel="id": Refers to the unique ID of the channel.
- data-ms-channel="name": Represents the name of the channel.
- data-ms-channel="posts": Refers to the number of posts in the channel.
- data-ms-channel="sort": Represents the sort order preference for the channel.
- data-ms-channel="form": Refers to the form for creating new posts in the channel.
- data-ms-post="showThreads": Represents the link to show or hide thread replies for a post.
- data-ms-post="edit": Refers to the button or link for editing a post.
- data-ms-post="delete": Refers to the button or link for deleting a post.
- data-ms-post-delete="show": Refers to the button or link to show the delete section for a post.
- data-ms-post-delete="section": Represents the delete section for a post.
- data-ms-post="content": Refers to the content of the post.
- data-ms-post-edit="content": Refers to the input where the user can edit the post's content.
- data-ms-post-edit="form": Refers to the form for editing the post content.
- data-ms-post-edit="cancel": Refers to the button or link to cancel the edit operation.
- data-ms-post="isModerator": Used to show if a post creator is a moderator.
- data-ms-post="ownerProfileImage": Refers to the profile image of the post creator.
- data-ms-post-creator: Refers to custom fields associated with the post creator.
- data-ms-thread="container": Represents the container where all the replies are shown.
- data-ms-thread="item": Refers to the template for individual thread items.
- data-ms-thread="loadMore": Represents the button or link to load more threads.
- data-ms-form="thread": Refers to the form for creating new threads.
- data-ms-thread="content": Refers to the content input of the thread creation form.
- data-ms-thread-sort: Represents the sort order preference for the threads.
- data-ms-thread="date": Represents the date when the thread was created.
- data-ms-thread="edit": Refers to the button or link for editing the thread.
- data-ms-thread="delete": Refers to the button or link for deleting the thread.
- data-ms-thread-edit="form": Refers to the form for editing the thread content.
- data-ms-thread-edit="content": Refers to the content of the thread being edited.
- data-ms-thread-delete="show": Refers to the link to show the delete section for the thread.
- data-ms-thread="isModerator": Used to show if a thread creator is a moderator.
- data-ms-thread="ownerProfileImage": Refers to the profile image of the thread creator.
- data-ms-thread-creator: Refers to custom fields associated with the thread creator.
Click here to join Slack → https://www.memberstack.com/slack. Once you join, please search "commenting" to join the commenting channel.
- If your custom fields are not working, make sure they are public.