Building a customer review system in Bubble involves creating a Review Data Type linked to purchases or bookings, building a submission form with star ratings and photo uploads, implementing moderation controls, and displaying aggregate ratings on product or service pages. This tutorial covers the complete review lifecycle from submission through moderation to display.
Overview: Building a Customer Review System in Bubble
This tutorial guides you through building a review system where customers can leave star ratings and written reviews after purchases or bookings, with moderation controls and aggregate rating displays.
Prerequisites
- A Bubble app with user authentication
- A Product, Service, or Booking Data Type to attach reviews to
- Basic understanding of Repeating Groups and workflows
Step-by-step guide
Create the Review Data Type
Create the Review Data Type
In the Data tab, create a Review Data Type with fields: product (Product or Service), reviewer (User), rating (number, 1-5), title (text), body (text), photos (list of images), is_verified_purchase (yes/no), is_approved (yes/no, default yes for auto-approve or no for moderated), helpful_count (number). Add denormalized fields to your Product: average_rating (number), review_count (number). These avoid expensive aggregation queries on every page load.
Expected result: Your database supports reviews with ratings, photos, verification status, and moderation.
Build the review submission form
Build the review submission form
On the product or order confirmation page, add a review form visible only to users who have purchased the product (search Orders where user = Current User and product = Current Product :count > 0). Add a star rating selector using 5 clickable star icons with a custom state tracking the selected rating (1-5). Add inputs for review title, body text, and a File Uploader for photos. The Submit workflow creates a Review, sets is_verified_purchase based on purchase history, and updates the Product's average_rating and review_count.
Pro tip: Calculate updated average_rating as: (existing_average * existing_count + new_rating) / (existing_count + 1). This avoids re-searching all reviews.
Expected result: Verified customers can submit star ratings with written reviews and photos.
Display reviews and aggregate ratings
Display reviews and aggregate ratings
On the product page, show the aggregate rating prominently: average_rating displayed as stars with the numeric value, and 'X reviews' text. Below, add a Repeating Group of Reviews where product = Current Product and is_approved = yes, sorted by Created Date descending. In each cell, show the reviewer name, star rating, review date, title, body, photos (in a horizontal image gallery), verified purchase badge, and a 'Was this helpful?' button that increments helpful_count. Add a rating distribution bar showing how many 5-star, 4-star, etc. reviews exist.
Expected result: Product pages show aggregate ratings, rating distribution, and individual reviews with photos.
Add moderation and management
Add moderation and management
For moderated reviews (is_approved defaults to no), create an admin review queue page. Show pending reviews in a Repeating Group with Approve and Reject buttons. The Approve workflow sets is_approved to yes and updates product average_rating. Reject sets is_approved to no and optionally notifies the reviewer. For auto-approved systems, add a Report button on reviews that flags them for admin attention. Allow review authors to edit their reviews within 48 hours of posting.
Expected result: Admins can moderate reviews with approve/reject controls, and authors can edit recent reviews.
Complete working example
1CUSTOMER REVIEW SYSTEM2========================34DATA TYPES:5 Review: product, reviewer, rating (1-5), title, body,6 photos (list), is_verified_purchase, is_approved, helpful_count7 Product (added fields): average_rating, review_count89SUBMISSION WORKFLOW:10 Condition: User has purchased this product11 1. Create Review (rating, title, body, photos)12 2. Set is_verified_purchase based on order history13 3. Update Product:14 average_rating = (old_avg * old_count + new_rating) / (old_count + 1)15 review_count = old_count + 11617DISPLAY:18 Aggregate: Stars + numeric average + review count19 Distribution: Bar chart showing 5/4/3/2/1 star counts20 Individual: RG of approved reviews with photos, helpful button2122MODERATION:23 Admin queue: Pending reviews with Approve/Reject buttons24 Approve: is_approved → yes, update aggregate25 Reject: is_approved → no, notify reviewer26 Report: Flag button increments report_countCommon mistakes when building a customer review system in Bubble.io: Step-by-Step Guide
Why it's a problem: Calculating average rating with a search on every product page load
How to avoid: Store average_rating and review_count as denormalized fields on the Product and update incrementally when reviews are added
Why it's a problem: Allowing reviews from users who never purchased the product
How to avoid: Check for a completed Order/Booking by the current user before showing the review form
Why it's a problem: Not storing photos as a list field on the Review
How to avoid: Use a photos field of type list of images directly on the Review Data Type
Best practices
- Store average_rating and review_count as denormalized fields on the Product
- Verify purchase history before allowing review submission
- Support photo uploads for richer review content
- Add a Was this helpful button to surface the most useful reviews
- Show a verified purchase badge for authenticated reviews
- Allow editing within a time window but not deletion by reviewers
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a customer review system to my Bubble.io e-commerce app. Customers should leave star ratings and written reviews with photos after purchases. How do I design the Data Types, submission flow, and display?
Create a Review Data Type with rating, title, body, and photos fields. Build a review form with a 5-star selector on the product page, visible only to verified purchasers. Display reviews in a Repeating Group with aggregate rating summary and rating distribution bars.
Frequently asked questions
How do I build a star rating selector?
Use 5 Icon elements (stars). Add a custom state 'selected_rating' (number). Each star's click workflow sets the state to its number. Add Conditionals: when selected_rating >= this star's number, show a filled star; otherwise show an outline star.
Should I moderate reviews before publishing?
For small communities, auto-approve with a report option works well. For public-facing products, moderation before publishing prevents spam and inappropriate content but adds admin workload.
How do I show a rating distribution chart?
Search Reviews grouped by rating, count each group, and display as horizontal bars. Calculate each bar's width as a percentage of the total review count.
Can I sort reviews by most helpful?
Yes. Add a sort toggle that switches between Created Date (newest) and helpful_count (most helpful) on the Repeating Group data source.
Can RapidDev help build a review system in Bubble?
Yes. RapidDev can implement complete review systems with star ratings, photo uploads, verification, moderation queues, and aggregate display for your Bubble app.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation