Zo voeg je Klaviyo Reviews-widget toe aan je mobiele app met Tapcart
Wat je leert
Lees hoe je Klaviyo Reviews-widgets toevoegt aan een mobiele app die is gebouwd met Tapcart. Deze widgets kun je aan je Tapcart-app toevoegen met aangepaste blokken:
- Widget met sterbeoordeling
Alleen productpagina’s; toon de algemene sterbeoordeling van een product - Widget voor productbeoordelingen
Alleen productpagina's; toon een samenvatting en een lijst met alle beoordelingen voor een product, plus knoppen om een vraag te stellen of een beoordeling achter te laten - Widget met carrousel met uitgelichte reviews
Elke pagina; toon een selectie uitgelichte reviews voor verschillende producten
Tapcart is alleen beschikbaar voor winkels die met Shopify zijn gebouwd.
Voordat je van start gaat
Dit proces is alleen beschikbaar voor bedrijven die:
- Heb je al een mobiele app gebouwd met Tapcart
- Gebruik een Tapcart Enterprise-abonnement
- Een actief Klaviyo Reviews-abonnement hebben
Als je Klaviyo Reviews nog niet hebt ingesteld, ga dan naar ons artikel over Aan de slag met Klaviyo Reviews.
Voeg Klaviyo Reviews-widgets toe met een aangepast blok in Tapcart
Volg deze stappen om een reviews-widget toe te voegen in Tapcart. U moet deze stappen herhalen (d.w.z. een afzonderlijk aangepast blok maken) voor alle 3 de widgets.
- Open de Tapcart-editor.
- Schakel in App Studio over van Design Blocks naar Custom Blocks.
- Klik op Blocks Editor starten om een nieuw aangepast blok te maken.
- Geef de widget een duidelijke naam, zoals Klaviyo Star Rating custom block.
- Voeg op het tabblad JS van de blokeditor het volgende codefragment toe. Vervang PUBLIC_API_KEY door je 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);- Plak in het tabblad HTML van de blokeditor het codefragment voor de widget die je wilt toevoegen (bijv. de widget voor sterbeoordelingen). Vind de codefragmenten hieronder:
- Klik op Opslaan.
- Klik op Sluiten om de editor af te sluiten.
- Selecteer in de dropdown App Studio Productdetails.
Deze stap is vereist voor de widgets voor sterbeoordelingen en productreviews. Je kunt de widget met uitgelichte beoordeling op elke app-pagina plaatsen.
- Sleep het opgeslagen aangepaste blok dat je zojuist hebt gemaakt naar je template.
- De editor laadt de widget mogelijk niet rechtstreeks; in plaats daarvan zie je de bloknaam als platte tekst. Dit is te verwachten.
- Klik op Voorbeeld van je app en ga naar de pagina waar je je app hebt toegevoegd. Let erop dat de widget correct wordt weergegeven.
De knoppen Stel een vraag en Laat een beoordeling achter werken niet in de previewmodus. Zodra je de wijzigingen in je app publiceert, opent het klikken op deze knoppen in de app een nieuw browsertabblad.
codefragment
Widget voor sterrenwaarderingen
<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 van app-widgets weergeven
De Klaviyo Reviews-widgets worden niet automatisch weergegeven in de Tapcart-preview, maar worden correct geladen in je app. Dit komt doordat de widgets een echte product-ID nodig hebben om te weten welke reviews ze moeten weergeven. Als je de widgets wilt previewen, voeg je een product-ID-variabele toe in het veld Variable preview values in de Tapcart-editor.
- Selecteer in de Tapcart App Studio Aangepast om je aangepaste widgets te bekijken.
- Klik op het pictogram met de drie puntjes naast een van je review-widgetblokken en klik op Editor starten.
- Klik op Instellingen.
- Scroll of zoek door de JSON om de variabele id te vinden in het object product. Let erop dat er andere variabelen id in andere objecten staan; je hoeft alleen de product-ID te bewerken die hier wordt weergegeven.
- Vervang de voorbeeldproduct-ID door de ID van een product in je winkel dat minimaal 1 review heeft. Om een product-ID te vinden, ga je in Klaviyo naar Content > Producten en kopieer je vervolgens een item-ID.
- Klik op Opslaan.
- Herhaal deze stappen voor je andere review-widgetblokken.
- Als de voorvertoningen niet meteen correct worden weergegeven, moet u de editor vernieuwen.
App-widgets opmaken
Alle wijzigingen die je in de hoofdwidgeteditor aanbrengt, zijn van toepassing op zowel je website als je app. Als je wijzigingen alleen op je app wilt toepassen, voeg je aangepaste CSS toe aan het tabblad CSS van de aangepaste blokeditor in Tapcart. Lees hoe je aangepaste CSS gebruikt om de widgets van Klaviyo Reviews op te maken.