Supersparks
Connect Supersparks with Webflow to add commenting, reviews, community posting, and upvoting through pre-built components and custom attributes.
How to integrate Supersparks with Webflow
Supersparks connects to Webflow through four main methods: a Webflow App for quick configuration, Code Embed components for placing features on specific pages, the Webflow Data API for programmatic access to community post data, and Supersparks custom webhooks for event-driven automations.
Most sites start with the app install and component embeds, then add API or webhook integrations as needed. These methods are independent and can be combined.
Install the Supersparks app
Install the Supersparks Webflow App from the Webflow Apps Marketplace. The app handles site authorization, script injection, and Spark configuration through a dashboard.
After authorizing Supersparks to access your Webflow site, configure your first Spark — a pre-built component for a specific feature like comments or reviews. The Supersparks dashboard lets you set moderation rules, notification preferences, and membership platform connections for Webflow Memberships, Memberstack, or Outseta.
The core Sparks available include:
- Comments and forums support nested replies, built-in notifications, and content moderation, with comments stored in Supersparks' database and forum posts stored as Webflow CMS items
- Product reviews include customizable star ratings, average rating displays, and the option to sync rating data back to CMS collection items for filtering and sorting
- Upvoting and favoriting let members interact with CMS items, comments, and posts, with dynamic sorting by popularity
- Member profiles integrate with Webflow Memberships, Memberstack, or Outseta to display names, avatars, and custom fields alongside community content
The app works with both new projects and existing Webflow sites. You can start from a cloneable template with pre-configured community features, or add components to your existing site through Code Embed elements.
Add components through Code Embed elements
Supersparks components are installed via Webflow's Code Embed element, which accepts HTML, CSS, and JavaScript. This gives you precise control over where community features appear on your pages.
To install a component:
- Configure your Spark settings in the Supersparks dashboard
- Copy the component code, available in styled or unstyled formats
- Add a Code Embed element to your Webflow page
- Paste the component code into the embed
- Customize styling and behavior using Webflow's native tools and the Supersparks dashboard
For site-wide functionality, add the Supersparks script snippet once to your site's \<head> tag through Site settings > Custom code. Individual components then reference this script through their Code Embed elements. You only need one copy of the script per site, regardless of how many Sparks you use.
The main Sparks you can embed include:
- CMS page comment section adds threaded discussions to any CMS template page
- Reviews and ratings displays star ratings with customizable review forms for e-commerce and CMS pages
- Upvoting and following enables member interactions on CMS items
- Audio player plays audio files stored in CMS collections
Components placed on CMS template pages automatically associate with individual CMS items. A comment section on your blog post template creates separate comment threads for each article.
⚠️ Browser note: Safari does not support copying Webflow components during Supersparks setup. Use Chrome or Firefox when installing components.
Access community post data through the Webflow Data API
Community posts created through Supersparks' forum feature are stored as Webflow CMS items. This means you can read, create, update, and delete forum content programmatically through Webflow's Data API v2.
Comments and reviews are stored in Supersparks' own database and are not accessible through the Webflow Data API. This section applies only to community posting (forum) content.
All requests require Bearer token authentication with appropriate scopes (cms:write, cms:read). The core operations include:
- Create collection items with POST /collections/{collection_id}/items to add community posts programmatically
- Update content with PATCH /collections/{collection_id}/items/{item_id} for moderation workflows
- Delete content with DELETE /collections/{collection_id}/items/{item_id} to remove flagged submissions
- Retrieve content with GET /collections/{collection_id}/items with filtering and pagination for custom displays
New CMS items created through the API default to draft state with isDraft set to true. To make items visible on the live site, use the publish endpoint. As of December 2024, Webflow updated its publishing behavior so that live items with isDraft set to true remain published on the live site after a full site publish, giving developers more precise control over item state without accidentally removing live content.
These API operations require developer resources and a working knowledge of REST APIs.
What You Can Build
Supersparks paired with Webflow lets you create community-driven sites where users contribute content, leave feedback, and interact with each other. Every component is fully customizable to match your site's design.
Here are a few examples of what you can build with this integration:
- Product review systems: Add star ratings and customer reviews to e-commerce or CMS pages, with customizable review forms and average rating displays
- Membership community platforms: Create gated forums for paid members or course students
- Directory sites with user reviews: Build tool directories or local business listings with community ratings
- Support forums and knowledge bases: Build Q\&A communities where users ask questions, share solutions, and upvote helpful answers
Frequently asked questions
Start by authorizing Supersparks to access your site through the Webflow Apps Marketplace. Create a new Spark for the feature you want (comments, reviews, or community posting) and set up a CMS collection with the required fields if using community posting. Add the Supersparks script snippet once to your site's tag in Site settings > Custom code. Then copy and paste pre-built Spark components into Code Embed elements on the pages where you want community features. For CMS-driven content like blog comments, place the component on the CMS template page. Optionally, connect Memberstack or Outseta for membership features. The process takes minutes without writing code.
Supersparks supports Webflow Memberships, Memberstack, and Outseta. You can display member names, avatars, and custom fields alongside community content. Select your platform from a dropdown in the Supersparks dashboard and enter connection credentials.
Yes. Supersparks components install through Webflow's Code Embed element, which requires a paid Webflow site plan to function on published sites. Custom code only executes on published sites, not in preview mode. Supersparks itself offers a free tier for staging and testing on Webflow.io domains.
Description
Supersparks is a no-code tool that adds user-generated content to Webflow sites. It supports commenting, reviews and ratings, community posting (forums), upvoting, and audio playback.
This integration page is provided for informational and convenience purposes only.
Flowstar Urgency Countdown Timer
Add deadline-driven countdown timer bars to any Webflow page using Flowstar's no-code app.
Click to Call
Add Smartarget Click to Call to your Webflow site to give visitors a floating phone button that connects them to your team from any page.
Quiz Popup
Connect Quiz Popup with Webflow to embed branching quiz popups that collect visitor data, capture emails, and route product recommendations on your site.
Social Chat Buttons
Connect Social Chat Buttons with Webflow to add floating multi-channel messaging buttons to your site, connecting visitors to over 15 platforms.
Flowstar Customer Testimonials Slider
Connect Flowstar with Webflow to display customer testimonials in slider or grid layouts using the Flowstar app embed or the Webflow CMS API for programmatic control.
Smartarget FAQ
Connect Smartarget FAQ, a customizable FAQ widget, with Webflow to display frequently asked questions on your site and reduce support requests.
Wiremo
Connect Wiremo, a customer review platform, with Webflow to add review collection, photo feedback, and automated review request emails to your e-commerce store.
Superflow
Connect Superflow, a visual feedback and review tool, with Webflow to collect comments, annotations, and approvals directly on your published site.
Corner Ribbon
Connect Corner Ribbon with Webflow to add customizable promotional ribbons that highlight sales, announcements, and offers on your site.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
