Como exibir as opiniões da RA Trustvox na plataforma VTEX

Veja como instalar o Widget da RA Trustvox na VTEX

A
Escrito por Anderson Santos
Atualizado há mais de uma semana

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

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

1. Entrar na página "Front-end CMS"

O endereço para acessar o CMS da Vtex normalmente é (alterar "nome-da-empresa"): https://nome-da-empresa.myvtex.com/admin/a

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

Para encontrar o tema, na listagem de pastas na esquerda da tela, navegue por "CMS > Sites and Channels > 'Escolha o nome da sua empresa' > Produto".

Clique no arquivo que está com "Check em vermelho", ele é o template atualmente utilizado para sua página de produto.

O mesmo funcionará para demais templates. :)

Exemplo:

3. Abrir e editar o template de produto

Agora volte em: "CMS > HTML Templates"

E localize o template que você visualizou anteriormente, neste exemplo o nome é "Product":

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


Atenção: "IDENTIFICADOR-DA-SUA-LOJA" contido no script precisa ser alterado, este identificador é fornecido na etapa de onboarding ou por nossa equipe.


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

Caso você possua produtos que não possam coletar opiniões, é necessário informar para a RA Trustvox com antecedência.

Será necessário também implementar um pequeno trecho de código no 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 agora poderá nos dizer, pelo seu canal de comunicação (onboarding, por exemplo), qual "departament_id" devemos ignorar.

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

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

Continuando... 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, que exibe opiniões do produto, 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, sugerimos: 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']);
_trustvox_shelf_rate.push(['_watchSubtree', true]);
</script>
<script type="text/javascript" async="true" src="//rate.trustvox.com.br/widget.js"></script>
<!-- /Trustvox -->

Lembre-se de alterar "IDENTIFICADOR-DA-SUA-LOJA".

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

Por exemplo: no nosso caso o template responsável pelos itens de vitrines é "prateleira-lista", porém o seu pode variar:

Inserir mais uma vez o script abaixo e salvar. :)

<!-- Trustvox -->
<div class="trustvox-showcase" style="text-align: center">
<div data-trustvox-product-code="$product.Id"></div>
</div>
<!-- /Trustvox -->

6. Configuração da integração dos pedidos

Se você não está ainda nos enviando os pedidos. É preciso criar acessos "Appkey e token" da Vtex, para configuração da importação de pedidos.

E pronto! Com isto você tem uma instalação básica da RA Trustvox, com ferramentas visuais e importação dos pedidos! :)


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/carrossel 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 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! 💚

Respondeu à sua pergunta?