Instalação genérica dos scripts da Trustvox

Este artigo documenta os passos necessários para a instalação dos scripts na Trustvox de forma genérica.

1 - Widget principal 

O widget principal é o responsável por exibir as opiniões e perguntas na página do produto.

O script abaixo deve ser inserido na página de produto e de preferência dentro da tag <head>.

*Não esqueça de substituir as variáveis de acordo com a sua loja :)

<script type="text/javascript">
 window._trustvox =  [];
 _trustvox.push(['_storeId', 'Id-Loja']);

 _trustvox.push(['_productId',  productId]);
 _trustvox.push(['_productName', productName]);
 _trustvox.push(['_productPhotos', [url.image]]);
</script>
<script async="true" type="text/javascript" src="//static.trustvox.com.br/sincero/sincero.js"></script>

No local que deseja exibir o widget, insira a div abaixo:

<div id="_trustvox_widget"></div>

O resultado deve ser:

1.1 Sellers

Além das informações do produto, o widget permite que sejam enviadas informação pertencentes aos sellers de determinado produto, possibilitando a filtragem de opiniões e perguntas de produtos que são vendidos por determinados vendedores. Para isso é preciso que na instalação do widget, o script seja iniciado juntamente com a lista de sellers, que realiza a venda daquela produto, contendo a identificação, nome e logo de cada um deles. 
<script type="text/javascript">
  window._trustvox = [];
  var sellers = [{ id: '123', name: 'Nome', logo: 'https://logo.url' }];
  _trustvox.push(['_sellers', sellers]);
</script>

Para que a importação dos sellers ocorra, é necessário que a loja possua a preferencia enable_marketplace habilitada. Caso contrário, os sellers enviados serão ignorados.

1.2 GTIN/EAN

É possível enriquecer o cadastro dos produtos adicionando códigos do tipo GTIN e EAN, para utilizar-se dessa feature basta adicionar a configuração inicial uma lista de GTIN's ou EAN's de acordo com o exemplo:

<script type="text/javascript">
 _trustvox.push(['_productGtins', ["gtin", "outro-gtin"]]);
 _trustvox.push(['_productEans', ["ean", "outro-ean"]]);
</script>

1.3 Instalação do sincero.js em SPA's (single page applications)

É possível que você enfrente algum tipo de problema ao instalar o sincero em seu SPA. 
Para resolver esse problema desenvolvemos API's públicas para que você as utilize caso precise controlar manualmente a exibição do widget na sua página.

// instancia o widget na sua página
window._trustvox_initializer.initialize();

// remove/unload o widget da página
window._trustvox_initializer.cleanup();

O método #initialize deve ser usado para inicializar a instância da Trustvox na sua página de detalhes de produto. Vale ressaltar que: 

  • É necessário que o <script src="static.trustvox.com.br/sincero/sincero.js"> já tenha sido devidamente carregado na página.
  • Todos os dados relativos ao produto (basicamente tudo que está no `_trustvox`) já tenha sido adicionado na página também.

Após tudo isso ser carregado, é possível chamar o `initialize();` que o widget será carregado.

O #cleanup é literalmente o contrário do initialize, descarregando o widget por completo da página.


2 - Estrelas na listagem e página do produto

É possível exibir a nota de cada produto na listagem dos produtos e também na página de produto próximo ao nome do produto.

O script abaixo deve ser inserido em todas as página que deseja exibir as estrelinhas, de preferência dentro da tag <head>.

<script type="text/javascript">
 var _trustvox_shelf_rate = _trustvox_shelf_rate || [];
 _trustvox_shelf_rate.push(['_storeId', 'Id-Loja']);
</script>
<script type="text/javascript" async="true" src="//rate.trustvox.com.br/widget.js"></script>

IMPORTANTE: Caso sua loja tenha prateleiras que carreguem dinamicamente (com scroll infinito por exemplo), é necessário adicionar a seguinte linha no script:

_trustvox_shelf_rate.push(['_productContainer', '#containeres_dinamicos']);

Substituir pelo container onde os dados estão sendo carregados dinamicamente. Exemplo:

_trustvox_shelf_rate.push(['_productContainer', '.classe1, .classe2, #algumId']);

No local que deseja exibir as estrelas, insira o código abaixo:

<div data-trustvox-product-code="productId"></div>

