Skip to main content
RapidDev - Software Development Agency
bubble-tutorial

How to build user reviews and ratings in Bubble

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.

What you'll learn

  • How to create a Review data type with rating, text, and product linkage
  • How to build a review submission form with star rating and text input
  • How to display average ratings and review lists on product pages
  • How to implement review moderation with flagging and admin approval
Book a free consultation
4.9Clutch rating
600+Happy partners
17+Countries served
190+Team members
Beginner8 min read20-25 minAll Bubble plansMarch 2026RapidDev Engineering Team
TL;DR

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

1

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.

2

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.

3

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.

4

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.

5

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.

6

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

Workflow summary
1USER REVIEWS AND RATINGS WORKFLOW SUMMARY
2=============================================
3
4DATA TYPES:
5 Review
6 - 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)
14
15PAGE: product-detail
16 Elements:
17 Average Rating Section:
18 - Text: Search for Reviews (product, is_approved=yes)
19 :each item's rating:average format 0.0
20 - Text: (X reviews)
21 - 5 star icons with conditionals based on average
22
23 Review List (Repeating Group, type: Review):
24 Data source: Search for Reviews
25 product = Current Page Product
26 is_approved = yes
27 Sort: Date created descending
28 Cell:
29 - Text: reviewer's name
30 - 5 star icons (filled when rating >= N)
31 - Text: title (bold)
32 - Text: body
33 - Text: Date created (formatted)
34 - Link: Flag as inappropriate
35 Visible when: Current User is not reviewer
36
37 Review Form (Group):
38 Visible when: Current User is logged in
39 AND Search for Reviews (product, reviewer=Current User):count is 0
40 - StarGroup with 5 icons + Custom State selected_rating
41 - Input: Review title
42 - Multiline Input: Review body
43 - Button: Submit Review
44
45WORKFLOW 1: Submit review
46 Event: Button Submit Review is clicked
47 Only when: selected_rating > 0 AND body is not empty
48 Action 1: Create new Review
49 product = Current Page Product
50 reviewer = Current User
51 rating = selected_rating
52 title = Input Title's value
53 body = Multiline Input's value
54 is_approved = yes
55 Action 2: Reset relevant inputs
56
57WORKFLOW 2: Flag review
58 Event: Button Flag is clicked
59 Action 1: Show Popup Flag Reason
60 (In popup) When Submit Flag is clicked:
61 Action 2: Make changes to this Review
62 is_flagged = yes
63 flag_reason = Dropdown Reason's value
64
65ADMIN PAGE: admin-reviews
66 Repeating Group: Reviews where is_flagged = yes
67 Cell:
68 - Review content + flag_reason
69 - Button Approve:
70 Make changes is_flagged = no
71 - Button Remove:
72 Make changes is_approved = no
73
74PRIVACY RULES (Review):
75 Everyone: Find in searches (yes), View all fields (yes)
76 This Review's reviewer is Current User: All permissions

Common 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.

ChatGPT Prompt

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?

Bubble Prompt

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.

RapidDev

Talk to an Expert

Our team has built 600+ apps. Get personalized help with your project.

Book a free consultation

Need help with your project?

Our experts have built 600+ apps and can accelerate your development. Book a free consultation — no strings attached.

Book a free consultation

We put the rapid in RapidDev

Need a dedicated strategic tech and growth partner? Discover what RapidDev can do for your business! Book a call with our team to schedule a free, no-obligation consultation. We'll discuss your project and provide a custom quote at no cost.