This article show all the needed to fully integrate with Trustvox.
1. Integration with Trustvox API
First, it's needed to integrate with Trustvox API in order to send orders to Trustvox. To know how this works, please see this article.
When your company it's integrated with Trustvox API, it's needed to insert all the scripts responsible for Trustvox widgets.
2. Front-end Setup
2.1. Reviews Widget
The following code should be inserted in the product page, preferably inside "<head>" tag
<script type="text/javascript">
window._trustvox = [];
_trustvox.push(['_storeId', 'Company-Id']);
_trustvox.push(['_productId', productId]);
_trustvox.push(['_productName', productName]);
_trustvox.push(['_productPhotos', [url.image]]);
<!-- Production Environment -->
<script async="true" type="text/javascript" src="//static.trustvox.com.br/sincero/sincero.js"></script>
<!-- Staging Environment -->
<!-- <script async="true" type="text/javascript" src="// https://static.trustvox.com.br/sincero-staging/sincero.js"></script> -->
Insert this code where we need to show the reviews widget:
<div id="_trustvox_widget"></div>
The result should be:
2.2. Stars Widget
2.2.1. Star widget in the shelf
It's possible to show the product rating in the products shelf. It's recommend to insert next to the product's name.
This script should be inserted in every page that it's needed to show the stars, preferably em "<head>" section.
<script type="text/javascript">
var _trustvox_shelf_rate = _trustvox_shelf_rate || [];
_trustvox_shelf_rate.push(['_storeId', 'Company-Id']);
</script>
<!-- Production Environment-->
<script type="text/javascript" async="true" src="//rate.trustvox.com.br/widget.js"></script>
<!-- Staging Environment-->
<!-- <script type="text/javascript" async="true" src="static.trustvox.com.br/rate-widget-js-staging/widget.js "></script> -->
Important: If you website (or store) have shelfs that have dynamic loading (infinite scroll for instance), it'll be needed to add the following script. This way, Trustvox can identify as generate dynamic stars as well:
_trustvox_shelf_rate.push(['_productContainer', '.sampleShelfClass, #sampleShelfDiv']);
Insert the code below where it's needed to show the stars:
<div data-trustvox-product-code="productId"></div>
If everything it's ok, the result should be:
2.2.2. Star Widget in the product's page
It's needed to insert this code inside the product page, next to the product's name:
<a class="trustvox-fluid-jump trustvox-widget-rating" href="#trustvox-reviews" title="See reviews from people who bought the product">
<div class="trustvox-shelf-container" data-trustvox-product-code-js="productId" data-trustvox-should-skip-filter="true" data-trustvox-display-rate-schema="true"></div>
<span class="rating-click-here">Have a look!</span>
</a>
<style type="text/css">
.trustvox-widget-rating .ts-shelf-container,
.trustvox-widget-rating .trustvox-shelf-container {display: inline-block;}
.trustvox-widget-rating:hover span.rating-click-here {text-decoration: underline;}
.trustvox-widget-rating span.rating-click-here {
top: -3px;
display: inline-block;
position: relative;
color: #DAA81D;
}
</style>
The css showed it's free to be changed following the look and feel from your page.
The result should be:
2.2.3. Helping Google to index the reviews
In order to help Google to index the reviews from your product in the search results page, it's needed to follow this steps
Add this properties in the visible:
<div id="content" itemscope="" itemtype="http://schema.org/Product">
<div id="name" class="product-name">
<h1 class="name" itemprop="name">Product name</h1>
...
The <divs> showed in this example are illustrative, the important thing to keep in mind are the "itemscope", "itemtype" and "itemprop".
To check if your code it's valid, you case use this tool: Structured Data Testing Tool
2.3. "Site Sincero" badge setup
The "Site Sincero" badge is a certification that Trustvox issues when reviews are collected by it. This badge certifies that every reviews comes from a real customer who actually bought a product.
In order to insert the "Site Sincero" badge, you need to insert this code:
<!-- Production Environment-->
<script type="text/javascript" async="true" src="//certificate.trustvox.com.br/widget.js"></script>
<!-- Staging Environment-->
<!-- <script type="text/javascript" async="true" src="//static.trustvox.com.br/certificate-widget-staging/widget.js"></script> -->
2.3.1. In order to enable, it's need to go to the Trustvox Admin, click in the right up corner at "Home":
2.3.2. Click at the button "Preferences";
2.3.3. Click at the button "Certificate"
Badge location at your page
The badge widget can be insert in many places from your company (according the image below):
Fixed Version
Using this option, it's needed to include an specific element in the page, indicating where the badge will appear in the page.
Insert this element:
Put this div where the badge should appear (no css it's needed)
<div data-trustvox-certificate-fixed></div>
Floating Version
There's no need to add any additional element using this option. It's needed to use the option "Floating" and then choose if it'll appear the right or left side from your page.
Badge user interaction
There's two ways to show the badge. One it's using a hyperlink and the other it's using a pop-up.
Hyperlink
This is the default badge behaviour. When this option it's used, whenever a user clicks the badge, it gets redirected to the company certificate page from Trustvox. To activate this option, you should not mark the option "Pop-up version".
Pop-Up
With the option "Pop-up version", when a user clicks the badge, it'll be showed the certificate page from Trustvox in a pop-up. This its an interesting behaviour because the user never leaves the company page.
It's interesting to use the option "Pre load "Pop-up"" in order to give a better experience for the user whenever he/she clicks the badge:
If you need any help, feel free to reach us in the contact below this article :)