Place the widget in the HTML exactly where it should appear on the page. It's as simple as that!
Each group of reviews starts with: "Write a Review", average stars, average rating, number of reviews and pagination.
Each review contains: Review Title, ReviewerName, Rating, ReviewDate, ReviewText
There are several options. The most important is modal (popup) or inline.
The user can have complete CSS control over the formatting, but extra formatting is usually not required because the default formatting is the containing page's CSS.
Which reviews are selected for display?
You have complete control of which reviews are selected for display. The default is to display all 5, 4 and 3 star reviews. You can select or deselect reviews individually from the Reviews list (login required).
Use the Display column to select or deselect by toggling the and .
Javascript Widget Instructions
These options are in the first part of the code. Blue text represents options that must be edited or left blank between the single quote marks.
Company='[account_id]';
REQUIRED. Same as ARF login.
Popups or Modals
A modal or lightbox is a popup box. The advantage of using a modal is that reviews can be displayed without altering the page layout. Multiple modals can be placed on a single page.
Modal='yes'; Default if left blank is no
modal-link-text='See reviews'; Default is blank. Leave blank between the single quote marks to hide the popup link and just show text like "★★★★☆ 4.0 from 25 reviews".
Modal_Link_Type='2'; //1 for anchor(Default), 2 for span (If 1 doesn't work, use 2 and set color with CSS), 3 for button
//When type 1 or 2 is chosen, the modal link is text as follows: (click to see modal in action)
//When type 3 is chosen, the modal link is a button as follows: (click to see modal in action)
Marketplace or Language
Marketplace='[marketplace]';
Language='[language]';
Optional. Use only one. If both are used Marketplace takes precedence and Language is ignored. Leaving empty between the single quote marks is usually best because reviews from all Marketplaces and Languages are included.
Valid Values | Marketplace | Language |
---|---|---|
AliExpress | n/a | |
Amazon DE | DE | |
Amazon US | EN | |
Amazon CA | ||
Amazon UK | ||
Amazon IN | ||
Amazon AU | ||
Amazon ES | ES | |
Amazon MX | ||
Amazon FR | FR | |
Amazon IT | IT |
Prod_id='[prod_no]';
Required - Internal product number or SKU.
Date_Format='Y-m-d';
Optional. 'Y-m-d' is the default. Example result: 2018-May-01
Review_Per_Page=20;
This pagination is inside the reviews div, not the containing page. Sort is newest first so the page content is kept fresh.
Star_Color='[color]';
Optional. Use a valid HTML color name such as green or color code such as #46a546. Default is #ffbc00. This is also the pagination background color.
For more detailed control over the star and pagination colors see the CSS guide.
Javascript Widget Code
Blue text represents options that must be edited or deleted.
Red text contains the instructions.
<script language="javascript" type="text/javascript" asnc >
/* Assign Filter Values here */
Company='[account_id]'; /*Same as ARF login. REQUIRED*/
Prod_id='[prod_no]'; /*Internal product number or SKU.*/
/* *** If both Marketplace and Language are used Marketplace takes precedence and Language is ignored. */
Marketplace='[marketplace]'; /*Marketplace code of the review's marketplace. Most users will leave blank to show all marketplaces. See chart for valid values.*/
Language='[language]'; /*Language code of the review's marketplace. Most users will leave blank to show all languages. See chart for valid values.*/
Date_Format=''; /*Default is 'Y-m-d'. Example: 2018-May-01. d - 01 to 31, m - 01 to 12, M - Jan to Dec, y - two digits (18), Y - four digits (2018)*/
Modal='yes'; /*Default is no if left blank */
Modal_Link_Text='See reviews'; /*Default is blank. Leave blank to hide popup link. Ignored unless Modal='yes'.*/
Modal_Link_Type='1'; /*1 for anchor(Default), 2 for span (If 1 doesn't work, use 2 and use CSS to set colors), 3 for button. Ignored unless Modal='yes'.*/
Height='400px'; /* Height of the div. FOR NON-MODAL ONLY. Use standard CSS units like px,em, %. */
Review_Per_Page=20; /*Default is 20 so can be empty. This pagination is inside the reviews div, not the containing page.*/
Star_Color= '#ffbc00'; /*Color name such as green or color code such as #46a546. Default is #ffbc00. This is also the pagination background color. More detailed control is available in the CSS.*/
/* Do Not modify anything below */
cnt=new Date().getUTCMilliseconds(); (function(w,d, s, id,ht,md,mdt,mdlt,c,m,l,p,df,pg,cl,cnt){ul=window.location.href; arr=ul.split("/"); id=id+cnt; var me=document.currentScript; var amzjs=d.createElement("div"); amzjs.id="arf_container_"+cnt; me.parentNode.insertBefore(amzjs,me); id=id+cnt; if(arr[0]=='http:'||arr[0]=='https:'){}else{arr[0]='http:';}ul=arr[0]+"//fetch.areviewfetch.com/snipserv/index2.php"; var js; if(d.getElementById(id)){return;}js=d.createElement(s); js.id=id; js.onload=function(){tpl=d.createElement("div"); tpl.className='arf-container'; tpl.innerHTML=window["amz_tpl_data_"+cnt]; amzjs.parentNode.insertBefore(tpl,amzjs); md=d.getElementById(cnt); if(md){d.body.appendChild(md)}; window["init_"+cnt]();}; ul+='?company='+c; ul+='&height='+ht; ul+='&height='+encodeURIComponent(ht); ul+='&modal='+md; ul+='&modal_text='+mdt; ul+='&modal_link_type='+mdlt; ul+='&marketplace='+m; ul+='&language='+l; ul+='&prod_id='+p; ul+='&date_format='+df; ul+='&review_per_page='+pg; ul+='&color='+encodeURIComponent(cl); ul+='&cnt='+cnt; ; js.src=ul;amzjs.appendChild(js);}(window,document, 'script', 'amz-js',Height,Modal,Modal_Link_Text,Modal_Link_Type,Company,Marketplace,Language,Prod_id,Date_Format,Review_Per_Page,Star_Color,cnt));
</script>
Valid Values | Marketplace | Language |
---|---|---|
AliExpress | n/a | |
Amazon DE | DE | |
Amazon US | EN | |
Amazon CA | ||
Amazon UK | ||
Amazon IN | ||
Amazon AU | ||
Amazon ES | ES | |
Amazon MX | ||
Amazon FR | FR | |
Amazon IT | IT |
Use only one. If both Marketplace and Language are used Marketplace takes precedence and Language is ignored.
CSS Guide to Optional Formatting
Review Content
Every part of the review has a CSS class that can be formatted. However, no CSS formatting is necessary so you can ignore this section. Most of the containing page's formatting is used.
This graphic is a guide to the class names. See the HTML layout below. Dotted lines represent container divs.
HTML structure and default CSS
All parts of the reviews can be styled in a CSS override file. The page's styles are the default.
Most of the CSS requires !important to take precedence.
<style>
.arf-summary {
font-size: 110% !important;
margin-bottom: 20px !important;
}
.arf-prod-title {
font-size: 115% !important;
font-weight: 600 !important;
}
.arf-title {
font-weight: 600 !important;
}
.arf-date {
display: inline; /* To hide the date change to display: none; */
}
/*The following provides complete control over star and pagination colors.*/
/*To specify just one color for all it is simpler to specify the Star_Color variable in the widget*/
.arf-avgstar .arf-star-fill { /*Main star color in the summary section*/
color:#ffbc00 !important;
}
.arf-avgstar {
color:#c5c5c5 !important; /*Star outline color in the summary section*/
}
.arf-stars .arf-star-fill { /*Main star color for each of the reviews*/
color:#ffbc00 !important;
}
.arf-stars { /*Star outline color for each of the reviews*/
color:#c5c5c5 !important;
}
#arf-reviews .arf-pagination a { /* Pagination links */
background: #ffbc00 !important;
color: #fff !important;
}
#arf_page_nav span { /* Pagination active page */
background: #e1e1e1 !important;
color: #000 !important;
}
</style>
<!-- The actual HTML is more complicated, but this structure provides a good overview. -->
<!-- Top section -->
<div class="arf-reviews">
<div class="arf-summary">
<div class=".arf-prod-title">Product Title</div>
<div><span class="arf-avgstar">Star graphic - average stars</span>
<span class="arf-avg">n.n based on x reviews</span></div>
</div>
<!-- Review section. Repeats as often as necessary -->
<div class="arf-review">
<p><span class="arf-star">Star graphic (1-5)</span><span class="arf-name"> Reviewer Name </span><span class="arf-date">Review Date</span></p>
<p class="arf-title">Review Title</p>
<p class="arf-text">Review Text</p>
</div>
</div>
<hr />
Modal Popup
The content of the modal is formatted the same as the Review Content tab.
There are two parts of the modal that can be formatted, but additional formatting is not necessary.
1. The text that shows the stars and modal link such as
2. The popup itself. The following can be formatted. Color of the page surrounding the modal and the size of the modal.
Sample PHP for Product Pages
<?PHP
/*The folowing six tables, field and variable names should be changed to match the
names in your DB.*/
//1. $con
//Your connection parameter, which usually include db name, user and password.
//2. product_table
//The table with product details
//3. $auto_id
/*The code assumes that the auto_id is from the code used to create your
product details page. It could be in the URL or could be a variable
from your product table code. It is also used in the query that
retrieves product details for the page. This auto_id is related with to
the product_table (which has the record id, product id, parent id etc.)
by column id*/
//4. $product_id
/*This is the product id field in your table. It is passed to the ARF
prod_id parameter.*/
error_reporting(1);
$auto_id=isset($_GET["id"])?$_GET["id"]:'';
$prod_id="";
$sql = "SELECT * from product_table where id='$auto_id'";
$result = $con->query($sql);
while( $records=mysqli_fetch_assoc($result)){
$Prod_id= $records["product_id"] ;
}
?>
<head>
</head>
<body>
//The following is the widget code. <script language="javascript" type="text/javascript" asnc >
//Assign Filter Values here.
Company='[account_id]'; //Same as ARF login. REQUIRED
Prod_id='[prod_no]'; //Internal product number. This allows displaying reviews from all marketplaces.
//// If both Marketplace and Language are used Marketplace takes precedence and Language is ignored. ////
Marketplace='[marketplace]'; //Marketplace code of the review's marketplace. Most users will leave blank to show all marketplaces. See chart for valid values.
Language='[language]'; //Language code of the review's marketplace. Most users will leave blank to show all languages. See chart for valid values.
Date_Format=''; //Default is 'Y-m-d'. Example: 2018-May-01
Modal='yes'; //Default is no if left blank
Modal_Link_Text='See reviews'; //Default is blank. Leave blank to hide popup link. Ignored unless Modal='yes'.
Modal_Link_Type='2'; //1 for anchor(Default), 2 for span (If 1 doesn't work, use 2 and set color with CSS), 3 for button. Ignored unless Modal='yes'.
Height='300px'; // Height of the div. FOR NON-MODAL ONLY. Use standard CSS units like px,em,%.
Review_Per_Page=20; //Default is 20 so can be empty. This pagination is inside the reviews div, not the containing page.
Star_Color='[color]'; //Color name such as green or color code such as #46a546. Default is #ffbc00. This is also the pagination background color. More detailed control is available in the CSS.
// Do Not modify anything below
cnt=new Date().getUTCMilliseconds(); (function(w,d, s, id,ht,md,mdt,mdlt,c,m,l,p,df,pg,cl,cnt){ul=window.location.href; arr=ul.split("/"); id=id+cnt; var me=document.currentScript; var amzjs=d.createElement("div"); amzjs.id="arf_container_"+cnt; me.parentNode.insertBefore(amzjs,me); id=id+cnt; if(arr[0]=='http:'||arr[0]=='https:'){}else{arr[0]='http:';}ul=arr[0]+"//fetch.areviewfetch.com/snipserv/index2.php"; var js; if(d.getElementById(id)){return;}js=d.createElement(s); js.id=id; js.onload=function(){tpl=d.createElement("div"); tpl.className='arf-container'; tpl.innerHTML=window["amz_tpl_data_"+cnt]; amzjs.parentNode.insertBefore(tpl,amzjs); md=d.getElementById(cnt); if(md){d.body.appendChild(md)}; window["init_"+cnt]();}; ul+='?company='+c; ul+='&height='+ht; ul+='&height='+encodeURIComponent(ht); ul+='&modal='+md; ul+='&modal_text='+mdt; ul+='&modal_link_type='+mdlt; ul+='&marketplace='+m; ul+='&language='+l; ul+='&prod_id='+p; ul+='&date_format='+df; ul+='&review_per_page='+pg; ul+='&color='+encodeURIComponent(cl); ul+='&cnt='+cnt; ; js.src=ul;amzjs.appendChild(js);}(window,document, 'script', 'amz-js',Height,Modal,Modal_Link_Text,Modal_Link_Type,Company,Marketplace,Language,Prod_id,Date_Format,Review_Per_Page,Star_Color,cnt));
</script>
Valid Values | Marketplace | Language |
---|---|---|
AliExpress | n/a | |
Amazon DE | DE | |
Amazon US | EN | |
Amazon CA | ||
Amazon UK | ||
Amazon IN | ||
Amazon AU | ||
Amazon ES | ES | |
Amazon MX | ||
Amazon FR | FR | |
Amazon IT | IT |