NOTICE - We are sunsetting development on commenting for the foreseeable future. Read the full update.
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.
Getting Started
NOTICE - We are sunsetting development on commenting for the foreseeable future. Read the full update.
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!
Structure/Overview
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="". 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.
- Channel
- Post
- Thread
- Post
- Thread
- Thread
- Post
- Thread
- Post
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.
data-ms-post-creator="Your_Field_id"
data-ms-thread-creator="Your_Field_id"
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
Pagination
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 data-ms-channel="Your_Channel_ID" attribute.
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.
data-ms-post="hidden"
data-ms-thread="hidden"
Link to a Post or Thread
Click the Reply button in your Dashboard → to navigate directly to a comment on your site. If you'd like to style the "Load More" button that appears above your comment, you can add your own button using the attribute data-ms-post=“loadMoreAbove” for posts and data-ms-thread=“loadMoreAbove” for threads.
Constraints
Max character count for a post or thread is 5,000 characters.
Formatting is unavailable at this time.
Creating Moderators
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.
Attributes
ChannelSection
- 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="loadMore": Represents the button or link to load more posts.
- data-ms-post="loadMoreAbove": Represents the button or link to load previous posts.
PostItem
- 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-post="hidden": Refers to the "waiting for moderation" ui.
ThreadSection
- 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-thread="loadMoreAbove": Represents the button or link to load previous 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.
ThreadItem
- 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.
- data-ms-thread="hidden": Refers to the "waiting for moderation" ui.
Feedback
Click here to join Slack → https://www.memberstack.com/slack. Once you join, please search "commenting" to join the commenting channel.
Troubleshooting
- If your custom fields are not working, make sure they are public.
- All of my commenting sections have the same comments! Here's how to fix that.
Comments
0 comments
Please sign in to leave a comment.