Support

Integrating product reviews

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! This is great, because by collecting reviews via the Trustbadge® you make sure that all reviewers are real customers of yours!


Integrating product reviews- that´s 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:

  1. Product reviews are based on our Trustbadge® technology. Thus, integration of the Trustbadge® is a mandatory requirement. In case you have not already integrated the Trustbadge®, take a look at this page.
  2. 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. These data go within the code of the below described 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">EUR</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
  • 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 your product detail pages of your shop.
product reviews in shop
Integrating the Product Sticker will enable you to display your review comments directly in the shop. Google loves user generated content. Customise the Review Sticker to your needs and make it fit perfectly into your website. Integrating the Sticker is easy: All you need to do is embedding 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 of free choice. 

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: The “locale” parameter controls the language of the product sticker. If you want to display the sticker in a language other than English, please enter another language/country combination here, e.g. de_DE for German.

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: Select the background colour of the sticker, e.g. White for a generic solution.
  • 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: This parameter enables sorting by grades
  • 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.

Do you need further information?