Como adicionar widgets do Klaviyo Reviews ao seu app para dispositivos móveis usando o Tapcart

O que você vai aprender

Saiba como adicionar widgets do Klaviyo Reviews a um app para dispositivos móveis criado com o Tapcart. Esses widgets podem ser adicionados ao seu app do Tapcart usando blocos personalizados:

• Widget de classificação por estrelas
  Somente em páginas de produto; mostra a classificação geral por estrelas de um produto
• Widget de avaliações de produto
  Somente páginas de produto; mostre um resumo e uma lista de todas as avaliações de um produto, além de botões para fazer uma pergunta ou deixar uma avaliação
• Widget de carrossel de avaliações em destaque
  Qualquer página; exiba uma seleção de avaliações em destaque em vários produtos

O Tapcart está disponível apenas para lojas criadas com o Shopify.

Antes de começar

Este processo está disponível apenas para empresas que:

• Já criou um app para dispositivos móveis com a Tapcart
• Use um plano Tapcart Enterprise
• Ter um plano do Klaviyo Reviews com atividade

Se você ainda não configurou o Klaviyo Reviews, acesse nosso artigo sobre Guia de introdução ao Klaviyo Reviews.

Se você estiver adicionando o carrossel de avaliações em destaque, selecione as avaliações publicadas que você quer destacar no Klaviyo antes de visualizar o carrossel.

Adicione widgets do Klaviyo Reviews usando um bloco personalizado no Tapcart

Siga estas etapas para adicionar um widget de avaliações no Tapcart. Crie um bloco personalizado separado para cada widget que você quiser adicionar.

1. Abra o editor do Tapcart.
2. No App Studio, alterne de Design Blocks para Custom Blocks.
   

3. Clique em Iniciar o editor de blocos para criar um novo bloco personalizado.
4. Dê ao widget um nome claro, como bloco personalizado de avaliação por estrelas do Klaviyo.
5. Na guia JS do editor de blocos, adicione o seguinte snippet de código. Substitua PUBLIC_API_KEY pelo seu ID do site da Klaviyo de 6 caracteres.
   

var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js?module=reviews';
document.head.appendChild(script);

1. Na guia HTML do editor de blocos, cole o snippet do widget que você quer adicionar (por exemplo, o widget de avaliação por estrelas). Encontre os snippets de código abaixo:
   1. Código do widget de classificação por estrelas
   2. Código do widget de avaliação de produtos
   3. Código do widget de carrossel de avaliações em destaque
      

2. Clique em Save.
3. Clique em Fechar para sair do editor.
4. No menu suspenso do App Studio, selecione Detalhes do produto.
   
   

1. Arraste o bloco personalizado salvo que você acabou de criar para o seu modelo.

O editor talvez não carregue o widget diretamente; em vez disso, você verá o nome do bloco como texto simples. Isso é esperado.

1. Clique em Visualizar seu app e navegue até a página em que você adicionou o widget. Verifique se o widget aparece corretamente.
2. Quando você estiver pronto para que os clientes vejam o widget, publique suas alterações no Tapcart.

snippet de código

Widget de classificação por estrelas

<div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}"></div>

Widget de avaliação de produtos

<div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>

Carrossel de avaliações em destaque

<div id="klaviyo-featured-reviews-carousel"></div>

Visualizar widgets do aplicativo

Os widgets de classificação por estrelas e avaliações de produtos precisam de um ID de produto real para exibir as avaliações corretas. Para visualizar esses widgets, defina um ID de produto no campo Valores de prévia da variável no editor do Tapcart. O carrossel de avaliações em destaque não precisa de um ID de produto.

1. No App Studio do Tapcart, selecione Personalizado para ver seus widgets personalizados.
2. Clique no ícone de três pontos ao lado de um dos seus blocos de widget de avaliações e clique em Iniciar editor.
3. Clique em Configurações.
   

4. Role a tela ou pesquise no JSON para encontrar a variável id dentro do objeto product. Observe que há outras variáveis de id em outros objetos; você só precisa editar o ID do produto mostrado aqui.
   

5. Substitua o ID de exemplo do produto pelo ID de um produto da sua loja que tenha pelo menos 1 avaliação. Para encontrar um ID de produto, navegue até Conteúdo > Produtos no Klaviyo e copie um ID de item.
   

6. Clique em Save.
7. Repita estas etapas para cada bloco personalizado de classificação por estrelas ou de avaliações de produtos que você adicionou.
8. Se as prévias não aparecerem corretamente de imediato, atualize o editor.

Estilize widgets do app

As alterações nas configurações de um widget no editor de widget da Klaviyo se aplicam tanto ao seu site quanto ao seu aplicativo depois que você clica em Publicar alterações. Para aplicar alterações de estilo apenas ao seu aplicativo, adicione CSS personalizado à guia CSS do editor de blocos personalizados no Tapcart. Saiba como usar CSS personalizado para estilizar widgets do Klaviyo Reviews.

Recursos adicionais