Instalação da Trustvox na plataforma Nuvemshop

Este artigo documenta os passos necessários para a instalação dos scripts na Trustvox se você usa Nuvemshop.

Já configurou a integração (importação dos pedidos e agora deseja instalar as ferramentas visuais? Bora lá então!

Na plataforma Nuvemshop, você pode seguir com a inclusão dos elementos de duas formas:

Via serviço FTP;
Via CMS fornecido pela Nuvemshop em seu próprio painel (Neste há um cache de até 24h).

Atenção! Que para ambos, é necessário solicitar a liberação de edição do front-end para sua plataforma (Nuvemshop).

Tendo definido a forma de instalação, vamos para a inclusão dos trechos de código...

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 ("product.tpl" em seu FTP), o mais alto possível:

Não esqueça de substituir "ID-LOJA", pelo seu identificador Trustvox.

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

   _trustvox.push(['_productId',  LS.product.id]);
   _trustvox.push(['_productName', LS.product.name]);
   _trustvox.push(['_productPhotos', ["https:" + LS.variants[0].image_url]]);
</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:

2. Estrelas

É 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, sugerimos implementar no arquivo "layout.tpl".

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

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

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

Substituir "#container" pelos locais onde os dados estão sendo carregados dinamicamente. Ex.:

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

Nos locais que deseja exibir as estrelas, categorias por exemplo ("show_help_category.tpl" normalmente na Nuvemshop), insira o código abaixo logo abaixo do nome do produto:

<div data-trustvox-product-code="{{ product.id }}"></div>

O resultado deve ser:

Dentro do template da página de produto (Novamente, "product.tpl"), próximo ao nome do produto, você também pode exibir estrelas, basta inserir o código:

<!-- Trustvox -->
<a class="trustvox-fluid-jump trustvox-widget-rating" href="#_sincero_widget" title="Pergunte e veja opiniões de quem já comprou">
   <div class="trustvox-shelf-container" 
        data-trustvox-product-code-js="LS.product.id" 
        data-trustvox-should-skip-filter="false" 
        data-trustvox-display-rate-schema="false">
   </div>
</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 arquivo de estilos 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 recomendamos a leitura deste artigo.

3. Instalação do Selo Site Sincero

Sua loja já possui 30 opiniões de produto publicadas na Trustvox?

Se a resposta foi sim, você já está apto a instalar o Selo Site Sincero em sua loja.

Confirme com o time da Trustvox que seu Selo já foi gerado e inicie o passo a passo!

Caso o selo ainda não esteja pronto, entre em contato com a Trustvox em meajuda@reclameaqui.com.br para gerar o seu Certificado de Sinceridade. :)

Com seu certificado em mãos siga as instruções deste artigo.

Após a execução dos três passos acima, você já tem as ferramentas visuais instaladas! ;D

Caso tenha ficado alguma dúvida, só nos chamar abaixo ou dentro da Trustvox.

Até mais! ;)

Instalação da Trustvox na plataforma Nuvemshop

Entre em contato