Hi everyone 
. Over the past month, I have been sharing a few different use cases for adding user generated content to Webflow sites. For this post, we are going to be looking at how to add comments to your blog.
Why add a comments section to your Webflow blog?
Over the years comment sections have lost some of their allure, mostly because they can be a breeding ground for spammers and trolls. But in 2023, they can still have major SEO & audience engagement benefits on sites, such as:
-
SEO - Increasing time spent on page, more content & keywords to rank for, and ongoing updates to pages without needing to publish new content (Google loves content updates).
-
Audience engagement - More content for your readers to read, questions / feedback from readers can inform ideas for future content, and by creating a sense of community with your audience, it can result in higher retention.
How can I enable comments on my Webflow blog?
Unlike tools like Wordpress, Webflow does not offer native commenting functionality. So the app we are going to use in this tutorial is Supersparks (link below), which can enable comment sections on your blog in 2 minutes, is 100% no-code, and is customizable in the Webflow Designer.
After signing up, you can get started with the installation by doing the following👇
1. Copy and paste a comments component
Copy a component of your choosing in Supersparks and paste it into the CMS collection page of your blog. We recommend the IGN component, which comes pre-installed with nested replies.
a) Select a styled or unstyled component
b) Copy the component to clipboard
c) Paste the component into the blog CMS page in the Webflow Designer
2. Adapt the design of the Webflow comments component
All of Supersparks’ components are customizable in the Webflow Designer, so you can redesign them to your liking or remove any unwanted elements. For example, I can change the form submit button color to blue in the Webflow Designer.
3. Copy & paste code snippet
Copy & paste the code of the Supersparks app into the < head > tag of the CMS’s page settings of your blog and click save.
a) Copy the code snippet from Supersparks
b) Paste the code inside the tag of your page settings
4. Publish your site and test!
Once your site is published, visitors will now be able to write and post comments for your website. Comments will then be unique to each blog post.
5. Manage settings and comments
Once your comment section is live, you can can view, approve, and delete comments from the Supersparks dashboard.
There are also multiple settings that can be custom configured for your comments section. One we recommend is memberships, which allows you to automatically connect registered user data (from Webflow Memberships or Memberstack) with comments. So if a logged in user leaves a comment, data like name, username, and profile image automatically gets displayed with their comments. Logged in users can even delete their own comments! See this feature in action below:
And if you want to avoid spam and offensive content, not only does Supersparks offer a spam filter, but a pre-moderation setting which allows site owners to approve any new comment on your site.
6. Extra functions
In addition to Supersparks membership settings, there are a wide range of extra functions that we encourage you to check out. One of them is the ability to hide & show replies, which enables similar replies functionality to Youtube’s comment section - see an example below of this with Supersparks’ reviews feature:
–
Thanks for reading. For a more detailed tutorial, be sure to check out our Youtube video on this same subject. If you have any questions, you can get in touch with us at hello@supersparks.io