How can I add ratings to the Webflow CMS?
TL;DR
- Choose a third-party rating plugin (e.g., Elfsight or Refokus), embed its widget in your CMS Collection using an Embed element.
- Add a numeric field in your CMS to store ratings and use star icons with conditional visibility to display them.
- To allow user-submitted ratings, use external tools (e.g., Typeform + Zapier) and the Webflow API for data updates.
To add ratings to the Webflow CMS, you need to combine Webflow’s CMS collections with third-party tools or custom embeds, since Webflow doesn't support native rating functionality.
1. Use a Rating Plugin (Like EmbedSocial, Elfsight, or Refokus)
- Choose a tool that supports star ratings (e.g., Elfsight Star Rating, EmbedSocial, or Refokus Ratings).
- These tools typically offer customization and let you integrate with Webflow via embedded code or integrations.
- In your CMS Collection Page or Collection List, embed the widget using an Embed element in the Webflow Designer.
2. Add a Field for Rating in the CMS
- Go to CMS > Collection Settings.
- Add a new field of type Number or Plain Text to store the rating value (e.g., “Average Rating” or “User Rating”).
- Populate this field manually or via an external script or form.
3. Display Star Ratings Visually
- In the CMS Collection Page, use conditional visibility or custom divs to show stars based on the rating value.
- A simple approach:
- Use 5 star icons (SVG or image).
- Bind their visibility to your numeric rating field (e.g., show 3 out of 5 stars if the rating is “3”).
4. Enable Users to Submit Ratings (Optional)
- Webflow doesn’t allow users to update CMS items directly, so for user-submitted ratings:
- Use third-party form tools like Typeform + Zapier or Make (Integromat) to collect and compute average ratings.
- Push the updated average back into the CMS field using an external solution like Webflow API + automation tool.
5. Use the Refokus Rating Cloneable (Developer Friendly)
- Refokus offers a free, Webflow-native Rating component that stores rating data in local storage or connects via JavaScript.
- Search “Refokus Ratings Webflow” and clone the project to adapt their implementation.
Summary
To add ratings in Webflow CMS, embed a third-party star rating tool or manually build a visual system tied to a numeric CMS field. While Webflow can display static or computed ratings, collecting dynamic user input requires external tools or custom scripts.