How to use the Star Rating element in Bubble.io
In this Bubble.io tutorial video we demonstrate how to use the Star Rating visual element in Bubble. This video includes how to install the Star Rating plugin, display it on a page, store a rating value from a user in the database and retrieve that value when the page reloads.
Master star ratings: Learn how to add, customize, and save user ratings in your Bubble app's user profiles!
Unlock the power of ratings: Discover how to implement a dynamic star rating system for your no-code customer support app.
From simple product ratings to complex review systems - elevate your Bubble app with star ratings today!
Adding a Star Rating to Your Bubble App
Here's how to add a star rating to a page on your Bubble app. In this case, it's a product page in a marketplace app that I'm working on, so you know it's quite common to see a star rating on a page like this. First of all, I need to add in a plugin and Bubble has built one. There's a number of other ones but I'll be using just this default one. We can see it's very popular.
Placing the Star Rating Element
Okay, and then I need to add it into my page. In fact, let's put it below the add to cart button. Okay, we can see here that it hasn't been updated for the new responsive engine but we can probably get away by just putting in values that are going to work for us in here. Let's make it nice and big so nothing's obscured by these fixed width and height values.
Configuring the Star Rating Settings
So let's have a look at the settings on appearance. Yeah, minimum value zero, max five, steps of 0.5. You can adjust the size there and the colors. Let's have a look at that on the front end. Okay, so what you see as a user when I put my mouse over it, it moves in those 0.5 of a stars. If I click, then it remembers it, but if I refresh the page nothing is saved to the database.
Saving Ratings to the Database
So how do I save it to the database? Well, I could use autobinding but I'm not going to cover that in this video. We've got other videos on auto binding. For that exact reason, I'm going to show how to do it a different way. So when elements value is changed, the star rating, then data to change make changes to a thing. Current page as product, the reason I can select that is that if I click onto the page we have our page selected type of content as product, so I can feed off that data from any element in the page and then we add in rating and this is a number value because it will give us a number between 0 and 5 in 0.5 increments and hit create. This star ratings value okay let's try that if I go in for 2.5 and I click.
Debugging the Workflow
Ah right, it's not working because I've missed this. I'm on a demo page. If we look at the URL up top, it's I'm not actually viewing a product in my database so I think I need to go back to. I've got a just a simple repeating group on the index page I'm building to click through. Okay, right now I'm actually viewing a product in my database which then means that if I cause the workflow to create a change to that product. Ah okay, so what's going on there? Let's debug it. I thought that really thought that would work.
Fixing the Initial Value
So clicking on there make changes to product. Okay, yes right so let's debug it. I know it's going ahead but this is all part of the process. If I go to products you can now see it has a 2.5 rating. Now in my haste to show you how to get this to work I completely overlooked something and it's really worth me showing and pointing this out which is that there is no initial value here which means that when I refresh the page this element here it's got no content to display. So fix that I go to current pages products rating. Now yes there we go now it's gone to the 2.5 and so let's take up to 4 and now it saves to 4.
Limitations of the Current Implementation
Okay, so that works but that's not going to work in practice with my app because I want multiple users to be able to save ratings and whereas at the moment if another user came along and they say oh we don't like this let's rate it at 0.5 then that overrides it. Really what I want to be displaying here is an average of ratings and now I could do that using a list value on ratings but that also has a shortfall because the list values aren't going to be attached to the identity of the person who's leaving that value so if they wanted to change it in the future there's no way of doing that. I would just end up with a series of averages for every single rating that was given regardless of whether that rating was changed or replaced.
Next Steps
Check out the follow-up video about star rating to see how we can tackle this one.
Get the Complete Bundle for Just $99
Access 3 courses, 390+ tutorials, and a vibrant community to support every step of your app-building journey.
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 390+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.
Valued at $49
Valued at $89
Valued at $29
Valued at $99
Valued at $49
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
We're here to help you launch your no code SaaS. Reach out to the team and we'll double check our vast library for useful content. We'll advise you on how we'd tackle the same problem and there's a good chance we'll record the video to help the wider community.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.