Como exibir as opiniões da RA Trustvox na plataforma Tray Commerce

Esse artigo mostra como exibir as opiniões (reviews) e inserir os scripts da RA Trustvox na plataforma Tray Commerce.

⚠️ Para que as opiniões coletadas pela RA Trustvox sejam exibidas em seu e-commerce, verifique se a integração das vendas e configuração completa da ferramenta já foram realizadas. Você pode saber mais aqui.

Com seu ID e Token em mãos, inicie a instalação da RA Trustvox no front-end da sua loja TrayCommerce. 😉

O seu ID e Token podem ser localizados no seu painel RA Trustvox, na aba "Preferências da empresa". Caso seja sua primeira instalação RA Trustvox, esses dados serão fornecidos pelo nosso time de Onboarding.

Vamos lá!

1. Acessar seu tema que está em: Minha Loja > Design da loja:

Conforme as instruções da plataforma, é necessário duplicar o tema antes da edição. Explicamos abaixo, de forma simplificada como proceder.

2. Com o acesso de edição, você deve duplicar o tema padrão

3. Clicar em "Editar HTML" no tema duplicado:

4. Em sua estrutura de pastas na lateral esquerda, navegue até: layouts > default.html

4.1. Dentro do template "default", adicionar o código do bloco abaixo (responsável pelo estilo das estrelas), antes do fechamento da tag </head>:

<!-- Trustvox -->
<style type="text/css">
    .trustvox-rating:hover {
        cursor: pointer;
    }
    .trustvox-showcase {
        margin: 10px 0 10px 0;
        min-height: 20px;
        min-width: 100%;
        text-align: center;
    }
    .trustvox-rating {
        margin: 5px 0 5px 0;
    }
    .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 -->

4.2. Agora, para que as estrelinhas apareçam no site, também é necessário adicionar o próximo código antes do fechamento da tag </body>.

Obs: Em ID-DA-LOJA troque pelo número da sua identificação (disponível em seu painel na seção "Preferências da Empresa").

<!-- Trustvox -->
<script type="text/javascript">
 var _trustvox_shelf_rate = _trustvox_shelf_rate || [];
 _trustvox_shelf_rate.push(['_storeId', 'ID-DA-LOJA']);
 _trustvox_shelf_rate.push(['_productContainer', 'body']);

 jQuery(document).ready(function() {
   jQuery(function($) {
       $(".trustvox-rating").click(function() {
           $('html, body').animate({
               scrollTop: $(".trustvox-container").offset().top -= 115
           }, 1000);
       });
   });
 }); 
</script>
<script type="text/javascript" async="true" src="//rate.trustvox.com.br/widget.js"></script>
<!-- /Trustvox -->

5. Procurar em sua estrutura de pastas por sua página de produto, que fica em: pages > product.html

5.1. Adicionar o código abaixo logo no início do documento, acima de todo o conteúdo. Esse script é necessário para carregamento do widget.

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

<!-- Trustvox -->
<script type="text/javascript">
 window._trustvox =  [];
 _trustvox.push(['_storeId', 'ID-DA-LOJA']);

 _trustvox.push(['_productId',  '{{ product.id }}']);
 _trustvox.push(['_productName', '{{ product.name }}']);
 
 {% if product.images %} 
    _trustvox.push(['_productPhotos', '{{ product.images[0].full }}']); 
 {% endif %}
</script>
<script async="true" type="text/javascript" src="//static.trustvox.com.br/sincero/sincero.js"></script>
<!-- /Trustvox --><br></script> <!-- /Trustvox --><br>

5.2. Localizar "{{ product.name }}" variável que carrega o nome principal do produto na página do mesmo, e inserir o código das estrelinhas, logo abaixo:

<!-- Trustvox -->
<div class="trustvox-rating">
   <div class="trustvox-fluid-jump trustvox-widget-rating" id="trustvox-reviews">
      <div class="trustvox-shelf-container" data-trustvox-product-code-js="{{ product.id }}" data-trustvox-display-rate-schema="true"></div>
      <span class="rating-click-here">Clique e veja!</span>
   </div>
</div>
<!-- /Trustvox -->

Ficará assim:

5.3. Ainda em "product.html" você irá inserir a div que exibe o widget de opiniões e perguntas.

Comumente é inserido após a "descrição do produto" ou "produtos relacionados".

Por exemplo, se escolhido inserir após os produtos relacionados basta localizar a div com classe "product-related", e inserir o seguinte código:

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

5.4 Salve essas alterações.

O resultado será este:

6. Para exibir estrelas nas vitrines é necessário a inserção do código abaixo, no template que fica no caminho: elements > snippets > product.html

6.1. Abaixo de "{{ product.name }}", (nome principal do produto no item da vitrine), inserir o código das estrelinhas:

<!-- Trustvox -->
<div class="trustvox-showcase">
  <div data-trustvox-product-code="{{ product.id }}"></div>
</div>
<!-- /Trustvox -->

Pronto! Agora basta publicar o template alterado e aguardar seu cache expirar.

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:

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

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

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

8. Carousel com opiniões de loja:

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

8.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/carrossel com opiniões de loja sendo exibido, desde que é claro: você tenha no mínimo três opiniões de loja para serem carregadas. 😉

Ficou alguma dúvida?

Se você quer customizar algo que não está nesta lista, entre em contato com a RA Trustvox através do chat 💬 disponível no menu 'Dúvidas e Suporte' no símbolo de interrogação ❔ do seu painel (de Segunda a Sábado das 9h às 18h - exceto feriados ).

Conte com a gente! 💚