Så här lägger du till widgetar för Klaviyo Reviews i din mobilapp med Tapcart

Du kommer att lära dig

Läs mer om hur du lägger till widgetar för Klaviyo Reviews i en mobilapp som är byggd med Tapcart. Dessa widgetar kan läggas till i din Tapcart-app med hjälp av anpassade block:

• Widget för stjärnbetyg
  Endast produktsidor; visa en produkts totala stjärnbetyg
• Widget för produktrecensioner
  Endast produktsidor; visa en sammanfattning och en lista över alla recensioner för en produkt, plus knappar för att ställa en fråga eller lämna en recension
• Widget för karusell med utvalda recensioner
  Vilken sida som helst; visa ett urval av utvalda recensioner för flera produkter

Tapcart är endast tillgängligt för butiker som är byggda med Shopify.

Innan du börjar

Den här processen är endast tillgänglig för företag som:

• Har du redan skapat en mobilapp med Tapcart
• Använd en Tapcart Enterprise-plan
• Ha en aktiv Klaviyo Reviews-plan

Om du inte har konfigurerat Klaviyo Reviews ännu kan du läsa vår artikel om att komma igång med Klaviyo Reviews.

Om du lägger till karusellen med utvalda recensioner ska du välja de publicerade recensioner du vill lyfta fram i Klaviyo innan du förhandsgranskar karusellen.

Lägg till Klaviyo Reviews-widgetar med ett anpassat block i Tapcart

Följ de här stegen för att lägga till en widget för recensioner i Tapcart. Skapa ett separat anpassat block för varje widget som du vill lägga till.

1. Öppna Tapcart-redigeraren.
2. I App Studio växlar du från Design Blocks till Custom Blocks.
   

3. Klicka på Starta Blocks Editor för att skapa ett nytt anpassat block.
4. Ge widgeten ett tydligt namn, till exempel Klaviyo Star Rating custom block.
5. På fliken JS i blockredigeraren lägger du till följande kodsnippet. Ersätt PUBLIC_API_KEY med ditt 6-teckens Klaviyo-webbplats-ID.
   

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. I fliken HTML i blockredigeraren klistrar du in snippetten för den widget som du vill lägga till (t.ex. widgeten för stjärnbetyg). Hitta kodsnippet nedan:
   1. Kod för stjärnbetygswidget
   2. Kod för widget för produktrecensioner
   3. Kod för karusellwidget för utvalda recensioner
      

2. Klicka på Spara.
3. Klicka på Stäng för att avsluta redigeraren.
4. I rullgardinsmenyn App Studio väljer du Produktinformation.
   
   

1. Dra det sparade anpassade blocket du nyss skapade till din mall.

Redigeraren kanske inte laddar widgeten direkt; i stället ser du blocknamnet som ren text. Detta är förväntat.

1. Klicka på Förhandsgranska din app och gå till sidan där du lade till widgeten. Kontrollera att widgeten visas korrekt.
2. När du är redo att kunderna ska se widgetarna kan du publicera dina ändringar i Tapcart.

kodsnippet

Widget för stjärnbetyg

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

Produktrecensionswidget

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

Karusell med utvalda recensioner

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

Förhandsgranska appwidgetar

Stjärnbetygs- och produktrecensionswidgetarna behöver ett riktigt produkt-ID för att visa rätt recensioner. För att förhandsgranska dessa widgetar anger du ett produkt-ID i fältet Förhandsgranskningsvärden för variabler i Tapcart-redigeraren. Recensionskarusellen för utvalda recensioner behöver inget produkt-ID.

1. I Tapcart App Studio väljer du Anpassad för att visa dina anpassade widgetar.
2. Klicka på ikonen med tre punkter bredvid ett av dina widget-block för recensioner och klicka på Starta redigeraren.
3. Klicka på Inställningar.
   

4. Skrolla eller sök igenom JSON-filen för att hitta variabeln id i objektet product. Observera att det finns andra id -variabler i andra objekt. Du behöver bara redigera produkt-ID:t som visas här.
   

5. Ersätt exempelprodukt-ID:t med ID:t för en produkt i din butik som har minst 1 recension. För att hitta ett produkt-ID går du till Innehåll > Produkter i Klaviyo och kopierar sedan ett objekt-ID.
   

6. Klicka på Spara.
7. Upprepa de här stegen för varje stjärnbetyg eller anpassat block för produktrecensioner som du lade till.
8. Om förhandsvisningarna inte visas korrekt direkt uppdaterar du redigeraren.

Styla appwidgetar

Ändringar i en widgets inställningar i Klaviyo widget-redigerare gäller både din webbplats och din app när du har klickat på Publicera ändringar. Om du vill tillämpa stiländringar endast på din app lägger du till anpassad CSS på fliken CSS i redigeraren för anpassade block i Tapcart. Läs hur du använder anpassad CSS för att utforma Klaviyo Reviews-widget.

Ytterligare resurser