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.

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

Följ de här stegen för att lägga till valfri widget för recensioner i Tapcart. Du behöver upprepa dessa steg (dvs. skapa ett separat anpassat block) för alla 3 widgetar.

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.
2. Redigeraren kanske inte laddar widgeten direkt; i stället ser du blocknamnet som ren text. Detta är förväntat.
3. Klicka på Förhandsgranska din app och navigera till sidan där du lade till din app. Observera att widgeten visas korrekt.

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

Klaviyo Reviews-widgetarna visas inte automatiskt i Tapcart-förhandsvisningen, men läses in korrekt i din app. Det beror på att widgetarna kräver ett riktigt produkt-ID för att veta vilka recensioner som ska visas. För att förhandsvisa widgetarna lägger du till en produkt-ID-variabel i fältet Variable Preview Values i Tapcart-redigeraren.

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 dina andra recensionswidget-block.
8. Om förhandsvisningarna inte visas korrekt direkt uppdaterar du redigeraren.

Styla appwidgetar

Alla ändringar som görs i huvudredigeraren för widgeten gäller både din webbplats och din app. Om du vill tillämpa ändringar bara i din app lägger du till anpassad CSS på fliken CSS i redigeraren för anpassade block i Tapcart. Läs mer om hur du använder anpassad CSS för att formge Klaviyo Reviews-widgetar.

Ytterligare resurser