Como exibir as opiniões e adicionar os scripts da RA Trustvox de forma genérica - Staging

Veja quais são os passos necessários para a instalação dos scripts na RA Trustvox em qualquer plataforma utilizando nosso ambiente Staging

Igor do Nascimento Caires avatar
Escrito por Igor do Nascimento Caires
Atualizado há mais de uma semana

Este artigo documenta os passos necessários para a instalação dos scripts na RA Trustvox em qualquer plataforma utilizando a loja em staging ( ambiente de testes ), com seus devidos ajustes de variáveis e locais de inserção.


Caso queiram instalar os elementos visuais utilizando a loja do ambiente de produção, clique aqui para acessar documentação.


OBS: O Ambiente Staging ( Testes ) funciona semelhante ao de produção. Porém, os Endpoints e Dados da Sua Loja ( ID e Token ) são diferentes.

Este é um ambiente compartilhado para testes e como os recursos e disponibilidades são limitados, poderá ocorrer instabilidades. Caso queiram saber mais informações sobre a disponibilidade do ambiente de testes, nosso suporte poderá ajudar. 😉


⚠️ 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 no ambiente de testes. Você pode saber mais aqui.

Na seção "Configuração da RA Trustvox" nesta Central de Ajuda, você também artigos específicos por plataforma.

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 no ambiente staging 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/trustvox-sincero-staging/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)

Além das informações do produto, o script do widget permite que sejam enviadas informação pertencentes aos sellers de determinado produto, possibilitando a filtragem de opiniões e perguntas de produtos que são vendidos por determinados vendedores.

Para isso é preciso que na instalação do widget, o script seja iniciado juntamente com a lista de sellers, que realiza a venda daquela produto, contendo a identificação, nome e logo de cada um deles.

Veja um exemplo:

<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 em Staging.

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

1.5. Agrupamento de produtos similares (passo não obrigatório):

Caso você possua produtos similares, que apenas variem cores, por exemplo: você pode agrupar estes produtos para que compartilhem das mesmas opiniões.

Para isto é necessário informar para a RA Trustvox o nome ou identificador do grupo através do front-end, veja como:


Atenção: quando este script rodar, ele automaticamente irá refletir as opiniões de todos os produtos que tiverem o mesmo identificador, portanto é necessário ter muita atenção para que a variável não se repita em produtos que não é desejado o comportamento anteriormente descrito.


<script type="text/javascript">
_trustvox.push(['_productGroup', 'VARIAVEL-IDENTIFICADOR-GRUPO']);
</script>

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="//storage.googleapis.com/trustvox-rate-staging/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: https://help.trustvox.com.br/pt-BR/articles/5551303-seo-como-exibir-as-avaliacoes-dos-seus-produtos-no-google-organicamente


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:

Obs. para que você precisa ter no mínimo 10 opiniões, e tê-lo configurado, para isto veja aqui como fazer:

3.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="//storage.googleapis.com/trustvox-certificate-widget-staging/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/carrossel 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="//storage.googleapis.com/trustvox-colt-staging/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/carrossel 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 com dúvida ou precisa de ajuda?

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?