.png)
Instalação genérica dos scripts da Trustvox
Este artigo documenta os passos necessários para a instalação dos scripts na RA Trustvox em qualquer plataforma, com seus devidos ajustes de variáveis e locais de inserção.
1. Widget de opiniões de produto
O script abaixo deve ser inserido na página de produto e de preferência dentro da tag <head>.
Atenção! Não esqueça de substituir as variáveis de acordo com a sua loja.
Isto é, ID-LOJA, corresponde ao identificador da sua empresa na RA Trustvox.
Também logo abaixo está: "productId", "productName" e "[url.image]", para estes favor remover e incluir as variáveis dinâmicas da sua loja, que trazem estes dados.
<script type="text/javascript"> window._trustvox = []; _trustvox.push(['_storeId', 'ID-LOJA']); _trustvox.push(['_productId', productId]); _trustvox.push(['_productName', productName]); _trustvox.push(['_productPhotos', [url.image]]); </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:
1.1. Sellers (passo não obrigatório)
<script type="text/javascript">
window._trustvox = [];
var sellers = [{ id: '123', name: 'Nome', logo: 'https://logo.url' }];
_trustvox.push(['_sellers', sellers]);
</script><br>
Para que a importação dos sellers ocorra, é necessário informar para a RA Trustvox o interesse nisto. Desta forma iremos habilitar isto como uma preferência, do nosso lado.
1.2. Gtin/Ean (passo não obrigatório)
É possível enriquecer o cadastro dos produtos adicionando códigos do tipo GTIN e EAN, para utilizar-se dessa feature basta adicionar a configuração inicial uma lista de GTIN's ou EAN's de acordo com o exemplo:
<script type="text/javascript"> _trustvox.push(['_productGtins', ["gtin", "outro-gtin"]]); _trustvox.push(['_productEans', ["ean", "outro-ean"]]); </script>
1.3. Instalação do em SPA's (single page applications) (passo não obrigatório)
É possível que você enfrente algum tipo de problema ao instalar o sincero em seu SPA.
Para resolver esse problema desenvolvemos API's públicas para que você as utilize caso precise controlar manualmente a exibição do widget na sua página.
// instancia o widget na sua página window._trustvox_initializer.initialize(); // remove/unload o widget da página window._trustvox_initializer.cleanup();
O método #initialize deve ser usado para inicializar a instância da RA Trustvox na sua página de detalhes de produto. Vale ressaltar que:
- É necessário que o script "static.trustvox.com.br/sincero/sincero.js" já tenha sido devidamente carregado na página.
- Todos os dados relativos ao produto (basicamente tudo que está no "_trustvox") já tenha sido adicionado na página também.
Após tudo isso ser carregado, é possível chamar o "initialize();" que o widget será carregado.
O #cleanup é literalmente o contrário, removendo assim o widget por completo da página.
1.4. Atributos 'extra', para medicamentos (por exemplo) (passo não obrigatório):
Caso você possua produtos que não possam coletar opiniões, é necessário informar para a RA Trustvox tanto no back-end, quanto 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 poderá nos dizer, pelo seu canal de comunicação, qual "departament_id" devemos ignorar.
Ou seja, ignorando não iremos registrá-lo em nossa base e nem coletar opiniões.
Atenção apenas, para que isto também deve ser configurado no back-end! Isto pode ser compreendido fazendo leitura de nossa documentação de integração via API.
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. ;)
2. Estrelas na listagem 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.
<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>
Atenção! Não esqueça de substituir "Id-loja" de acordo com o seu identificador.
No local que deseja exibir as estrelas, insira o código abaixo:
<div data-trustvox-product-code="productId"></div>
O resultado deve ser:
2.1. Apenas caso sua loja tenha prateleiras que carreguem dinamicamente (passo não obrigatório)
Com scroll infinito por exemplo, é necessário adicionar a seguinte linha no script:
_trustvox_shelf_rate.push(['_productContainer', '#containers_dinamicos']);
Substituir "#containers_dinamicos", pelo id ou classe dos containers onde os dados estão sendo carregados dinamicamente. Exemplo:
_trustvox_shelf_rate.push(['_productContainer', '.classe1, .classe2, #algumId']);
2.2. Dentro do template da página de produto, abaixo ao nome do produto, deve inserir o código:
<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="productId" data-trustvox-should-skip-filter="true" data-trustvox-display-rate-schema="true"></div><span class="rating-click-here">Clique e veja!</span>
</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>
Com o código acima, você terá as estrelas sendo exibidas também abaixo do nome do produto na página do mesmo.
O estilo css pode ser inserido no css padrão da loja. Você tem total liberdade para altera-lo.
O resultado deve ser:
Para maximizar a chance do google indexar seu produto e no resultado de busca exibir seu produto com Rich Snippets sugerimos leitura do seguinte artigo: SEO - AGGREGATERATING (ESTRELAS) E REVIEW (OPINIÕES) NOS RESULTADOS DO GOOGLE
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>
3.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!
4. Carousel com opiniões de loja:
4.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 -->
4.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!