So fügst du das Klaviyo Reviews Widget mit Tapcart zu deiner mobilen App hinzu

Du wirst lernen

Lerne, wie du das Klaviyo Reviews Widget zu einer mit Tapcart erstellten mobilen App hinzufügst. Diese Widgets können mit einem eigenen Block zu deiner Tapcart-App hinzugefügt werden: 

• Sterne-Bewertungs-Widget
  Nur für Produktseiten; zeigt die Gesamt-Sternbewertung eines Produkts an
• Widget für Produktbewertungen
  Nur für Produktseiten; zeigt eine Zusammenfassung und eine Liste aller Bewertungen für ein Produkt an, sowie Schaltflächen, um eine Frage zu stellen oder eine Bewertung zu hinterlassen 
• Karussell-Widget für vorgestellte Bewertungen
  Beliebige Seite; zeige eine Auswahl an vorgestellten Bewertungen über mehrere Produkte hinweg 

Tapcart ist nur für Laden verfügbar, die mit Shopify gebaut wurden.

Bevor du beginnst

Dieses Verfahren ist nur für Unternehmen verfügbar, die:

• Du hast bereits eine mobile App mit Tapcart erstellt
• Nutze ein Tapcart Enterprise Abonnement
• Du hast ein aktives Klaviyo Reviews Abonnement

Wenn du Klaviyo Reviews noch nicht eingerichtet hast, schau dir unseren Artikel über die ersten Schritte mit Klaviyo Reviews an.

Klaviyo Reviews Widget mit einem benutzerdefinierten Block in Tapcart hinzufügen

Befolge diese Schritte, um ein Bewertungs-Widget in Tapcart hinzuzufügen. Du musst diese Schritte für alle 3 Widgets wiederholen (d.h. einen separaten benutzerdefinierten Block erstellen). 

1. Öffne den Tapcart-Editor. 
2. Wechsle in App Studio von Design Block zu Custom Block.
   
3. Klicke auf Block-Editor starten, um einen neuen benutzerdefinierten Block zu erstellen. 
4. Gib dem Widget einen eindeutigen Namen, z.B. Klaviyo Star Rating Custom Block. 
5. Füge auf der Registerkarte JS des Blockeditors das folgende Code-Fragment hinzu. Ersetze PUBLIC_API_KEY durch deine 6-stellige Klaviyo-Site-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);

6. Füge im HTML-Tab des Block-Editors das Snippet für das Widget ein, das du hinzufügen möchtest (z. B. das Widget für die Sternebewertung). Finde das Code-Fragment unten: 
1. Code für das Sterne-Bewertungs-Widget
2. Code für das Produktbewertungs-Widget
3. Code für das Karussell-Widget für besondere Bewertungen
   
7. Klicke auf Speichern. 
8. Klicke auf Schließen, um den Editor zu verlassen. 
9. Wähle im Dropdown-Menü von App Studio die Option Produktdetail.
   
   
   Dieser Schritt ist für das Sterne- und Produktbewertungs-Widget erforderlich. Du kannst das Bewertungs-Widget auf jeder App-Seite platzieren. 
10. Ziehe den gespeicherten benutzerdefinierten Block, den du gerade erstellt hast, in deine Vorlage. 
11. Es kann sein, dass der Editor das Widget nicht direkt lädt; stattdessen siehst du den Blocknamen als reinen Text. Das wird erwartet. 
12. Klicke auf Vorschau deiner App und navigiere zu der Seite, auf der du deine App hinzugefügt hast. Beachte, dass das Widget korrekt angezeigt wird.

Code-Fragment

Sterne-Bewertungs-Widget

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

Widget für Produktbewertungen

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

Karussell mit ausgewählten Bewertungen

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

Vorschau App Widget

Das Klaviyo Reviews Widget erscheint nicht automatisch in der Tapcart-Vorschau, wird aber korrekt in deiner App geladen. Das liegt daran, dass das Widget eine echte Produkt-ID benötigt, um zu wissen, welche Bewertungen angezeigt werden sollen. Um eine Vorschau des Widgets zu erstellen, fügst du eine Produkt-ID-Variable in das Feld Variable Vorschauwerte im Tapcart-Editor ein. 

1. Wähle im Tapcart App Studio die Option Benutzerdefiniert, um dein benutzerdefiniertes Widget anzuzeigen. 
2. Klicke auf das Symbol mit den drei Punkten neben einem deiner Review-Widget-Blöcke und dann auf Editor starten. 
3. Klicke auf Einstellungen. 
   
4. Scrolle oder durchsuche das JSON, um die id-Variable innerhalb des Produktobjekts zu finden. Beachte, dass es noch weitere id-Variablen in anderen Objekten gibt; du musst nur die hier gezeigte Produkt-ID bearbeiten. 
   
5. Ersetze die ID des Beispielprodukts durch die ID eines Produkts in deinem Laden, das mindestens eine Bewertung hat. Um eine Produkt-ID zu finden, navigiere in Klaviyo zu Inhalt > Produkte und kopiere dann eine Artikel-ID. 
   
6. Klicke auf Speichern. 
7. Wiederhole diese Schritte für deinen anderen Review Widget Block. 
8. Wenn die Vorschauen nicht sofort richtig angezeigt werden, aktualisiere den Editor. 

Style app Widget 

Alle Änderungen, die du im Widget-Editor vornimmst, gelten sowohl für deine Website als auch für deine App. Um die Änderungen nur auf deine App anzuwenden, füge benutzerdefinierte CSS auf der Registerkarte CSS des benutzerdefinierten Block-Editors in Tapcart hinzu. Lerne, wie du das Klaviyo Reviews Widget mit benutzerdefiniertem CSS gestalten kannst. 

Zusätzliche Ressourcen

• So forderst du mit Klaviyo Reviews Flow Bewertungen von deinem Kunden an
• Wie man Klaviyo Bewertungen moderiert
• Klaviyo Datenreferenz überprüfen