I recently had to integrate a jQuery star rating plugin in a client’s website and I had to try a few before finding the best one, in my opinion. In this article, I will show you the one I’ve used and how to integrate it into your own website.

The star rating plugin we will use today is called “star-rating-svg“. It is super easy to customize because it comes with a few interesting options. It uses SVG images which is nice to always have a cool looking star rating.

Check the demo of the final result we want to have by the end of this tutorial :

See Demo

Integrating Star-Rating-Svg on your website

First of all, download the plugin from the author’s Github. Unzip it and upload the content of the src/ folder on your website (there is one CSS file and one JS file). Make sure to have jQuery imported before, of course 😉

Import the CSS file :

<link rel="stylesheet" href="css/star-rating-svg.css">

And the JS file, after your jQuery call :

<script src="js/jquery.min.js"></script>
<script src="js/jquery.star-rating-svg.js"></script>

Once it’s done, let’s write the HTML div which will serve as a target to show our jQuery star rating. Simply place this code where you want the star rating to appear on your website :

<div class="my-rating"></div>

Now, the fun part! Let’s actually call the jQuery plugin on our HTML. The most basic configuration can be the following :

$(".my-rating").starRating({
     totalStars: 10
});

… where total stars is the number of stars you want to display. As you can see in my demo there are 10 stars 🙂

At this point, if you reload your page, you should actually see the star rating appearing, just like in my demo!

But now… How to handle the rating? How to execute an action when the user clicks a star? It’s easy thanks to the callback function, let’s integrate it!

Modify your jQuery call to the plugin like to add a callback :

$(".my-rating").starRating({
	totalStars: 10,
    callback: function(currentRating, $el) {
	    						
    }
});

This callback function will be called when the user actually clicks a star. You can know which rating he selected with the “currentRating” variable. In my case, I use this callback to simply show the rating the user selected, but a good use could also to send a request to your backend (to save the rating in a database) with an Ajax call!

There are many more options available for this plugin, which will also allow you to customize the style easily (the size of the stars, their color, border etc). You can discover all of them on the author’s Github page.

Feel free to download the sources of the demo here :

Download Sources

If you have any questions, need any help or want to say something, feel free to leave a comment below…

… and don’t forget to subscribe if you want to receive new unique tutorials and source codes directly on your email :