Instalação da Trustvox na plataforma Vtex

Esse documento demonstra como instalar o Widget Trustvox na plataforma Vtex.

1. Entrar na página Gerenciador do Portal

O endereço padrão para acessar o Gerenciador do Portal é  http://nome-da-sua-loja.vtexcommercestable.com.br/admin/a

2. Encontrar nome do template da página de produto

Para encontrar o template da página de produto, você deve clicar em:  Portal > Web-sites > nome-da-sua-loja > / > Produto > @Produto@ > (clicar no arquivo que está ativado "check em vermelho") > Template

3. Abrir e editar o template de produto

Para abrir o template de produto entre na pasta  Templates de Página e clique no nome de template do passo anterior.

Dentro do template da página de produto, adicionar o código do bloco abaixo, antes do fechamento da tag </head>:

CSS responsável pelo estilo nas estrelinhas com texto "Clique e veja!".
<!-- Trustvox -->
<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;
        font-size: 12px;
    }
    .trustvox-widget-rating:hover span.rating-click-here {text-decoration: underline;}
</style>
<!-- /Trustvox -->

Adicionar também o seguinte código após a tag <body>:

Script principal, responsável por carregar a Trustvox na página.
<!-- Trustvox -->
<script type="text/javascript">
 window._trustvox =  [];
 _trustvox.push(['_storeId', 'IDENTIFICADOR DA SUA LOJA']);

 _trustvox.push(['_productId',  skuJson.productId]);
 _trustvox.push(['_productName', skuJson.name]);
 _trustvox.push(['_productPhotos', [skuJson.skus[0].image]]);

  $(document).ready(function() {
    $('.trustvox-fluid-jump').on('click', function(event) {
        event.preventDefault();
        var offset = $($(this).attr('href')).offset().top;
        $('html, body').animate({scrollTop:offset}, 500);
    });
  });
</script>
<script async="true" type="text/javascript" src="//static.trustvox.com.br/sincero/sincero.js"></script>
<!-- /Trustvox -->

O identificador da sua loja pode ser obtido diretamente no seu administrador da Trustvox:

Para exibir as estrelinhas abaixo do nome de produto com "Clique e veja!", insira o código abaixo logo após o nome do produto em seu template: 

<!-- Trustvox -->
<div class="trustvox-rating">
  <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="skuJson.productId" data-trustvox-should-skip-filter="true" data-trustvox-display-rate-schema="true"></div>
    <span class="rating-click-here">Clique e veja!</span>
  </a>
</div>
<!-- /Trustvox -->

Para exibir nosso widget principal, este código deve ser inserido onde será seu local de exibição:

<!-- Trustvox -->
<div class="trustvox-container">
  <h3 id="trustvox-reviews">Pergunte e veja opiniões de quem já comprou</h3>
  <div id="_trustvox_widget"></div>
</div>
<!-- /Trustvox -->

Feito isso, salve a alteração no botão  Salvar Template.

4. Script necessário para carregar as estrelinhas nas prateleiras e vitrines

Por padrão este script fica em um template que se repita nas demais páginas, normalmente: footer.
<!-- Trustvox -->
<script type="text/javascript">
 var _trustvox_shelf_rate = _trustvox_shelf_rate || [];
 _trustvox_shelf_rate.push(['_storeId', 'IDENTIFICADOR DA SUA LOJA']);
 _trustvox_shelf_rate.push(['_productContainer', 'body']);
</script>
<script type="text/javascript" async="true" src="//rate.trustvox.com.br/widget.js"></script>
<!-- /Trustvox -->

Novamente salve a alteração no template.

5. Exibir estrelinhas nas vitrines e prateleiras

Este deve ser instalado abaixo do nome do produto nas prateleiras e vitrines utilizadas, que ficam localizadas na pasta "Shelves Templates".
<!-- Trustvox -->
<div class="trustvox-showcase" style="text-align: center">
  <div data-trustvox-product-code="$product.Id"></div>
</div>
<!-- /Trustvox -->

6. Informar à Trustvox seu Token e chave da aplicação

Para que os pedidos sejam importados pela Trustvox corretamente, é necessário que o token e chave da aplicação sejam passados à Trustvox, por gentileza siga estes passos aqui.

Ainda precisa de ajuda? Entre em contato Entre em contato