Instalação genérica dos scripts da Trustvox

Este artigo documenta os passos necessários para a instalação dos scripts na RA Trustvox em qualquer plataforma, com seus devidos ajustes de variáveis e locais de inserção.

1. Widget de opiniões de produto

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

Atenção! Não esqueça de substituir as variáveis de acordo com a sua loja.

Isto é, ID-LOJA, corresponde ao identificador da sua empresa na RA Trustvox.
Também logo abaixo está: "productId", "productName" e "[url.image]", para estes favor remover e incluir as variáveis dinâmicas da sua loja, que trazem estes dados.

<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 (passo não obrigatório)

Além das informações do produto, o script do 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.

Veja um exemplo:

<script type="text/javascript">
  window._trustvox = [];
  var sellers = [{ id: '123', name: 'Nome', logo: 'https://logo.url' }];
  _trustvox.push(['_sellers', sellers]);
</script><br>

Para que a importação dos sellers ocorra, é necessário informar para a RA Trustvox o interesse nisto. Desta forma iremos habilitar isto como uma preferência, do nosso lado.

1.2. Gtin/Ean (passo não obrigatório)

É 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 em SPA's (single page applications) (passo não obrigatório)

É 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 RA Trustvox na sua página de detalhes de produto. Vale ressaltar que:

É necessário que o script "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, removendo assim o widget por completo da página.

1.4. Atributos 'extra', para medicamentos (por exemplo) (passo não obrigatório):

Caso você possua produtos que não possam coletar opiniões, é necessário informar para a RA Trustvox tanto no back-end, quanto front-end, veja como:

<script type="text/javascript">
 var extra = {"department_id": VARIAVEL-DEPARTAMENTO};
 _trustvox.push(['_productExtraAttributes', extra]);
</script>

Com isto você estará fornecendo o "departament_id" de todos os seus produtos, e poderá nos dizer, pelo seu canal de comunicação, qual "departament_id" devemos ignorar.

Ou seja, ignorando não iremos registrá-lo em nossa base e nem coletar opiniões.

Atenção apenas, para que isto também deve ser configurado no back-end! Isto pode ser compreendido fazendo leitura de nossa documentação de integração via API.

A boa notícia é que se você é uma VTEX, você apenas precisará se preocupar com seu front-end, pois no back-end já temos integração direta. ;)

1.5. Agrupamento de produtos similares (passo não obrigatório):

Caso você possua produtos similares, que apenas variem cores, por exemplo: você pode agrupar estes produtos para que compartilhem das mesmas opiniões.

Para isto é necessário informar para a RA Trustvox o nome ou identificador do grupo através do front-end, veja como:

Atenção: quando este script rodar, ele automaticamente irá refletir as opiniões de todos os produtos que tiverem o mesmo identificador, portanto é necessário ter muita atenção para que a variável não se repita em produtos que não é desejado o comportamento anteriormente descrito.

<script type="text/javascript">
 _trustvox.push(['_productGroup', 'VARIAVEL-IDENTIFICADOR-GRUPO']);   
</script>

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.

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

Atenção! Não esqueça de substituir "Id-loja" de acordo com o seu identificador.

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

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

O resultado deve ser:

2.1. Apenas caso sua loja tenha prateleiras que carreguem dinamicamente (passo não obrigatório)

Com scroll infinito por exemplo, é necessário adicionar a seguinte linha no script:

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

Substituir "#containers_dinamicos", pelo id ou classe dos containers onde os dados estão sendo carregados dinamicamente. Exemplo:

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

2.2. Dentro do template da página de produto, abaixo 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>

Com o código acima, você terá as estrelas sendo exibidas também abaixo do nome do produto na página do mesmo.

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

O resultado deve ser:

Para maximizar a chance do google indexar seu produto e no resultado de busca exibir seu produto com Rich Snippets sugerimos leitura do seguinte artigo: SEO - AGGREGATERATING (ESTRELAS) E REVIEW (OPINIÕES) NOS RESULTADOS DO GOOGLE

Passos opcionais: Caso você queira instalar também: " carousel com opiniões de loja" e " selo de opiniões verdadeiras", basta seguir os passos abaixo:

3. Selo de opiniões verdadeiras:

Obs. para que você precisa ter no mínimo 10 opiniões, e tê-lo configurado, para isto veja aqui como fazer:

3.1. Adicionar o código a seguir, antes do fechamento da tag </body>
em todas as páginas que deseja exibir o selo (ou em um template que se repita):

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

3.2. Com o script acima você terá a opção de selo flutuante já funcionando, porém caso queira exibir o selo fixo em um local apropriado para selos,
será necessário então incluir o código abaixo, exatamente onde o mesmo deve carregar:

<!-- Trustvox -->
<div data-trustvox-certificate-fixed="data-trustvox-certificate-fixed"></div>
<!-- /Trustvox -->

E pronto! Com isto você realizou a instalação do selo de opiniões verdadeiras!

4. Carousel com opiniões de loja:

4.1. Inserir no HTML de seu template ou no local apropriado para tal, posicionado antes ou logo na abertura da tag body, os scripts responsáveis pelo Carousel:

Obs: Não esquecer de trocar o ID-DA-LOJA.

<!-- Trustvox -->
<script type="text/javascript" src="//colt.trustvox.com.br/colt.min.js"></script> 
<script>
  var _trustvox_colt = _trustvox_colt || [];
  _trustvox_colt.push(['_storeId', 'ID-DA-LOJA'], ['_limit', '7']);
</script>
<!-- /Trustvox -->

4.2. Inserir a div responsável por carregar o carousel no local em que o carousel deve ser carregado:

<div id="_trustvox_colt"></div>

Feito! Agora você tem um carousel com opiniões de loja sendo exibido, desde que é claro: você tenha no mínimo três opiniões de loja para serem carregadas. :)

Qualquer dúvida, entre em contato com a RA Trustvox através do chat 💬 ou formulário RA Trustvox 📝 disponíveis no menu 'Dúvidas e Suporte' do seu painel (de Segunda a Sexta das 9h às 17h - exceto feriados). Conte com a gente!

Instalação genérica dos scripts da Trustvox

Entre em contato