Product Reviews Integration

The integration of product reviews is based on our Trustbadge^® technology. Just add a few lines of code to your existing integration and start collecting reviews immediately! The ultimate benefit is that you can collect reviews via the Trustbadge^® and make sure that all reviews are from real customers!

Integrating product reviews - how it works:

After you have been activated for the product reviews module, the necessary information about your products have to be added to the already existing Trustbadge^® code.

Integration in just two steps:

Product reviews are based on our Trustbadge^® technology. For this reason, integration of the Trustbadge^® is mandatory. In case you haven’t already integrated the Trustbadge^®, take a look at the following page.
For product reviews, you have to add the product data (e.g. product-id, product name, product url) from the basket to your existing code. This data needs be placed within the code shown below regarding the div container on your checkout page.

Order confirmation page div-container (Extension for product reviews):

<div id="trustedShopsCheckout" style="display: none;">
 <span id="tsCheckoutOrderNr">2016-05-21-001</span>
 <span id="tsCheckoutBuyerEmail">my.customer@mail.com</span>
 <span id="tsCheckoutOrderAmount">4005.95</span>
 <span id="tsCheckoutOrderCurrency">GBP</span>
 <span id="tsCheckoutOrderPaymentType">PREPAYMENT</span>
 <span id="tsCheckoutOrderEstDeliveryDate">2016-05-24</span>
 <!-- product reviews start -->
 <!-- for each product in the basket full set of data is required -->
 <span class="tsCheckoutProductItem">
 <span class="tsCheckoutProductUrl">http://www.shop.url/product_page.html</span>
 <span class="tsCheckoutProductImageUrl">http://www.shop.url/image.png</span>
 <span class="tsCheckoutProductName">Product Name</span>
 <span class="tsCheckoutProductSKU">0123456789</span>
 <span class="tsCheckoutProductGTIN">0123456789</span>
 <span class="tsCheckoutProductMPN">0123456789</span>
 <span class="tsCheckoutProductBrand">ABCDEFGHIJ</span>
 </span>
 <!-- product reviews end -->
 </div>

(* mandatory fields are tsCheckoutProductUrl, tsCheckoutProductName and tsCheckoutProductSKU). If you wish to use the transfer of reviews for displaying product ads in Google Shopping, please also provide the GTIN.

You are now ready for automated product review collection!

Your customer will first review your online shop via the review form, in which he can write a comment and give a star rating. He will then arrive on the confirmation page on which he will be able to review the product purchased on your website.

Legend:

Mandatory

tsCheckoutProductUrl: The product URL (important: correct, complete and accessible)
tsCheckoutProductName: This is the product name as stated on the product page
tsCheckoutProductSKU: The internal product identification code, or article number (SKU), used to identify each product in your online-shop

Optional

tsCheckoutProductImageUrl: Use this parameter to submit pictures of the product or the pictures’ URLs
tsCheckoutProductGTIN: This is the product identification code for trade items, developed by GS1. If you use Google Shopping and want to display your review stars in Shopping and payed product ads, please transfer the GTIN.
tsCheckoutProductMPN: Number that associates the product to its manufacturer
tsCheckoutProductBrand: This is the brand name of the product

Displaying product reviews

Increase your sales by integrating product reviews on the individual product pages of your shop.

Integrating the Product Sticker will enable you to display your reviews directly in the shop. Google loves user generated content. Customise the Review Sticker to your needs and make it blend perfectly into your website. Integrating the Product Sticker is easy: All you need to do is to embed a simple Javascript code.

<script type="text/javascript">
  _tsProductReviewsConfig = {
	tsid: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
	sku: ['ART-123'],
	variant: 'productreviews',
        /* optional */
	borderColor: '#0DBEDC',
	backgroundColor: '#ffffff',
	locale: 'en_GB',
	starColor: '#FFDC0F',
	commentBorderColor: '#dad9d5',
	commentHideArrow: 'false',
	richSnippets: 'on',
	starSize: '15px',
	ratingSummary: 'false',
	maxHeight: '1200px',
	hideEmptySticker: 'false',
	filter: 'true',
	introtext: 'What our customers say about us:'
  };
  var scripts = document.getElementsByTagName('SCRIPT'),
  me = scripts[scripts.length - 1];
  var _ts = document.createElement('SCRIPT');
  _ts.type = 'text/javascript';
  _ts.async = true;
  _ts.charset = 'utf-8';
  _ts.src ='//widgets.trustedshops.com/reviews/tsSticker/tsProductSticker.js';
  me.parentNode.insertBefore(_ts, me);
  _tsProductReviewsConfig.script = _ts;
</script>

The parameter “TS-ID”, “variant”, "locale" and “SKU” are mandatory; all others are up to you.

Explanation:

Required fields

tsId: Your Trusted Shops ID
variant: This is how to get the product sticker
sku: The product identification number or article number of the manufacturer (SKU)
locale: This parameter defines the language displayed in the sticker. Set it in accordance to your shop´s language.If you wish to integrate the sticker in a non-english shop, you can change its language by setting the specific locale-combination, for example de_DE for a German shop.

It is also possible to display reviews for a product that is available in different versions (e.g. different colours and sizes) at the same time. This allows you to group the reviews for products available in different designs together in one place.

Simply enter the various stock keeping units (SKUs) for the relevant product into the code as follows: [‘product1sku’,’product2sku’].

Optional fields

borderColor: Select a colour that matches with your shop, for the edge of the sticker
backgroundColor: Defines the background color of the sticker
starColor: Colour of the review stars
starSize: Size of the review stars (in pixels)
ratingSummary: Decide whether you want to display the overall rating at the top left of the sticker
maxHeight: This parameter allows you to adjust the size of the product sticker
introtext: Add a unique message text to draw users' attention to the product ratings.
hideEmptySticker: If you only want to display the sticker on your page once product reviews have been submitted, adjust the “hideEmptySticker” parameter accordingly.
filter: Enables sorting of grades in the sticker
richSnippets: By activating this parameter, the structured data for the display of stars on Google are provided directly in the sticker.
commentBorderColor: This parameter enables you to define the frame colour of each review.
commentHideArrow: With this parameter, you can activate/deactivate the small triangle below every review.

That’s it!

Displaying review stars separately

Not only on the product sticker do you have the the possibility to show your product review stars : you can also display the overall rating stars for each product on the product detail page, separately from the customers' comments. By displaying the review stars prominently and with an individually design, your customers get an idea of the overall rating of the product at first glance.

Fill in the following JavaScript code in order to publish the review stars with a custom design.

<div id="test"></div>
<script type="text/javascript" src="//widgets.trustedshops.com/reviews/tsSticker/tsProductStickerSummary.js"></script>
<script> 
var summaryBadge = new productStickerSummary();
summaryBadge.showSummary(
{
'tsId': 'TSID',
'sku': ['9990004'],
'element': '#test',
'starColor' : '#FFDC0F',
'starSize' : '14px',
'fontSize' : '12px',
'showRating' : 'true',
'scrollToReviews' : 'false',
'enablePlaceholder' : 'false',

} 
);
</script>

Explanation:

Required fields

tsId: Your Trusted Shops ID
sku: The product identification number or article number of the manufacturer (SKU)
element: Position of the review stars

Optional fields

starColor: Colour of the review stars
starSize: Size of the review stars (in pixels)
frontSize: Font size of the amount of collected reviews and of the overall rating (in pixels)
showRating: Show the overall rating (true) or conceal it (false)
scrollToReviews: By clicking on the stars the site scrolls to the Product Sticker (activate with "true")
enablePlaceholder: By activating this parameter, the product review stars are shown in grey if no review is available.

Support