How to add comment section to your CMS blog in minutes.

Engage with your audience and improve the SEO of your blog posts or articles by adding a comment section to your CMS pages.

IN THIS TUTORIAL

Why add comments 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, which can enable comment sections on your blog in 2 minutes, is 100% no-code, and is customizable in the Webflow Designer.

Enable commenting on your Webflow blog or CMS pages with member & guest commenting. Customize the comments section in the Webflow designer. No code needed!

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.

Screen Shot 2023-11-17 at 1.09.36 PM
Select a styled or unstyled component
Screen Shot 2023-11-17 at 1.09.54 PM
Copy the component to clipboard
Screen Shot 2023-11-17 at 1.11.05 PM
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.

Screen Shot 2023-11-17 at 1.11.30 PM


3. Copy & paste the Supersparks 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.

Screen Shot 2023-11-17 at 1.12.08 PM
Copy the code snippet from Supersparks
Screen Shot 2023-11-17 at 1.12.34 PM
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.

ezgif.com-gif-maker (22)


5. Manage settings and comments

Once your comment section is live, you can can view, approve, and delete comments from the Supersparks dashboard.

Screen Shot 2023-11-17 at 2.13.33 PM

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:

ezgif.com-gif-maker (20)
Member commenting example

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:

ezgif.com-gif-maker (21)

Enable user generated content on Webflow!

Power-up your no-code tools today!