Todas as coleções
Integração de Parceiros
Integração com a RA Trustvox (Parceria)
Integração com a RA Trustvox (Parceria)
A
Escrito por Anderson Santos
Atualizado há mais de uma semana

Este artigo documenta os passos necessários que um parceiro precisa seguir para permitir que os lojistas da plataforma de e-commerce utilizem os serviços da RA Trustvox de maneira plena.

1. Integração com API Trustvox

Para instruções sobre como realizar a integração Back-end (Criação de lojas e envio de informações sobre vendas das lojas via API da Trustvox), por favor, consulte este artigo (disponível somente em inglês).

Uma vez que a plataforma esteja integrado com nossa API, agora precisamos inserir no template da loja os scripts responsáveis pelos Widgets Trustvox.

2. Instalação Front-end

2.1. Widget de Opiniões e Perguntas

O script abaixo deve ser inserido na página de produto, preferencialmente dentro de "<head>".

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

 _trustvox.push(['_productId',  productId]);
 _trustvox.push(['_productName', productName]);
 _trustvox.push(['_productPhotos', [url.image]]);

<!-- Ambiente de produção -->
<script async="true" type="text/javascript" src="//static.trustvox.com.br/sincero/sincero.js"></script>

<!-- Ambiente de teste -->
<!-- <script async="true" type="text/javascript" src="//static.trustvox.com.br/trustvox-sincero-staging/sincero.js

No local que deseja exibir o Widget, insira a DIV abaixo:

<div id="_trustvox_widget"></div>

O resultado deve ser:

2.1.1. Importação de sellers
​

Além das informações do produto, o 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.


​

<script type="text/javascript">
  window._trustvox = [];
  var sellers = [{ id: '123', name: 'Nome', logo: 'https://logo.url' }];
  _trustvox.push(['_sellers', sellers]);
</script>

Para que a importação dos sellers ocorra, é necessário que a loja possua a preferencia enable_marketplace habilitada. Caso contrário, os sellers enviados serão ignorados.

2.2. Widget de Estrelas

2.2.1. Widget de Estrelas nas Prateleiras

É 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 mesmo.

O script abaixo deve ser inserido em todas as página que deseja exibir as estrelinhas, preferencialmente em "<head>".

<script type="text/javascript">
 var _trustvox_shelf_rate = _trustvox_shelf_rate || [];
 _trustvox_shelf_rate.push(['_storeId', 'Id-Loja']);
</script>

<!-- Ambiente de produção -->
<script type="text/javascript" async="true" src="//rate.trustvox.com.br/widget.js"></script>

<!-- Ambiente de teste -->
<!-- <script type="text/javascript" async="true" src="//storage.googleapis.com/trustvox-rate-staging/widget.js"></script> -->

IMPORTANTE: Caso sua loja tenha prateleiras que carreguem dinamicamente (Scroll infinito é exemplo), será necessário adicionar a seguinte linha no script acima, identificando as mesmas:

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

No local que deseja exibir as estrelas, insira o código abaixo:

<div data-trustvox-product-code="productId"></div>

O resultado deve ser:

2.2.2. Widget de Estrelas na página do Produto

Dentro do template da página de produto, próximo ao nome, 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:hover span.rating-click-here {text-decoration: underline;}
.trustvox-widget-rating span.rating-click-here {
  top: -3px;
  display: inline-block;
  position: relative;
  color: #DAA81D;
}
</style>

O estilo css pode ser inserido no css padrão da loja. Você tem total liberdade para altera-lo.

O resultado deve ser:

2.2.3. Indexação das estrelas pelo Google

Para maximizar a chance do Google indexar seu produto e no resultado de busca exibir seu produto com Rich Snippets é necessário seguir os seguintes passos...

Adicionar as propriedades aos elementos visíveis:

<div id="content" itemscope="" itemtype="http://schema.org/Product">
    <div id="name" class="product-name">
      <h1 class="name" itemprop="name">Nome do seu produto</h1>
      ...

As <divs> são apenas ilustrativas, o importante são as propriedades "itemscope", "itemtype" e "itemprop".

Ferramenta do Google para validar seu código: Structured Data Testing Tool

2.3. Instalação do Selo Reviews Verdadeiros

Artigo de apoio: Quem pode ter o selo?
​

Script de instalação:

<!-- Ambiente de produção -->
<script type="text/javascript" async="true" src="//static.trustvox.com.br/sincero/sincero.js"></script>

<!-- Ambiente de teste -->
<!-- <script type="text/javascript" async="true" src="//static.trustvox.com.br/trustvox-sincero-staging/sincero.js"></script> --><br>

Com isto você já consegue habilitar a versão flutuante do selo, através do painel Trustvox.

2.3.1. Em seu painel Trustvox, vá até o canto superior direito e clique no seu usuário; Depois, clique em "Selo e Certificado":

Em "Personalize a aparência do seu selo", habilite o Selo e escolha a melhor opção de localização.

O Selo, dispõe de diversas configurações para um posicionamento adequado na sua página:

Usar posição flutuante

Nenhum elemento adicional é necessário ao selecionar a versão flutuante. Para utilizá-la basta marcar a opção "Posição flutuante", e então escolher qual sua posição.

Usar posição fixa

Para utilizar a opção "Posição fixa" é necessário incluir também um elemento específico na página, logo após o script de instalação acima.

<div data-trustvox-certificate-fixed="data-trustvox-certificate-fixed"></div>

Formato de exibição do certificado Reviews Verdadeiros

O Certificado Reviews Verdadeiros é exibido ao clicar no Selo. Existem duas formas de exibição disponíveis deste certificado. Uma delas é utilizando-o apenas como um link que carrega na mesma página, e a outra é utilizando-o como um pop-up.

Link

Esse é o comportamento padrão do selo. Ele apenas imprime na página da loja a imagem do selo Reviews Verdadeiros e ao ser clicada, redireciona para o endereço correspondente do certificado. Para ativá-lo basta manter a opção "Exibir em pop-up/modal" desmarcada.

Pop-Up/Modal

A opção "Exibir selo em modal" já vem pré-selecionada inicialmente. Ela exibe o selo dentro de uma espécie de pop-up/modal dentro da própria página da loja (conforme mostra a figura abaixo):

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?