jQuery Emotion Ratings – New way to add rating system on your webapp

jQuery Emotion Ratings – New way to add rating system on your webapp
Are you boared form old rating star rating system, No worry in this post I am going share new cool way to add rating system in your website so that your user can give their opinion in best way. The plugin name jQuery Emotion Ratings. It is a lightweight jQuery plugin used to create a simple rating system using custom emoji Unicode characters. This is the new coolest way to add rating system on your services or product. Just doing little configuration you can integrate Emotion Ratings on your web project.

jQuery Emotion Ratings

Integrate jQuery Emotion Ratings


Include required plugins minified emotion-ratings.min.js libraries on your project with jQuery core library.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="emotion-ratings.min.js"></script>


Create a simple html div container where Emotion Ratings need to display.

<div id="rating"></div>


Following are the different different Emotion you can use to create rating system.

var emotionsArray = {
    angry: "&#x1F620;",
    disappointed: "&#x1F61E;",
    meh: "&#x1F610;", 
    happy: "&#x1F60A;",
    smile: "&#x1F603;",
    wink: "&#x1F609;",
    laughing: "&#x1F606;",
    inLove: "&#x1F60D;",
    heart: "&#x2764;",
    crying: "&#x1F622;",
    star: "&#x2B50;",
var emotionsArray = ['angry','disappointed','meh', 'happy', 'inLove'];

Now creating the Emotion Ratings using following code you can customize rating system as per your need.

    emotionSize: 50, 
    bgEmotion: 'happy', 
    emotions: emotionsArray, 
    color: 'gold' 

See live demo and download source code.


Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.