Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

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.

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 it's quite common to see a star rating on a page like this.

Install Star Rating plugin

So first of all, I need to add in a plugin Bubble has built one - Bootstrap Star Rating Input. There's a number of other ones, but I'll be using just this default one. We can see it's very popular.

Then I need to add it into my page. Let's put it below the add to cart button. We can see here that it hasn't been updated for the new response 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 is obscured by these fixed width and height values.

So let's have a look at the settings on appearance minimum value zero max five steps of 0.5. You can adjust the size there and the colours. 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 zero 0.5 of the stars. If I click, then it remembers it. But if I refresh the page, nothing is saved to the database.

Saving star rating value 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 a different way.

When elements value is changed, the star rating, the date of the 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. 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 valley.

Testing

If I go in for two and a half and I click oh right, it's not working because I've missed this I'm on a demo page. If we look at the URL up top, I'm not actually viewing a product in my database. So I think I need to go back to 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 caused the workflow to create a change to that product okay, so what's going on there?

Let's debug it. I really thought that would work. So clicking on that make changes to product. Okay. Yes.

Right. So let's debug it. I know it's going to hit, but this is all part of the process. 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 has got their content to display.

To fix that I go to current Pages products rating.

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 four. Okay, so that works, but that's not going to work in practise with my app because I want multiple users to be able to save ratings, whereas at the moment, if another user came along and they say, oh, we didn'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.

Will this produce an average rating?

Now, I could do that using a list value on ratings, but that also has a shortfalling 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. So check out the follow up video about average star rating to see how we can tackle this one.

 

Latest videos

menu