Como adicionar widgets do Klaviyo Reviews ao seu aplicativo móvel usando o Tapcart

O que você vai aprender

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

• Widget de classificação por estrelas
  Somente páginas de produtos; mostra a classificação geral de estrelas de um produto
• Widget de avaliações de produtos
  Somente páginas de produtos; mostra 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 resenhas em destaque
  Qualquer página; mostre uma seleção de resenhas em destaque de vários produtos 

O Tapcart só está disponível para lojas criadas com a Shopify.

Antes de começar

Esse processo só está disponível para empresas que:

• Já criou um aplicativo móvel com o Tapcart
• Usar um plano Tapcart Enterprise
• Ter um plano ativo de Avaliações do Klaviyo

Se o senhor ainda não configurou o Klaviyo Reviews, consulte nosso artigo sobre como começar a usar o Klaviyo Reviews.

Adicionar widgets do Klaviyo Reviews usando um bloco personalizado no Tapcart

Siga estas etapas para adicionar um widget de avaliações no Tapcart. O senhor precisará repetir essas etapas (ou seja, criar um bloco personalizado separado) para todos os três widgets. 

1. Abra o editor do Tapcart. 
2. No App Studio, mude de Design Blocks para Custom Blocks.
   
3. Clique em Launch Blocks Editor para criar um novo bloco personalizado. 
4. Dê ao widget um nome claro, como bloco personalizado Klaviyo Star Rating. 
5. Na guia JS do editor de blocos, adicione o seguinte trecho de código. Substitua PUBLIC_API_KEY pelo seu ID do site 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);

6. Na guia HTML do editor de blocos, cole o snippet do widget que deseja adicionar (por exemplo, o widget de classificação por estrelas). Veja os trechos de código abaixo: 
1. Código do widget de classificação por estrelas
2. Código do widget de análises de produtos
3. Código do widget do carrossel de avaliações em destaque
   
7. Clique em Salvar. 
8. Clique em Close (Fechar ) para sair do editor. 
9. No menu suspenso do App Studio, selecione Product detail (Detalhes do produto).
   
   
   Essa etapa é necessária para os widgets de classificação por estrelas e avaliações de produtos. O senhor pode colocar o widget de avaliação em destaque em qualquer página de aplicativo. 
10. Arraste o bloco personalizado salvo que o senhor acabou de criar para o modelo. 
11. O editor pode não carregar o widget diretamente; em vez disso, o senhor verá o nome do bloco como texto simples. Isso é esperado. 
12. Clique em Preview your app e navegue até a página em que o aplicativo foi adicionado. Observe que o widget aparece corretamente.

Trechos 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 análises 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 de aplicativos

Os widgets do Klaviyo Reviews não aparecerão automaticamente na visualização do Tapcart, mas serão carregados corretamente em seu aplicativo. Isso ocorre porque os widgets exigem um ID de produto real para saber quais avaliações devem ser exibidas. Para visualizar os widgets, adicione uma variável de ID de produto no campo Variable Preview Values (Valores de visualização de variável ) no editor do Tapcart. 

1. No Tapcart App Studio, selecione Custom (Personalizado ) para visualizar seus widgets personalizados. 
2. Clique no ícone de três pontos ao lado de um dos blocos de widgets de revisão e clique em Launch Editor (Iniciar editor). 
3. Clique em Settings. 
   
4. Role ou pesquise no JSON para encontrar a variável id no objeto do produto. Observe que há outras variáveis de id em outros objetos; o senhor só precisa editar o ID do produto mostrado aqui. 
   
5. Substitua o ID do produto de amostra pelo ID de um produto em seu armazenar que tenha pelo menos uma avaliação. Para encontrar um ID de pro duto, navegue até Content > Products (Conteúdo Produtos ) no Klaviyo e, em seguida, copie um ID de item. 
   
6. Clique em Salvar. 
7. Repita essas etapas para os outros blocos de widgets de revisão. 
8. Se as visualizações não aparecerem corretamente de imediato, atualize o editor. 

Widgets de aplicativos de estilo 

Todas as alterações feitas no editor principal de widgets serão aplicadas tanto ao seu site quanto ao seu aplicativo. Para aplicar as alterações apenas ao seu aplicativo, adicione CSS personalizado à guia CSS do editor de blocos personalizados no Tapcart. Saiba como usar CSS personalizado para estilizar os widgets do Klaviyo Reviews. 

Recursos adicionais

• Como solicitar avaliações de seus clientes com os fluxos de avaliações da Klaviyo
• Como moderar as avaliações do Klaviyo
• Referência de dados das revisões do Klaviyo