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! 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:

  1. 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.
  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. 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 GS1If 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.

displaying product reviews in 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)
  • localeThis 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.