Integração com Stamped

O Stamped é uma ferramenta de avaliação de usuários que pode ser anexada na sua loja virtual. Para utilizar o Stamped na sua loja, você precisa:

• Integrar as plataformas: para permitir a troca de informações entre Vnda e Stamped.
• Configurar Google Tag Manager: para inserir o script de integração na loja.
• Alterar o front-en da loja: para que a vitrine suporte a integração.

Depois da integração concluída, o Stamped efetuará disparo de e-mails para os clientes quando os pedidos forem confirmados. Quando os clientes avaliam os produtos, a avaliação fica disponível na página do produto.

🚧

Pré requisitos

• A loja precisa de uma conta no Stamped.
• A loja deve escolher um layout para o formulário de avaliação no Stamped. O layout depende do pacote adquirido com o Stamped.
• A loja precisa do acesso da sua conta do Google Tag Manager. Se você ainda não possui as credenciais de acesso, entre em contato com o [email protected].

Integração entre plataformas

Para integrar Vnda e Stamped e permitir a comunicação entre as plataformas:

1. Acesse a sua conta no Stamped;
2. Acesse o painel de controle de APIs Keys do Stamped e mantenha a página aberta em segundo plano. Utilizaremos o API Key Public, API Key Private e Store Hash nos próximos passos.
3. Acesse o Admin Vnda;
4. Clique no ícone ⚙ de Configurações no canto inferior esquerdo;
5. Clique em Stamped IO na seção Mensagens e avisos;
6. Preencha os campos:
   1. Store Hash: preencha com o Store Hash obtido no passo 2;
   2. Username: preencha com o API Key Public obtido no passo 2;
   3. Password: preencha com o API Key Private obtido no passo 2;
7. Clique em Enviar.

A integração entre as plataformas foi concluída.

Google Tag Manager

Na etapa de configuração do Google Tag Manager você deve criar uma Tag para o Stamped:

1. Acesse o Google Tag Manager;

2. Na tela inicial clique na URL da sua loja;

3. Na aba Espaço de trabalho (ou Workspace se você utiliza a versão em inglês) clique em Tags;

4. Clique em Nova (ou New se você utiliza a versão em inglês);

5. Nomeie a tag de Stamped;

6. Clique na seção Configuração da Tag (ou Tag Configuration se você utiliza a versão em inglês);

7. Selecione a opção HTML Personalizado (ou Custom HTML se você utiliza a versão em inglês);

8. Adicione o código a seguir no campo HTML. Substitua o campo API Key Public pela chave de mesmo nome gerada na etapa de Integração entre plataformas e o campo URL_LOJA pela URL da loja (www.nomedaloja.com.br). Não utilize https:// no preenchimento da URL da loja.

   HTML

   <script type="text/javascript" src="https://cdn-stamped-io.azureedge.net/files/widget.min.js"></script>
   <script type="text/javascript">//<![CDATA[
   StampedFn.init({ apiKey: 'API Key Public', storeUrl:'URL_LOJA' });
   // ]]></script>
   

9. Clique na seção Acionamento (ouTriggering se você utiliza a versão em inglês);

10. Selecione a opção All pages;

11. Clique em Salvar (ou emSave se você utiliza a versão em inglês).

❗

URL da loja

Preencha o campo storeUrl do passo 8 exatamente com a mesma URL da loja cadastrada na plataforma Stamped.

Confira na animação a seguir como deve ficar as configurações da tag.

A tag Stamped foi criada e agora você precisa publicá-la (enviá-la para produção).

Para publicar clique em Enviar ou Suimmit na barra superior disponível no Espaço de trabalho (ouWorkspace), como na figura a seguir. Para saber mais sobre como publicar suas alterações, consulte Publicação, versões e aprovações.

Alterações front-end

Como adaptar a vitrine da loja para suportar a integração com Stamped

Para adicionar o formulário de avaliação é preciso criar um arquivo liquid e incluir o formulário do Stemped:

1. Inclua o código abaixo em um arquivo do projeto da loja para incluir o formulário do Stemped. No nosso exemplo criarmos um arquivo (_reviews.liquid) específico para esse formulário.

   reviews.liquid

   {% comment %} STAMPED {% endcomment %}
   {% for variant in product.variants %}
     {% if variant.main %}
       {% assign sku = variant.sku %}
       {% break %}
     {% endif %}
   {% endfor %}
   
   <div 
     class="product-stamped container-fluid"
     id="stamped-main-widget" 
     data-product-id="{{ product.id }}" 
     data-name="{{ product.name }}" 
     data-url="{{ product.url }}" 
     data-image-url="{{ product.image_url }}" 
     data-description='{{ product.description }}'
     data-product-sku="{{ sku }}"
     data-widget-language="pt"> 
   </div>
   

2. Inclua o código abaixo adicionar na página dos produtos as estrelas de avaliação de produto. É comum adicionar esse código abaixo do nome do produto no arquivo _infos.liquid.

   _infos.liquid

   <span class="stamped-product-reviews-badge stamped-main-badge {{ iframe }}" data-id="{{ product.id }}"></span>
   

Quando o cliente clica nas estrelas de avaliação a página rola para os detalhes da avaliação. Normalmente adicionamos o

Teste da integração no ambiente staging

Para testar as alterações no ambiente staging, inclua o mesmo script HTML adicionado na etapa do Google Tag Manager nos arquivos front-end do projeto:

<script type="text/javascript" src="https://cdn-stamped-io.azureedge.net/files/widget.min.js"></script>
<script type="text/javascript">//<![CDATA[
StampedFn.init({ apiKey: 'API Key Public', storeUrl:'URL_LOJA' });
// ]]></script>

Lembre-se de substituir o campo API Key Public pela chave de mesmo nome gerada na etapa de Integração entre plataformas e o campo URL_LOJA pela URL da loja (www.nomedaloja.com.br). Não utilize <https://> no preenchimento da URL da loja.

No final dos testes da integração, exclua o script HTML dos arquivos da loja. Para o deploy, esse script HTML deve ficar disponível apenas no Google Tag Manager.

Não utilize a palavra teste ao fazer uma avaliações teste. Essa é uma palavra reservada da plataforma, e nesse a descrição da avaliação ficará com****.

🚧

Avaliações staging

Lembrei-se que avaliações teste feitas no ambiente staging devem ser excluídas antes do deploy para o ambiente de produção. Isso porque depois do deploy as avaliações também são enviadas para o ambiente production.

Customização do formulário de avaliação

Você pode customizar o formulário do Stamped com estilização no CSS. Veja o exemplo um exemplo de estilização abaixo:

.stamped-product-reviews-badge {
  display: block;
  margin: 10px 0 20px;

  .stamped-fa:before {
    font-size: 22px;
  }
}

.product-stamped {
  #tab-reviews::first-letter {
    text-transform: uppercase;
  }

  .stamped-widget-poweredby {
    background-color: white;
    padding-bottom: 10px;
    padding-left: 20px;
  }

  #stamped-sort-select {
    margin-top: 5px;
  }

  .stamped-form-label {
    font-weight: 700;
    font-size: 13px;
    line-height: 27px;
  }

  .stamped-form-label + .stamped-form-input {
    min-height: 50px;
  }

  #stamped-button-submit {
    // Arrumar o estilho do botão
    
    padding: 1.5rem 6rem;
    margin: 1rem auto 0;
  }
}

Lembre-se de incluir o arquivo de customização CSS de acordo com a organização dos arquivos do seu projeto.

📘

Configurações das avaliações no Stamped

Você pode customizar as avaliações e os widgets na plataforma Stamped.
Sabia mais como realizar essas configurações nas documentações do Stamped.