O resultado deve ser:

Dentro do template da página de produto, próximo ao nome do produto, deve inserir o código:

<a class="trustvox-fluid-jump trustvox-widget-rating" href="#trustvox-reviews" title="Pergunte e veja opiniões de quem já comprou">
    <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">Clique e veja!</span>
</a>
<style type="text/css">
.trustvox-widget-rating .ts-shelf-container,
.trustvox-widget-rating .trustvox-shelf-container {display: inline-block;}
.trustvox-widget-rating span.rating-click-here {
  top: -3px;
  display: inline-block;
  position: relative;
  color: #DAA81D;
}
.trustvox-widget-rating:hover span.rating-click-here {text-decoration: underline;}
</style>

O estilo css pode ser inserido no css padrão da loja. Você tem total liberdade para altera-lo.

O resultado deve ser: 

IMPORTANTE: Para maximizar a chance do google indexar seu produto e no resultado de busca exibir seu produto com Rich Snippets é necessário seguir os seguintes passos:

Adicionar as propriedades aos elementos visíveis:

<div id="content" itemscope="" itemtype="http://schema.org/Product">
    <div id="name" class="product-name">
      <h1 class="name" itemprop="name">Nome do seu produto</h1>
      ...

As <divs> são apenas ilustrativas, o importante são as propriedades "itemscope", "itemtype" e  "itemprop".

Ferramenta do google para validar seu código: Structured Data Testing Tool

3 - Instalação do Selo de Opiniões Verdadeiras

Para que uma loja possa ter o Selo Reviews Verdadeiros ela deve ter instalado a Trustvox mais de 30 dias e pelo menos 50 opiniões de produto publicada na Trustvox.

Para isso, o cliente precisa entrar em contato com a Trustvox em meajuda@reclameaqui.com.br para gerar o seu Certificado de Opiniões Verdadeiras.

Script de instalação:

<!-- Trustvox -->
<script type="text/javascript" async="true" src="//certificate.trustvox.com.br/widget.js"></script>
<!-- /Trustvox --><br>

Agora você já pode acessar seu painel:

1. Vá até o canto superior direito e clique em "Minha conta";

2. Clique no botão em formato cascata no centro da imagem abaixo "Preferências de Loja";

3. Clique no botão "Widget do Certificado".

4 - Posicionamento

O widget do selo, dispõe conforme a figura de várias opções de posicionamento (conforme figura abaixo).

Versão fixa

Ao marcar a opção "Usar versão fixa" é necessário incluir um elemento específico na página, no qual a imagem do certificado (e pop-up se aplicável) serão adicionados. 

Portanto insira o elemento abaixo: 

<!-- Posicione esta div onde deseja que o selo fixo apareça (nenhum CSS é necessário) -->
<div data-trustvox-certificate-fixed></div><br>

Ainda é possível escolher qual é o tipo de selo que você quer que seja exibido na posição fixa, a figura abaixo ilustra as opções disponíveis.

Versão flutuante

Nenhum elemento adicional é necessário ao selecionar a versão flutuante. Para utilizá-la basta marcar a opção "Usar a versão flutuante", e então escolher qual lado será exibido (Direito ou Esquerdo).

Formato de exibição

Existem duas formas de exibição disponíveis do selo site sincero. Uma delas é usando apenas um link e a outra é usando um pop-up.

Link

Esse é o comportamento padrão do selo. Ele apenas imprime na página da loja a imagem do selo Site Sincero e ao ser clicada, redireciona para o endereço correspondente do certificado. Para ativá-lo basta manter a opção  "Exibir selo usando pop-up"  desmarcada.

Pop-Up

A opção  "Exibir selo usando pop-up" já vem pré-selecionada inicialmente. Ela exibe o selo dentro de uma espécie de pop-up/modal dentro da própria página da loja (conforme mostra a figura abaixo).

Dentro desta opção é possível requerer que o certificado seja pré-carregado no momento em que a página está sendo renderizada pelo navegador. Essa opção acrescenta alguns milésimos de segundo para o carregamento total da página da loja, mas melhora a experiência final de usuário. 

Para utilizar essa vantagem basta selecionar a opção "Pré carregar "pop-up" do certificado".

Caso surja alguma dúvida, só nos chamar abaixo ou dentro da Trustvox :)