So fügst du deiner mobilen App mit Tapcart Klaviyo Reviews-Widgets hinzu

Übersicht

Erfahre, wie du Klaviyo Reviews Widget zu einer mit Tapcart erstellten mobilen App hinzufügst. Diese Widgets können mit benutzerdefinierten Blöcken zu deiner Tapcart-App hinzugefügt werden:

• Star-Bewertungs-Widget
  Nur Produktseiten; die gesamte Sternebewertung eines Produkts anzeigen
• Widget für Produktbewertungen
  Nur Produktseiten; zeigt eine Zusammenfassung und eine Liste aller Bewertungen für ein Produkt sowie Schaltflächen, um eine Frage zu stellen oder eine Bewertung zu schreiben
• Karussell-Widget für hervorgehobene Bewertungen
  Jede Seite; zeige eine Auswahl hervorgehobener Bewertungen für mehrere Produkte

Tapcart ist nur für Shops verfügbar, die mit Shopify erstellt wurden.

Bevor du anfängst

Dieser Prozess ist nur für Unternehmen verfügbar, die:

• Hast bereits eine mobile App mit Tapcart erstellt
• Einen Tapcart-Enterprise-Abonnement verwenden
• Du hast einen aktiven Klaviyo Reviews-Tarif.

Wenn du Klaviyo Reviews noch nicht eingerichtet hast, lies unseren Artikel zu Erste Schritte mit Klaviyo Reviews.

Klaviyo Reviews-Widgets mithilfe eines benutzerdefinierten Blocks in Tapcart hinzufügen

Befolge diese Schritte, um ein beliebiges Bewertungs-Widget in Tapcart hinzuzufügen. Diese Schritte musst du 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-Blöcken zu Benutzerdefinierte Blöcke.
   

3. Klicke auf Blocks Editor starten, um einen neuen benutzerdefinierten Block zu erstellen.
4. Gib dem Widget einen eindeutigen Namen, z. B. Benutzerdefinierter Block „Klaviyo Star Rating“.
5. Füge im Tab JS des Block-Editors 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);

1. Füge im Tab HTML des Block-Editors das Snippet für das Widget ein, das du hinzufügen möchtest (z. B. das Widget für Sternebewertungen). Finde die Code-Fragmente unten:
   1. Widget-Code für Sternebewertungen
   2. Widget-Code für Produktbewertungen
   3. Code für das Karussell-Widget mit hervorgehobenen Bewertungen
      

2. Klicke auf Speichern.
3. Klicke auf Schließen, um den Editor zu schließen.
4. Wähle im Dropdown App Studio Produktdetails aus.
   
   

1. Ziehe den gespeicherten benutzerdefinierten Block, den du gerade erstellt hast, in deine Vorlage.
2. Der Editor lädt das Widget möglicherweise nicht direkt. Stattdessen wird der Blockname als einfacher Text angezeigt. Das ist zu erwarten.
3. Klicke auf App-Vorschau und navigiere zu der Seite, auf der du deine App hinzugefügt hast. Beachte, dass das Widget korrekt angezeigt wird.

Code-Fragment

Widget für Sternebewertungen

<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>

App-Vorschau-Widgets

Die Klaviyo Reviews Widgets werden nicht automatisch in der Tapcart-Vorschau angezeigt, werden aber in deiner App korrekt geladen. Das liegt daran, dass die Widgets eine echte Produkt-ID benötigen, um zu wissen, welche Rezensionen angezeigt werden sollen. Um die Widgets in der Vorschau anzuzeigen, füge im Tapcart-Editor im Feld Variable Preview Values eine Produkt-ID-Variable hinzu.

1. Wähle in Tapcart App Studio Benutzerdefiniert aus, um deine benutzerdefinierten Widgets anzuzeigen.
2. Klicke auf das Symbol mit den drei Punkten neben einem deiner Review-Widget-Blöcke und klicke auf Editor starten.
3. Klicke auf Einstellungen.
   

4. Scrolle oder suche im JSON, um die Variable id im Objekt product zu finden. Beachte, dass es in anderen Objekten weitere id -Variablen gibt; du musst nur die hier angezeigte Produkt-ID bearbeiten.
   

5. Ersetze die Beispiel-Produkt-ID durch die ID eines Produkts in deinem Shop, das mindestens 1 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 deine anderen Bewertungs-Widget-Blöcke.
8. Wenn die Vorschauen nicht sofort korrekt angezeigt werden, aktualisiere den Editor.

Widget der Style-App

Alle Änderungen, die im Haupt-Widget-Editor vorgenommen werden, gelten sowohl für deine Website als auch für deine App. Um Änderungen nur auf deine App anzuwenden, füge dem Tab CSS des benutzerdefinierten Block-Editors in Tapcart benutzerdefiniertes CSS hinzu. Erfahre, wie du benutzerdefiniertes CSS verwendest, um Klaviyo Reviews Widgets zu gestalten.