Jak dodać widżety Klaviyo Reviews do aplikacji mobilnej za pomocą Tapcart

Czego się dowiesz?

Dowiedz się, jak dodać widżety Klaviyo Reviews do aplikacji mobilnej stworzonej za pomocą Tapcart. Te widżety można dodać do aplikacji Tapcart za pomocą bloków niestandardowych:

• Widżet oceny w gwiazdkach
  Tylko strony produktów; pokazuje ogólną ocenę produktu w gwiazdkach
• Widżet opinii o produkcie
  Tylko strony produktów; wyświetlaj podsumowanie i listę wszystkich opinii o produkcie, a także przyciski do zadania pytania lub dodania opinii
• Widżet karuzeli wyróżnionych recenzji
  Dowolna strona; pokaż wybór wyróżnionych recenzji z kilku produktów

Tapcart jest dostępny tylko dla sklepów zbudowanych na platformie Shopify.

Kilka słów na początek

Ten proces jest dostępny tylko dla firm, które:

• Masz już zbudowaną aplikację mobilną za pomocą Tapcart
• Użyj planu Tapcart Enterprise
• Miej aktywny plan Klaviyo Reviews

Jeśli jeszcze nie skonfigurowano Klaviyo Reviews, zajrzyj do naszego artykułu Pierwsze kroki z Klaviyo Reviews.

Jeśli dodajesz karuzelę wyróżnionych opinii, wybierz opublikowane opinie, które chcesz wyróżnić w Klaviyo przed wyświetleniem podglądu karuzeli.

Dodaj widżety Klaviyo Reviews, używając bloku niestandardowego w Tapcart

Wykonaj te kroki, aby dodać widżet recenzji w Tapcart. Utwórz osobny niestandardowy blok dla każdego widżetu, który chcesz dodać.

1. Otwórz edytor Tapcart.
2. W App Studio przełącz z Bloki projektowe na Bloki niestandardowe.
   

3. Kliknij Uruchom edytor bloków, aby utworzyć nowy blok niestandardowy.
4. Nazwij widżet w jasny sposób, np. Niestandardowy blok Klaviyo Star Rating.
5. W karcie JS edytora bloków dodaj następujący wycinek kodu źródłowego. Zamień PUBLIC_API_KEY na swój 6-znakowy identyfikator witryny Klaviyo.
   

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. Na karcie HTML w edytorze bloków wklej wycinek kodu źródłowego widżetu, który chcesz dodać (np. widżet oceny gwiazdkowej). Znajdź poniższe wycinki kodu źródłowego:
   1. Kod widżetu ocen gwiazdkowych
   2. Kod widżetu recenzji produktów
   3. Kod widżetu karuzeli wyróżnionych recenzji
      

2. Kliknij Zapisz.
3. Kliknij Zamknij, aby wyjść z edytora.
4. Z menu rozwijanego App Studio wybierz Szczegóły produktu.
   
   

1. Przeciągnij zapisany blok niestandardowy, który właśnie utworzono, do szablonu.

Edytor może nie załadować widżetu bezpośrednio; zamiast tego zobaczysz nazwę bloku jako zwykły tekst. To jest oczekiwane.

1. Kliknij Podgląd aplikacji i przejdź do strony, na której dodano widżet. Sprawdź, czy widżet wyświetla się poprawnie.
2. Gdy będziesz gotowy(-a), aby klienci zobaczyli widżety, opublikuj zmiany w Tapcart.

wycinek kodu źródłowego

Widżet ocen gwiazdkowych

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

Widżet recenzji produktów

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

Karuzela wyróżnionych recenzji

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

Wyświetl podgląd widżetów aplikacji

Widżet ocen w gwiazdkach i recenzji produktów potrzebują prawdziwego identyfikatora produktu, aby wyświetlać właściwe recenzje. Aby wyświetlić podgląd tych widżetów, ustaw identyfikator produktu w polu Wartości podglądu zmiennych w edytorze Tapcart. Karuzela wyróżnionych recenzji nie potrzebuje identyfikatora produktu.

1. W Tapcart App Studio wybierz Niestandardowe, aby wyświetlić niestandardowe widżety.
2. Kliknij ikonę trzech kropek obok jednego z bloków widżetu opinii i kliknij Uruchom edytor.
3. Kliknij Ustawienia.
   

4. Przewiń lub przeszukaj JSON, aby znaleźć zmienną id w obiekcie product. Pamiętaj, że w innych obiektach są też inne zmienne id; musisz edytować tylko identyfikator produktu pokazany tutaj.
   

5. Zastąp przykładowy identyfikator produktu identyfikatorem produktu w Twoim sklepie, który ma co najmniej 1 recenzję. Aby znaleźć identyfikator produktu, przejdź do Content > Products w Klaviyo, a następnie skopiuj identyfikator elementu.
   

6. Kliknij Zapisz.
7. Powtórz te kroki dla każdej oceny w gwiazdkach lub każdego niestandardowego bloku z opiniami o produktach, który dodasz.
8. Jeśli podglądy nie pojawiają się od razu poprawnie, odśwież edytor.

Stylizuj widżety aplikacji

Zmiany ustawień widżetu w edytorze widżetów Klaviyo mają zastosowanie zarówno do Twojej witryny, jak i aplikacji po kliknięciu Opublikuj zmiany. Aby zastosować zmiany stylu tylko do Twojej aplikacji, dodaj niestandardowy CSS na karcie CSS w edytorze bloków niestandardowych w Tapcart. Dowiedz się jak używać niestandardowego CSS do stylizowania widżetów Klaviyo Reviews.

Dodatkowe źródła