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:

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>
4.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!
5. Carousel com opiniões de loja:
5.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 -->
5.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. :)
Qualquer dúvida, entre em contato com a RA Trustvox através do chat 💬 ou formulário RA Trustvox 📝 disponíveis no menu 'Dúvidas e Suporte' do seu painel (de Segunda a Sexta das 9h às 17h - exceto feriados). Conte com a gente!