Once you have the Social Applications integrated, you could consider adding ratings and reviews widgets on your website to make the most of your customer’s feedback.

Average Rating Mini Widget

ratings

The Average Rating Mini widget allows you to place the ‘average rating’ of a product anywhere on your website.  This is primarily seen next to Product Names and in listing pages to show the product has ratings against it.

The code works in the same method as the core applications and in all instances where the Average Rating Mini Widget is to be displayed; there are 3 items which need to be defined by you.   TARGETID, PRODUCT ID, API Key

Please note that the widget will only get displayed when a product has at least one review/rating. This is to prevent displaying 5 grey stars for a product, leading to a negative idea of your products.

Average Rating Mini Widget Code:

<div id=”ratingwidget”>
<script type=”text/javascript” defer=”defer”>
(function() {
function async_load(){
var s = document.createElement(‘script’);
s.type = ‘text/javascript’;
s.async = true;
s.src = “http://www.digitalvisitorapps.com/api/widgets/rating/index.php?apikey=[YOUR API KEY]&relation=[RELATION]&target=[TARGET]”;
var x = document.getElementsByTagName(‘script’)[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent(‘onload’, async_load);
else
window.addEventListener(‘load’, async_load, false);
})();
</script>
</div>

The three main parameters are:
APIKEY
RELATION
TARGET

Additional parameters are:
&showtext=true&size=medium&color=blue&text=tings!
as previously described.

The TARGETID, API KEY and PRODUCTID are mandatory fields and need to be added by you.

 

Modifying the Average Ratings Widget

If you want to display the text under the stars, add &showtext=true to the end. Omit this if no text is required and you just want to display the stars.

The ‘defer=”defer” part of the script means this widget will run only after the page has finished loading, but this is not mandatory.

 

Changing Star Colour and Size

The stars of the Average Ratings Widget can be displayed in 3 different sizes and 14 different colours. All you need to do is add two extra parameters to the star widget call.

To change the colour of the stars you need to add:
&color
= and any one of the following:
red, blue, darkblue, green, darkgreen, yellow, violet, orange, pink, brown, black, white, silver, gold to pick a colour.

To change the size of the stars you need to add:
&size= and any one of the following
small, medium, large

** Combining the two will show the stars of that selected size and selected colour.
**If neither of these is specified, the widget defaults to large, orange, as we see now.

Example:  To have ‘small, gold stars’ the code would be:

<script src=”http://www.digitalvisitorapps.com/api/widgets/rating/index.php?apikey=3a50fc16-d89d-11e0-a26b-4040b2058987&relation=0123456789&target=rating1&showtext=true&size=small&color=gold” defer=”defer”></script>

 

Reviews List Widget

reviews widget

The list widget has been designed to allow site developers to display the latest Reviews, directly on a page from anywhere within their site.

It can be called in by Asynchronous Javascript in the following way:

<div id=”listwidget”>
<script type=”text/javascript” defer=”defer”>
(function() {
function _bf_load(){
var s = document.createElement(‘script’);
s.type = ‘text/javascript’;
s.async = true;
s.src = “https://www.digitalvisitorapps.com/api/widgets/list/index.php?apikey=APIKEY&target=listwidget”;
var x = document.getElementsByTagName(‘script’)[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent(‘onload’, _bf_load);
else
window.addEventListener(‘load’, _bf_load, false);
})();
</script>
</div>

The APIKEY is mandatory, as is the target option (this example targets the above div ‘listwidget’, but of course you can use whatever id you wish).

There are additional options that can be appended to the URL to further customise the widget, and these are:

?apikey=XXXXXXXXXXXXXXXXXXXXXXXXXX
returns all reviews  for APIKEY

?apikey=XXXXXXXXXXXXXXXXXXXXXXXXXX&relation=0123456789
returns all reviews for APIKEY and RELATION item

?apikey=XXXXXXXXXXXXXXXXXXXXXXXXXX&relation=0123456789&limit=10
returns all REVIEWS for APIKEY and RELATION item, limited to last 10 reviews in descending order

?apikey=XXXXXXXXXXXXXXXXXXXXXXXXXX&relation=0123456789&limit=10&charlimit=500
returns all REVIEWS for APIKEY and RELATION item, limited to last 10 reviews in descending order, and 500 characters per review

?apikey=XXXXXXXXXXXXXXXXXXXXXXXXXX&categoryid=123
returns all REVIEWS for APIKEY  and Category item. You can find your required category ID in the ‘Category’ section in the admin tool.

?apikey=XXXXXXXXXXXXXXXXXXXXXXXXXX&size=small&color=blue
returns all reviews  for APIKEY with SMALL BLUE rating stars

(sizes are: small, medium, large)

(colors are: black, blue, brown, darkblue, darkgreen, gold, green, orange, pink, red, silver, viplet, white, yellow)

 

Using the widgets on dynamic product pages

Note that in the case on an integration of the widgets on dynamic product page you will have to apply your chosen method of extracting the URL variable. So an example of Rating widget would be:

In PHP (using short tags):

<div id=”ratingwidget”>
<script type=”text/javascript” defer=”defer”>
(function() {
function _bf_load(){
var s = document.createElement(‘script’);
s.type = ‘text/javascript’;
s.async = true;
s.src = “https://www.digitalvisitorapps.com/api/widgets/rating/index.php?apikey=87ewrbtc8t98tnx8r9t74cbt89encbu&relation=<?= $_REQUEST[“prodID”]?>&target=ratingwidget”;
var x = document.getElementsByTagName(‘script’)[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent(‘onload’, _bf_load);
else
window.addEventListener(‘load’, _bf_load, false);
})();
</script>
</div>

In classic ASP:

<div id=”ratingwidget”>
<script type=”text/javascript” defer=”defer”>
(function() {
function _bf_load(){
var s = document.createElement(‘script’);
s.type = ‘text/javascript’;
s.async = true;
s.src = “https://www.digitalvisitorapps.com/api/widgets/rating/index.php? apikey=87ewrbtc8t98tnx8r9t74cbt89encbu&relation=<% response.write(Request.QueryString(“prodID”)) %>&target=ratingwidget”;
var x = document.getElementsByTagName(‘script’)[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent(‘onload’, _bf_load);
else
window.addEventListener(‘load’, _bf_load, false);
})();
</script>
</div>

Any questions or issues, please see our FAQs.