Add a full review system to your Bubble app with star ratings, text reviews, product linkage, average rating display, and moderation tools for flagging inappropriate content. This tutorial covers the data types, UI components, and workflows that let users leave detailed feedback while giving admins control over review quality.
Overview: Adding User Reviews and Ratings in Bubble
This tutorial walks you through adding a complete review and rating system to your Bubble app. You will create a Review data type linking reviews to products and users, build a submission form with interactive stars and a text review, display average ratings and individual reviews on product pages, and set up moderation workflows for flagging and approving reviews. This is essential for marketplaces, e-commerce apps, or any platform where user trust depends on peer feedback.
Prerequisites
- A Bubble account with an existing app
- A Product (or similar) data type that users will review
- Basic understanding of Bubble data types and workflows
- Familiarity with Repeating Groups and conditional formatting
Step-by-step guide
Create the Review data type
Create the Review data type
Go to the Data tab and click New type. Name it Review and add fields: product (type: Product), reviewer (User), rating (number, 1-5), title (text), body (text), is_approved (yes/no, default yes for auto-publish or no for moderation), is_flagged (yes/no, default no), and flag_reason (text). This gives you everything needed for full reviews with moderation support.
Expected result: A Review data type exists with product, reviewer, rating, title, body, is_approved, is_flagged, and flag_reason fields.
Build the review submission form
Build the review submission form
On your product detail page, add a Group for the review form below the product details. Inside, add five star Icon elements in a Row group for the rating (same pattern as a standalone rating system — highlight on hover, set on click using a Custom State called selected_rating). Add an Input for the review title, a Multiline Input for the review body, and a Submit Review button. Add a condition on the form group: only visible when Current User is logged in and has not already reviewed this product.
Pro tip: Show a Log in to review message when the user is not logged in, and a You already reviewed this product message when they have.
Expected result: Logged-in users who have not yet reviewed the product see a review form with star rating, title, body, and submit button.
Create the submit review workflow
Create the submit review workflow
Go to the Workflow tab. Create: When Button Submit Review is clicked — Only when selected_rating > 0 and Multiline Input's value is not empty. Action 1: Create a new Review with product = Current Page Product, reviewer = Current User, rating = Custom State selected_rating, title = Input Title's value, body = Multiline Input's value, is_approved = yes. Action 2: Reset the form inputs. Optionally, update a cached average_rating field on the Product data type for performance.
Expected result: Submitting a review creates a new Review record linked to the product and user, then clears the form.
Display reviews and average rating on the product page
Display reviews and average rating on the product page
Above the review form, add a section showing the average rating: Search for Reviews (product = Current Page Product, is_approved = yes):each item's rating:average formatted to one decimal. Next to it, show the total count. Below, add a Repeating Group with type Review, data source: Search for Reviews (product = Current Page Product, is_approved = yes), sorted by Date created descending. Each cell shows: reviewer name, star icons (filled based on rating), title in bold, body text, and date. Add a Flag button visible to logged-in users.
Expected result: The product page shows the average rating, total review count, and a scrollable list of individual reviews.
Implement review flagging
Implement review flagging
Add a Flag as inappropriate link or icon in each review cell, visible only when Current User is not the reviewer. The workflow: When Flag is clicked — show a popup asking for the flag reason (Dropdown with options: Spam, Offensive, Irrelevant, Other). On submit: Make changes to the Review — set is_flagged = yes and flag_reason = selected reason. Add a conditional on the flag link: when this Review's is_flagged is yes, change it to Flagged (disabled) so users cannot flag the same review twice.
Expected result: Users can flag reviews with a reason, and flagged reviews are marked for admin review.
Build the admin moderation dashboard
Build the admin moderation dashboard
Create a page called admin-reviews restricted to admin users. Add a Repeating Group showing Reviews where is_flagged = yes, sorted by Date modified descending. Each cell displays the review content, the flag_reason, and two buttons: Approve (sets is_flagged = no, keeps is_approved = yes) and Remove (sets is_approved = no, hiding it from public view). Add a second tab showing all reviews for browsing and search. For apps with high review volume that need automated moderation, consider working with RapidDev for expert Bubble development.
Expected result: Admins can view flagged reviews, approve them, or remove them from public display.
Complete working example
1USER REVIEWS AND RATINGS — WORKFLOW SUMMARY2=============================================34DATA TYPES:5 Review6 - product (Product)7 - reviewer (User)8 - rating (number, 1-5)9 - title (text)10 - body (text)11 - is_approved (yes/no, default yes)12 - is_flagged (yes/no, default no)13 - flag_reason (text)1415PAGE: product-detail16 Elements:17 Average Rating Section:18 - Text: Search for Reviews (product, is_approved=yes)19 :each item's rating:average → format 0.020 - Text: (X reviews)21 - 5 star icons with conditionals based on average2223 Review List (Repeating Group, type: Review):24 Data source: Search for Reviews25 product = Current Page Product26 is_approved = yes27 Sort: Date created descending28 Cell:29 - Text: reviewer's name30 - 5 star icons (filled when rating >= N)31 - Text: title (bold)32 - Text: body33 - Text: Date created (formatted)34 - Link: Flag as inappropriate35 Visible when: Current User is not reviewer3637 Review Form (Group):38 Visible when: Current User is logged in39 AND Search for Reviews (product, reviewer=Current User):count is 040 - StarGroup with 5 icons + Custom State selected_rating41 - Input: Review title42 - Multiline Input: Review body43 - Button: Submit Review4445WORKFLOW 1: Submit review46 Event: Button Submit Review is clicked47 Only when: selected_rating > 0 AND body is not empty48 Action 1: Create new Review49 product = Current Page Product50 reviewer = Current User51 rating = selected_rating52 title = Input Title's value53 body = Multiline Input's value54 is_approved = yes55 Action 2: Reset relevant inputs5657WORKFLOW 2: Flag review58 Event: Button Flag is clicked59 Action 1: Show Popup Flag Reason60 (In popup) When Submit Flag is clicked:61 Action 2: Make changes to this Review62 is_flagged = yes63 flag_reason = Dropdown Reason's value6465ADMIN PAGE: admin-reviews66 Repeating Group: Reviews where is_flagged = yes67 Cell:68 - Review content + flag_reason69 - Button Approve:70 Make changes → is_flagged = no71 - Button Remove:72 Make changes → is_approved = no7374PRIVACY RULES (Review):75 Everyone: Find in searches (yes), View all fields (yes)76 This Review's reviewer is Current User: All permissionsCommon mistakes when building user reviews and ratings in Bubble
Why it's a problem: Not preventing duplicate reviews from the same user
How to avoid: Add a visibility condition on the review form: only visible when Search for Reviews (product, reviewer = Current User):count is 0.
Why it's a problem: Calculating average rating with a search on every page load
How to avoid: Store a cached average_rating field on the Product data type and update it via a backend workflow whenever a review is created, modified, or removed.
Why it's a problem: Removing flagged reviews without checking the content
How to avoid: Always require admin review before removing a flagged review. The moderation dashboard lets admins make informed decisions.
Best practices
- Prevent duplicate reviews by checking if the current user has already reviewed the product
- Cache the average rating on the Product data type for faster page loads
- Require both a star rating and review text before allowing submission
- Sort reviews by newest first so fresh feedback appears at the top
- Add a moderation workflow for flagged reviews rather than auto-removing them
- Show a verified purchase badge if the reviewer has an order for this product
- Add Privacy Rules so users can only edit or delete their own reviews
- Display the reviewer name and date to build trust and credibility
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Bubble.io app and need a full review and rating system. Users should leave star ratings and text reviews on products, see average ratings, and admins should moderate flagged reviews. How do I set up the data types, review form, display, and moderation workflow?
Add a review system to my product pages. Create a Review data type with rating, title, body, and moderation fields. Build a submission form with star rating icons, display reviews in a Repeating Group with the average rating, and add flagging with an admin moderation dashboard.
Frequently asked questions
Should reviews be auto-approved or require moderation?
For most apps, auto-approving reviews provides a better user experience. Set is_approved to yes by default and use flagging for after-the-fact moderation. Switch to pre-approval (is_approved = no by default) if spam is a significant problem.
How do I add a helpful votes feature?
Create a ReviewVote data type with review (Review), voter (User), and is_helpful (yes/no). Add thumbs up/down buttons in each review cell and display the helpful count.
Can I add photo reviews?
Yes. Add an images field (list of images) to the Review data type and include a File Uploader in the review form. Display uploaded images in a horizontal Repeating Group within the review cell.
How do I show a rating distribution chart?
Display five horizontal bars, one for each star level. Each bar's width is proportional to the count of reviews with that rating divided by the total review count.
Can I sort reviews by rating or helpfulness?
Yes. Add sort options (Newest, Highest rated, Most helpful) as buttons or a dropdown. Change the Repeating Group's data source sort parameter based on the selection using conditional data sources or custom states.
Can RapidDev help build an advanced review system?
Yes. RapidDev specializes in Bubble development and can build review systems with verified purchase badges, AI-powered sentiment analysis, photo reviews, and sophisticated moderation workflows.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation