Hoe voeg je met Tapcart de widget Klaviyo Recensies toe aan je mobiele app?

Wat je leert

Leer hoe je de widget Klaviyo Recensies toevoegt aan een mobiele app die is gebouwd met Tapcart. Deze widget kan worden toegevoegd aan je Tapcart app met behulp van custom blok: 

• Sterrenscore widget
  Alleen productpagina's; toon de algemene sterrenbeoordeling van een product
• Productbeoordelingen widget
  Alleen productpagina's; tonen een samenvatting en lijst van alle beoordelingen voor een product, plus knoppen om een vraag te stellen of een beoordeling achter te laten 
• Uitgelichte beoordelingen widget
  Elke pagina; toon een selectie van uitgelichte beoordelingen over verschillende producten 

Tapcart is alleen beschikbaar voor zaak gebouwd met Shopify.

Voordat je van start gaat

Dit proces is alleen beschikbaar voor bedrijven die:

• Al een mobiele app met Tapcart hebben gebouwd
• Gebruik een Tapcart Enterprise-abonnement
• Heb een actief Klaviyo Beoordelingen abonnement

Als je Klaviyo Reviews nog niet hebt ingesteld, ga dan naar ons artikel over Aan de slag met Klaviyo Reviews.

Widget Klaviyo Recensies toevoegen met behulp van een aangepast blok in Tapcart

Volg deze stappen om een widget met beoordelingen toe te voegen in Tapcart. Je moet deze stappen herhalen (d.w.z. een apart aangepast blok maken) voor alle 3 de widgets. 

1. Open de Tapcart editor. 
2. Schakel in App Studio over van Design blok naar Custom blok.
   
3. Klik op Start blok Editor om een nieuw aangepast blok te maken. 
4. Geef de widget een duidelijke naam, zoals Klaviyo Star Rating custom blok. 
5. Voeg op het tabblad JS van de blok editor het volgende codefragment toe. Vervang PUBLIC_API_KEY door uw Klaviyo site-ID van 6 tekens.
   

   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. Plak in het HTML tabblad van de blok-editor de snippet voor de widget die je wilt toevoegen (bijvoorbeeld de widget met de sterwaardering). Vind het codefragment hieronder: 
1. Sterrenscore widget code
2. Productbeoordelingen widget code
3. Uitgelichte beoordelingen widget code
   
7. Klik op Opslaan. 
8. Klik op Sluiten om de editor af te sluiten. 
9. Selecteer Productdetail in de App Studio vervolgkeuzelijst.
   
   
   Deze stap is nodig voor de widget met sterren en productbeoordelingen. Je kunt de uitgelichte recensie widget op elke app pagina plaatsen. 
10. Sleep het opgeslagen aangepaste blok dat je zojuist hebt gemaakt naar je template. 
11. De editor laadt de widget mogelijk niet direct; in plaats daarvan zie je de bloknaam als platte tekst. Dit wordt verwacht. 
12. Klik op Voorbeeld van je app en navigeer naar de pagina waar je je app hebt toegevoegd. Merk op dat de widget correct wordt weergegeven.

codefragment

Sterrenscore widget

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

Widget voor productreviews

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

Carrousel uitgelichte reviews

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

Voorbeeld app widget

De widget Klaviyo Recensies verschijnt niet automatisch in de Tapcart preview, maar wordt wel correct geladen op je app. Dit komt omdat de widget een echt product-ID nodig heeft om te weten welke beoordelingen moeten worden weergegeven. Om een voorbeeld van de widget te bekijken, voeg je een product ID-variabele toe in het veld Variabele voorbeeldwaarden in de Tapcart editor. 

1. Selecteer in de Tapcart App Studio Aangepast om je aangepaste widget te bekijken. 
2. Klik op het pictogram met de drie puntjes naast een van je beoordelingsblok widget en klik op Editor starten. 
3. Klik op Instellingen. 
   
4. Blader of zoek door de JSON om de id-variabele in het productobject te vinden. Merk op dat er andere id-variabelen zijn in andere objecten; je hoeft alleen de hier getoonde product-id te bewerken. 
   
5. Vervang het ID van het voorbeeldproduct door het ID van een product in je zaak dat minstens 1 beoordeling heeft. Om een product-ID te vinden, navigeer je naar Inhoud > Producten in Klaviyo en kopieer je een artikel-ID. 
   
6. Klik op Opslaan. 
7. Herhaal deze stappen voor je andere beoordeling widget blok. 
8. Als de voorvertoningen niet meteen goed verschijnen, vernieuw dan de editor. 

Stijl app widget 

Alle wijzigingen die je maakt in de hoofdeditor widget zijn van toepassing op zowel je website als je app. Om wijzigingen toe te passen op alleen je app, voeg je aangepaste CSS toe aan het tabblad CSS van de aangepaste blok-editor in Tapcart. Leer hoe je aangepaste CSS kunt gebruiken om de widget Klaviyo Recensies te stylen. 

Extra hulpbronnen

• Hoe vraag je beoordelingen aan bij je klant met Klaviyo Beoordelingenstroom
• Hoe matig je Klaviyo Recensies
• Klaviyo Beoordelingen gegevens referentie