Commenting

How to add commenting to Webflow

Now that you have signed up to Supersparks, authorized your site, and navigated to the editor screen for our commenting product, you can get started with the installation.

1. Copy & Paste Component

You can select from a wide range of styled and unstyled Webflow components with a comment form section and form. If none are your cup of tea, you can always adapt them in the Webflow Designer.

After selecting, click on the copy button and paste it (using cmd + v or ctrl + v) into the static or CMS collection template page you would like to enable commenting on. ⚠️ Please note, pasting components will not work on Safari ⚠️.

2. Paste Code Snippet

The second step is to copy and paste the Supersparks' script and paste it inside the <head> tag of the page settings for the page you are adding commenting to.

3. Adapt design

Now the fun begins! In the Webflow Designer you can adapt the design of every aspect of the comment section and form. Please note, classes or attributes starting with 'supersparks' or 'sparks' are required for the Supersparks app to function, so please avoid renaming or removing them.

4. Publish And Test

Publish your Webflow site and you can begin adding test comments to your live site! In case you encounter any issues, be sure to take a look at this article or reach out to us at hello@supersparks.io .

Member Posting

By default, all components come pre-installed with guest name and email inputs. To allow members to post content and display their profile details (eg. name, username, profile image, etc) with their content, be sure to check out our help center guide for memberships.

Extra Settings & Features

Now that the basics are done, you can get started moderating content, updating your settings, and adding additional features. Most components come pre-installed with extra features, but there are some leftover that you can add, including: load more pagination, syncing rating and total comments into a CMS collection, loading animation, comment / review upvoting, and more. Each extra feature also includes a step-by-step guide and short video tutorial in the Supersparks editor 💪.

Video Tutorial

// Optional: Add this CSS to your project's custom code section