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.

Adicione widgets do Klaviyo Reviews usando um bloco personalizado no Tapcart

Siga estas etapas para adicionar qualquer widget de avaliações no Tapcart. Você precisará repetir estas etapas (ou seja, criar um bloco personalizado separado) para os 3 widgets.

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.
2. O editor talvez não carregue o widget diretamente; em vez disso, você verá o nome do bloco como texto simples. Isso é esperado.
3. Clique em Visualizar seu app e navegue até a página em que você adicionou seu app. Observe que o widget aparece corretamente.

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 do Klaviyo Reviews não vão aparecer automaticamente na prévia do Tapcart, mas vão carregar corretamente no seu app. Isso ocorre porque os widgets exigem um ID de produto real para saber quais avaliações exibir. Para pré-visualizar os widgets, adicione uma variável de ID de produto no campo Variable Preview Values no editor do Tapcart.

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 essas etapas para seus outros blocos do widget de avaliações.
8. Se as prévias não aparecerem corretamente de imediato, atualize o editor.

Estilize widgets do app

Quaisquer alterações feitas no editor principal de widget se aplicarão tanto ao seu site quanto ao seu app. Para aplicar alterações apenas ao seu app, adicione CSS personalizado à guia CSS do editor de bloco personalizado no Tapcart. Saiba como usar CSS personalizado para estilizar widgets do Klaviyo Reviews.

Recursos adicionais