Instalação da Trustvox na plataforma Nuvemshop

Este artigo documenta os passos necessários para a instalação das ferramentas visuais da RA Trustvox em Nuvemshop.

Você já configurou a integração para 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).

📢  Importante¹: Que para ambos, é necessário solicitar a liberação de edição do front-end para sua plataforma (Nuvemshop)

📢  Importante²: Conforme orienta manual da plataforma Nuvemshop, para manter a RA Trustvox instalada na sua loja, o FTP não poderá ser fechado. Se fechado, todas as alterações realizadas diretamente nos códigos são perdidas, e a Nuvemshop não realiza backups dos layouts customizados.  

Tendo os dois pontos de atenção acima compreendidos, e definida a forma de instalação, vamos para a inclusão dos trechos de código! 

1. Widget de opiniões do produto

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 nas vitrines 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, 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: 

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

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

✏️  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: 

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

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

- 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 para o seu ID da RA Trustvox.

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

- 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 💬 disponível no menu 'Dúvidas e Suporte' do seu painel (de Segunda a Sexta das 9h às 17h - exceto feriados). Conte com a gente!