How to add user reviews & ratings to a directory site built with Webflow!

Hey everyone! :wave:. Here’s a new way you can add reviews & ratings to a directory website built with the Webflow CMS, which can help improve your site’s user engagement and SEO. Through this solution, you can:

:art: Use the Webflow Designer to customize every aspect of your reviews section
:star: Dynamically display an average rating on each CMS item’s page
:webflow_heart: Import average rating & total reviews data into your directory collection and create a custom schema.
:muscle: Ensure reviews don’t count towards CMS item limits.

How can I enable user reviews for a Webflow directory?

The tool we are going to use in this tutorial is Supersparks, which can enable reviews on your Webflow collection template pages in 2 minutes and is 100% no-code.

If you want to test Supersparks out first, check out the example we set up for this tutorial. After signing up and authorizing Supersparks to your site, you can get started with the installation by doing the following👇 - here is also a video tutorial you can follow alone with :

1. Copy and paste a reviews component

The first step is to copy a component of your choosing and paste it into the collection template page of your directory site. You can choose from a wide range of unstyled and styled components, some of which come pre-installed with nested replies to enable different threads of conversations around user reviews on your site.

2. Adapt the design of the Webflow reviews component

All of Supersparks’ components are customizable in the Webflow Designer, so you can redesign them to your liking or remove any unwanted elements. You can change the star icons!

3. Copy & paste code snippet

Copy & paste the code of the Supersparks app into the tag of your collection template page’s settings and click save.

4. Publish your site and test!

Once your site is published, customers will now be able to write and post reviews for directory items on your website. Reviews and average ratings will then be unique to each CMS item’s url.

ScreenRecording2024-11-12at11.08.17PM-ezgif.com-video-to-gif-converter

5. Moderate reviews

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

How can I create a custom schema for my Webflow directory’s items?

Once you’ve set up your reviews section in the previous steps, you can sync the average rating & total reviews data required for a Schema into your directory’s collection via Supersparks - we recommend watching this tutorial for the next steps.

After creating custom fields for the average rating & total reviews in your directory’s collection, go to Supersparks to switch on the setting and connect your Webflow directory collection and custom fields. Once configured, data will automatically sync into and publish your directory whenever a new review is added.

You can then get started creating a custom Schema. There are many ways to customize a schema markup, but as a starting point, we suggest pasting one of the schema examples from Google’s siite into the body of your collection page’s settings for whichever type is relevant to your site. Using the ‘add field’ function, connect custom fields to relevant pieces of data in the schema, including the average rating and total reviews data for the aggregateRating section like in the below example:

After publishing, Webflow will create a schema for each directory item by dynamically pulling in the relevant field data for each CMS item.

How can I preview average rating data inside the collection list element?

Now that average rating and total reviews data is being synced, you can show this data inside Webflow’s collection list element, so users can see the rating of each item before clicking on them. This also unlocks the ability to allow users to sort CMS items by average rating and reviews, using an app like Finsweet attributes. Below is an example of this:

Extra reviews features and settings

There are also multiple settings & extra functions that can be custom configured for your reviews section. Our most notable extra feature is memberships, which allows you to automatically connect registered user data (from Webflow, Outseta, or Memberstack) with reviews.

By default, the reviews component allows guests and logged-out visitors to post content. However, with our memberships feature enabled, logged-in users can have their chosen data (e.g., name, username, and profile image) displayed alongside their reviews. Below is an example of a member only reviews section :point_down:

By creating a more social dynamic around reviews, like you would see on Goodreads or Letterboxd, you can create a community experience that transcends being just a directory and gets users to come back to to your site.


And there you have it. Through this solutions integration with the Webflow Designer, you have the power to customize the design of the reviews section to match the UI & branding of the rest of the site, instead of embedding a widget with cookie cutter design. In case you are interested in seeing an example of a successful directory community built with Webflow, be sure to check out the article below:

If you have any questions, get in touch with us at hello@supersparks.io

2 Likes