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

Du kommer att lära dig

Lär dig hur du lägger till Klaviyo Reviews widget i en mobilapp byggd med Tapcart. Dessa widgetar kan läggas till i din Tapcart-app med hjälp av anpassade block:

• Stjärnbetyg widget
  Endast produktsidor; visar en produkts övergripande stjärnbetyg
• Produktrecensioner widget
  Endast produktsidor; visar 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
• Karusell för utvalda recensioner widget
  Valfri sida; visa ett urval av utvalda recensioner av flera produkter

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

Innan du börjar

Denna process är endast tillgänglig för företag som:

• Har redan byggt en mobilapp med Tapcart
• Använd en Tapcart Enterprise abonnemang
• Ha en Aktiv Klaviyo Reviews abonnemang

Om du inte har satt upp Klaviyo Reviews ännu, gå till vår artikel om Komma igång med Klaviyo Reviews.

Lägg till Klaviyo Reviews widget med hjälp av en anpassad block i Tapcart

Följ dessa steg för att lägga till en widget för recensioner i Tapcart. Du måste upprepa dessa steg (dvs. skapa en separat anpassad block) för alla 3 widgetar.

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

3. Klicka på Launch block Editor för att skapa en ny anpassad block.
4. Ge widget ett tydligt namn, t.ex. Klaviyo Star Rating custom block.
5. Lägg till följande kodsnippet på fliken JS i block editor. 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(skript);

1. På fliken HTML i block redigeraren klistrar du in utdraget för widget som du vill lägga till (t.ex. stjärnbetyget widget). Hitta kodsnippet nedan:
   1. Kod för widget med stjärnbetyg
   2. Produktrecensioner widget kod
   3. Kod för widget för karusell med utvalda recensioner
      

2. Klicka på Spara.
3. Klicka på Stäng för att lämna redigeringsverktyget.
4. Välj Product detail i rullgardinsmenyn App Studio.
   
   

1. Dra den sparade anpassade block som du just skapade till ditt köpcentrum.
2. Redaktören kanske inte laddar widget direkt, utan istället ser du namnet block som vanlig text. Detta är väntat.
3. Klicka på Preview your app och navigera till den sida där du lade till din app. Observera att widget visas korrekt.

kodsnippet

Stjärnklassificering widget

<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-karusell"></div>

Widget för förhandsgranskning av app

Widgeten Klaviyo Reviews visas inte automatiskt i förhandsgranskningen av Tapcart, men laddas korrekt i din app. Detta beror på att widgeten kräver ett riktigt produkt-ID för att veta vilka recensioner som ska visas. För att förhandsgranska widgeten 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 Custom för att visa din anpassade widget.
2. Klicka på ikonen med tre prickar bredvid ett av dina granskningsblock widget och klicka på Launch Editor.
3. Klicka på Inställningar.
   

4. Bläddra eller sök igenom JSON för att hitta id-variabeln i produktobjektet. Observera att det finns andra id-variabler i andra objekt; du behöver bara redigera det produkt-ID som visas här.
   

5. Ersätt ID:t för exempelprodukten med ID:t för en produkt i din butik som har minst 1 recension. För att hitta ett produkt-ID, navigera till Content > Products i Klaviyo och kopiera sedan ett artikel-ID.
   

6. Klicka på Spara.
7. Upprepa dessa steg för din andra granskning widget block.
8. Om förhandsgranskningarna inte visas korrekt direkt, uppdatera redigeraren.

Widget för stilapplikation

Alla ändringar som görs i huvudeditorn på widget kommer att gälla både för webbplatsen och appen. Om du vill tillämpa ändringar på bara din app lägger du till anpassad CSS på fliken CSS i redigeraren för anpassade block i Tapcart. Lär dig hur du använder anpassad CSS för att styla Klaviyo Reviews widget.

Ytterligare resurser