# How to build ratings and reviews in Bubble - Tool: Bubble - Difficulty: Beginner - Time required: 25-30 min - Compatibility: All Bubble plans - Last updated: March 2026 ## TL;DR Build a multi-criteria review system in Bubble where users rate content on multiple dimensions like quality, value, and service. This tutorial covers creating the review data model with multiple rating fields, building the submission form with star selectors, displaying aggregated scores, and adding verified purchase badges and helpful votes on reviews. ## Overview: Building a Content Rating and Review System Multi-criteria reviews give users and businesses more nuanced feedback than a single star rating. This tutorial builds a review system with ratings on multiple dimensions, star selectors, aggregated score displays, verified badges, and helpful/not helpful voting. ## Before you start - A Bubble account with content or products to review - User registration and login set up - Basic understanding of Repeating Groups and Custom States ## Step-by-step guide ### 1. Create the review data model Create a Data Type called Review with fields: Content_Item (your reviewable type), Reviewer (User), Quality_Rating (number 1-5), Value_Rating (number 1-5), Service_Rating (number 1-5), Overall_Rating (number 1-5), Comment (text), Created_Date (date), Is_Verified (yes/no), Helpful_Count (number), Not_Helpful_Count (number), Helpful_Voters (list of Users). Create an Option Set called RatingDimension: Quality, Value, Service, Overall. **Expected result:** A review data model supporting multi-criteria ratings, verification, and helpful votes. ### 2. Build star rating selectors For each rating dimension, create a row of 5 star icons. Use a Custom State called [dimension]_rating (number). When star N is clicked, set the state to N. Add conditions on each star: When [dimension]_rating >= this star's number → show filled star icon, else show empty star. This creates an interactive star selector. Repeat for each dimension (Quality, Value, Service, Overall). **Expected result:** Interactive star rating selectors for each dimension that visually fill stars on click. ### 3. Display aggregated scores On the content item page, show aggregate ratings. Search Reviews for this item, then calculate each dimension's average: Reviews:each item's Quality_Rating:average. Display as a number and visual bar. Show the total review count. Add a breakdown showing how many reviews gave each star count (5 stars: X reviews, 4 stars: Y reviews). Pre-compute average ratings as fields on the content item for performance. **Expected result:** Aggregated multi-dimensional scores displayed with visual bars and review count. ### 4. Add verified purchase badges When creating a review, check if the reviewer has a completed order containing this item. Search Orders where Customer = Current User AND Status = Completed, then check if any LineItem has this Product. If found, set Is_Verified = yes on the Review. Display a Verified Purchase badge (green checkmark icon + text) next to verified reviews using conditional formatting. > Pro tip: For platforms needing advanced review moderation, fraud detection, or sentiment analysis, RapidDev can help implement AI-powered review quality systems. **Expected result:** Reviews from verified purchasers display a trusted badge automatically. ### 5. Implement helpful votes on reviews Add Was this helpful? text with thumbs up and thumbs down buttons below each review. Thumbs up workflow: add Current User to the review's Helpful_Voters list and increment Helpful_Count. Thumbs down: increment Not_Helpful_Count. Add a condition: both buttons not clickable when Current User is in Helpful_Voters (prevents double voting). Sort reviews by helpfulness: Helpful_Count descending as a sort option. **Expected result:** Users can vote on review helpfulness, and reviews can be sorted by helpfulness score. ## Complete code example File: `Workflow summary` ```text REVIEW SYSTEM — WORKFLOW SUMMARY ================================= DATA TYPE: Review Content_Item, Reviewer (User), Quality_Rating, Value_Rating, Service_Rating, Overall_Rating, Comment, Created_Date, Is_Verified, Helpful_Count, Not_Helpful_Count, Helpful_Voters (list) STAR SELECTOR: 5 star icons per dimension Custom State: [dimension]_rating (number) Click star N → set state = N Condition: filled when state >= star number SUBMISSION: 1. Check verified: Search Orders for this item by Current User 2. Create Review with all ratings and Is_Verified flag 3. Update content item's cached average ratings AGGREGATE DISPLAY: Average per dimension: Reviews:each item's [field]:average Pre-compute on content item for performance HELPFUL VOTES: Thumbs up: Add user to Helpful_Voters, increment Helpful_Count Thumbs down: increment Not_Helpful_Count Prevent double vote: disable when user in Helpful_Voters ``` ## Common mistakes - **Calculating average ratings dynamically on every page load** — Aggregating all reviews each time is expensive on WUs, especially for popular items. Fix: Pre-compute average ratings as fields on the content item. Update them when reviews are added or deleted. - **Not preventing duplicate reviews from the same user** — A user submitting multiple reviews skews ratings. Fix: Add a condition on the review form: only visible when search Reviews (Reviewer = Current User, Content_Item = this item):count is 0. - **Allowing helpful votes without preventing double voting** — Users can inflate helpfulness scores by clicking multiple times. Fix: Track voters in a list field and disable vote buttons when the current user is already in the list. ## Best practices - Pre-compute average ratings on content items for fast display - Prevent duplicate reviews per user per item - Track helpful voters in a list to prevent double voting - Show verified purchase badges to build trust - Sort reviews by helpfulness or recency with a toggle - Display rating breakdowns (count per star) for transparency - Allow review editing within 24 hours but not after ## Frequently asked questions ### How do I display star ratings visually? Use 5 star icon elements with conditions: show filled star when the rating value >= that star's position number, else show empty star. ### Can users edit their reviews? Yes. Search for the user's existing review for the item and pre-fill the form. Update the existing record instead of creating a new one. ### How do I moderate reviews? Add a flagging system and an admin moderation page. Review flagged reviews and approve, edit, or delete them. ### Should I allow reviews without purchases? It depends on your platform. Product reviews benefit from verified-only restrictions. Content reviews may allow anyone. Use the Is_Verified badge to differentiate. ### How do I handle review spam? Limit to one review per user per item, require minimum account age, add profanity filtering, and implement the flagging/moderation system. ### Can RapidDev help with advanced review systems? Yes. RapidDev can implement AI-powered review moderation, sentiment analysis, fake review detection, and review aggregation across platforms. --- Source: https://www.rapidevelopers.com/bubble-tutorial/build-user-content-rating-review-system-bubble © RapidDev — https://www.rapidevelopers.com/bubble-tutorial/build-user-content-rating-review-system-bubble