Rating widget options

Rating widgets are a great way to get instant reader feedback on your blog posts, web pages, photos, music or any other content that you create. We provide two main types of ratings:

Star Rating Widget — The star rating allows visitors to rate your content on a scale of 1 to 5.


Nero Rating Widget — The Nero rating offers a simple “thumbs up” or “thumbs down” rating.

Rating Embed Code

Ratings can be embedded on your page using either a WordPress shortcode or using Javascript that can be used on non WordPress sites.

The Javascript is broken into loader and configuration sections. The loader is HTML code that looks like this:

<script
    language='javascript' 
    src='https://app.crowdsignal.com/js/rating/rating.js'>
</script>

This code should be added to the end of your page, after any ratings on the page.

The rating configuration is Javascript code that looks like this and should be placed where the ratings are to appear on the page:

<div id="pd_rating_holder_39"></div>
<script type="text/javascript">
PDRTJS_settings_39 = {
    "id" : "39",
    "unique_id" : "default",
    "title" : "",
    "permalink" : ""
};
</script>

Setting a custom image for your rating

You can override the star image for any rating by specifying the URL of your new image on the Rating Type page.

Images of how to add an image URL to a rating.

The rating uses a single image for all states. You must create your image in the same dimensions as the size you choose for your rating. Replacement images for small stars are 16px, medium stars are 20px and large stars are 24px. If you look at the image for the red star below you will see how they’re used to convey different ratings:

star-red-sml

The stars above are all in one image. The stars in the left column are used for displaying the rating and the stars in the right column and are used when a person moves their mouse over the rating. You can also use just one column of stars if you’d like.

As an example, we can make one with the Crowdsignal favicon. The Crowdsignal favicon looks like this:

Image of Crowdsignal favicons.

Now we need to make a full rating, a half rating and an “off” rating all in the one image. The resulting image will be 32px wide and 48px high like the sample below:

Image of Crowdsignal favicons.

The resulting rating widget will look like this:


Note: You may experience a blinking effect if your image is hosted on Dropbox.

Use variables to tell ratings apart

In the JavaScript code, there are four parameters called id, unique_id, title, and permalink:

<div id="pd_rating_holder_39"></div>
<script language="javascript">
PDRTJS_settings_39 = { 
    "id" : "39",
    "unique_id" : "default",
    "title" : "", 
    "permalink" : "" 
};
</script>
<script
    language='javascript' 
    src='https://app.crowdsignal.com/js/rating/rating.js'>
</script>

The JavaScript code works fine as it is, but to get the full effect please consider adding values to the unique_id, title, and permalink parameters. Note that the id parameter must not be edited.

  • unique_id (Mandatory)
    This parameter is very important. Let’s say you have an online store and you want to use just one rating widget to rate all of the products in your store. The unique id field is the parameter that will distinguish between different products, so in here you could place the product id or something unique to the product you want to rate. Similarly, if you wanted to track different ratings of blogs posts you would place something like the blog post id in this value. Ideally you would generate this unique_id in your code. If you don’t put something unique in here all products in your shop would have the same rating. e.g., "unique_id" : "product1229"
  • Title (Optional)
    To help make your reports easier to understand, you can add a title to the rating. This should be linked to the unique_id above. So using the example of the online store, you could place the title of the product you are rating in here. e.g., "title" : "4S iPhone leather cover"
  • Permalink (Optional)
    Again to help make your reports easier to understand, you can place a link to the content you are rating here. Again using the example of the online store you could place a link to that particular product page here. e.g. http://example.com/product.php?id=1229

Installing your rating multiple times on same page

Installing your rating widget multiple times on the same page requires an extra parameter: item_id. You only need to load rating.js once. As an example, here’s how you’d add that extra parameter on a page about ice-cream.

The page will have ratings above and below pictures of delicious ice-cream, so we need to add ratings for each flavour at the top and the bottom. The results page for this rating will show how people clicked on the individual flavours in each area (top and bottom) of the page.

<div id='pd_rating_holder_8655796_strawberry_top'></div>
<script language='javascript'>
PDRTJS_settings_8655796_strawberry_top = {
    'id' : '8655796',
    'unique_id' : 'strawberry_top',
    'title' : 'Strawberry',
    'permalink' : '',
    'item_id' : '_strawberry_top'
};
</script>
<div id='pd_rating_holder_8655796_chocolate_top'></div>
<script language='javascript'>
PDRTJS_settings_8655796_chocolate_top = {
    'id' : '8655796',
    'unique_id' : 'chocolate_top',
    'title' : 'Chocolate',
    'permalink' : '',
    'item_id' : '_chocolate_top'
};
</script>
<br />
</script>
<div id='pd_rating_holder_8655796_strawberry_bottom'></div>
<script language='javascript'>
PDRTJS_settings_8655796_strawberry_bottom = {
    'id' : '8655796',
    'unique_id' : 'strawberry_bottom',
    'title' : 'Strawberry',
    'permalink' : '',
    'item_id' : '_strawberry_bottom'
};
</script>
<div id='pd_rating_holder_8655796_chocolate_bottom'></div>
<script language='javascript'>
PDRTJS_settings_8655796_chocolate_bottom = {
    'id' : '8655796',
    'unique_id' : 'chocolate_bottom',
    'title' : 'Chocolate',
    'permalink' : '',
    'item_id' : '_chocolate_bottom'
};
</script>

<script
    language='javascript' 
    src='https://app.crowdsignal.com/js/rating/rating.js'>
</script>

In the code above, notice that we’ve used the item ids [flavour]_top and [flavour]_bottom. You can have as many instances of the rating on the same page as you like, as long as the item_id values are unique on your page. The item_id can be any text you like as long as it’s unique.

The report for this rating will look like this:

Chocolate and strawberry are neck and neck in the ratings.


Each item_id value will be used as a suffix, or an appendage to parts of the code. You need to add this suffix to the container id attribute, the rating JavaScript variable name, and the unique_id value to allow us to differentiate the rating in the reports.

Please note: you only need to load rating.js once, and it should be loaded after all the ratings at the end of the page.