Parceria
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 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 Perguntas exibição das Opiniões
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]]); <!-- Production --> <script async="true" type="text/javascript" src="//static.trustvox.com.br/sincero/sincero.js"></script> <!-- Staging --> <!-- <script async="true" type="text/javascript" src="//static.trustvox.com.br/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:
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> <!-- Production --> <script type="text/javascript" async="true" src="//rate.trustvox.com.br/widget.js"></script> <!-- Staging --> <!-- <script type="text/javascript" async="true" src="static.trustvox.com.br/rate-widget-js-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 Site Sincero
Artigo de apoio: Quem pode ter o selo?
Script de instalação:
<!-- Production --> <script type="text/javascript" async="true" src="//certificate.trustvox.com.br/widget.js"></script> <!-- Staging --> <!-- <script type="text/javascript" async="true" src="//static.trustvox.com.br/certificate-widget-staging/widget.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 em "Minha conta";
2.3.2. Clique no botão em formato cascata no centro da imagem abaixo "Preferências de Loja";
2.3.3. Clique no botão "Widget do Certificado".
Posicionamento
O Widget do selo, dispõe conforme a figura de várias opções de posicionamento (conforme figura abaixo).
Versão fixa
Ao marcar a opção "Usar versão fixa" é necessário incluir um elemento específico na página, no qual a imagem do certificado (e Pop-up se aplicável) serão adicionados.
Portanto insira o elemento abaixo:
Posicione esta DIV onde deseja que o selo fixo apareça (nenhum CSS é necessário)
<div data-trustvox-certificate-fixed></div><br>
Ainda é possível escolher qual é o tipo de selo que você quer que seja exibido na posição fixa, a figura abaixo ilustra as opções disponíveis.
Versão flutuante
Nenhum elemento adicional é necessário ao selecionar a versão flutuante. Para utilizá-la basta marcar a opção "Usar a versão flutuante", e então escolher qual lado será exibido (Direito ou Esquerdo).
Formato de exibição
Existem duas formas de exibição disponíveis do selo site sincero. Uma delas é usando apenas um link e a outra é usando um Pop-up.
Link
Esse é o comportamento padrão do selo. Ele apenas imprime na página da loja a imagem do selo Site Sincero e ao ser clicada, redireciona para o endereço correspondente do certificado. Para ativá-lo basta manter a opção "Exibir selo usando pop-up" desmarcada.
Pop-Up
A opção "Exibir selo usando pop-up" 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).
Dentro desta opção é possível requerer que o certificado seja pré-carregado no momento em que a página está sendo renderizada pelo navegador. Essa opção acrescenta alguns milésimos de segundo para o carregamento total da página da loja, mas melhora a experiência final de usuário.
Para utilizar este, basta selecionar a opção "Pré carregar "pop-up" do certificado".
E pronto!
Caso surja alguma dúvida, só nos chamar abaixo ou através da Trustvox! :)