Customizing Ratings

1. Using a combo, split or score view
Was this entry useful?

Use the view attribute to specify the display mode: "combo" (default), "split" or "score".

Combined view (default):

<div class="js-kit-rating" view="combo"></div>

Split view:

<div class="js-kit-rating" view="split"></div>
<script src="https://js-kit.com/ratings.js"></script>

Score view:

<div class="js-kit-rating" view="score"></div>
<script src="https://js-kit.com/ratings.js"></script>

2. Changing the color of the stars in the 5-star view
Was this entry useful?

You can use starColor and userColor attributes to change the widget color in "combo" and "split" modes. The starColor affects the color of the community rating, whereas the userColor sets the color of the particular user's rating.

<div class="js-kit-rating" starColor="Ruby"></div>
<div class="js-kit-rating" starColor="Red"></div>
<div class="js-kit-rating" starColor="Golden"></div>
<div class="js-kit-rating" starColor="Green"></div>
<div class="js-kit-rating" starColor="Emerald"></div>
<div class="js-kit-rating" starColor="Blue"></div>
<div class="js-kit-rating" starColor="Indigo"></div>
<div class="js-kit-rating" starColor="Violet"></div>
3. Same ratings/scores on different pages
Was this entry useful?
If you want to rate or score an object which can appear on multiple pages (an item in your shopping cart or a blog article), put its unique permanent path on your site into the path attribute:
<div class="js-kit-rating" path="/blogEntry42"></div>
<script src="https://js-kit.com/ratings.js"></script>
4. Multiple instances of ratings and/or scores on one page
Was this entry useful?
You can rate multiple items on the same page. Just put the Ratings <DIV>'s with unique path attributes where the ratings or scores should appear:
<div class="js-kit-rating" path="/shopping/item/1"></div>
<div class="js-kit-rating" path="/shopping/item/2"></div>
<div class="js-kit-rating" path="/shopping/item/3" view="score"></div>
<div class="js-kit-rating" path="/shopping/item/4" view="score"></div>
... rest of html code ...
<script src="https://js-kit.com/ratings.js"></script>
5. Using your own star graphics for ratings
Was this entry useful?

In the "combo" and "split" modes you can replace starlet images with your own art by using imageurl and imagesize attributes. The URL specified in the imageurl attribute should contain five pictures:

  • star.png,
  • star-half.png,
  • user.png,
  • user-half.png, and
  • gray.png.

The first two are for community rating icons (), the following two are for the user's own rating (), and the last one is for a placeholder .

<div class="js-kit-rating"
imageurl="https://js-kit.com/images/stars"
imagesize="16x15"></div>
<script src="https://js-kit.com/ratings.js"></script>
6. Changing the size of thumbnails ("score" view)
Was this entry useful?
You can choose from three thumb sizes: "small" (10px X 12px), "normal" (12px X 15px) and "large" (15px X 18px).
<div class="js-kit-rating" view="score" thumbsize="small"></div>
<div class="js-kit-rating" view="score" thumbsize="normal"></div>
<div class="js-kit-rating" view="score" thumbsize="large"></div>
<script src="https://js-kit.com/ratings.js"></script>

The default value is "normal". You can also replace the standard graphics with your own design, as described in the next tip.
7. Using your own thumb-up/down graphics
Was this entry useful?

In the "score" view mode you can replace the standard thumbnail graphics with your own design by using imageurl and imagesize attributes.

<div class="js-kit-rating" view="score"
imageurl="https://js-kit.com/images/stars/normal-thumb.png"
imagesize="16x15"></div>
<script src="https://js-kit.com/ratings.js"></script>

Note: The imageurl attribute needs to point to a single image file containing all four icons in the correct order. The best way to create it is by using our Thumbnail Generator. Use it to upload two or four replacement images, and the Thumbnail Generator will not only generate a compliant image file in PNG format, but also construct a <DIV> tag with the corresponding imageurl and imagesize attributes.

8. Displaying top rated/scored pages
Was this entry useful?
Put the "Top rated topics" on your page by using the following code:
<div class="js-kit-top" title="Top rated topics"></div>
<script src="https://js-kit.com/top.js"></script>

For further details see the Navigator service.
9. Integrating Ratings with Comments
Was this entry useful?
See how Ratings widget can integrate with JS-Kit's Comments widget to bring the power of Reviews.
10. Use a permanent URL for each object (blog post, article, etc.)
Was this entry useful?

Use permalinks for articles and posts which can be addressed on your site by multiple alternative URLs. By specifying the permalink attribute in the <DIV> element associated with the object you ensure that Navigator service collects the data correcty and links to the existing URLs.

<div class="js-kit-ratings" title="Cool Stuff" permalink="https://mysite.com/permanent/link/to/page.html"></div>
<script src="https://js-kit.com/ratings.js"></script>

Note: this attribute should not be confused with the path attribute
but used in conjunction with it.
11. Display custom titles in Navigator
Was this entry useful?

Navigator's Top and Hot lists show entries by displaying their actual paths on your site or their permanent URLs (if specified with the permalink attribute). If you would like a more readable title for your objects, you can use the title attribute.

<div class="js-kit-rating" title="My Title" permalink="https://mysite.com/permanent/link/to/page.html"></div>
<script src="https://js-kit.com/ratings.js"></script>