Tapcart를 사용해 모바일 앱에 Klaviyo 리뷰 위젯을 추가하는 방법
학습 내용
Tapcart로 구축한 모바일 앱에 Klaviyo 리뷰 위젯을 추가하는 방법을 알아보세요. 이러한 위젯은 사용자 지정 블록을 사용해 Tapcart 앱에 추가할 수 있어요:
- 별점 위젯
제품 페이지만 해당; 제품의 전체 별점을 표시해요 - 상품 리뷰 위젯
상품 페이지 전용, 상품에 대한 모든 리뷰의 요약 및 목록을 표시하고, 질문하기 또는 리뷰 남기기 버튼도 함께 표시해요. - 추천 후기 캐러셀 위젯
모든 페이지, 여러 제품의 추천 후기를 선별해 표시
Tapcart는 Shopify로 구축된 스토어에서만 사용할 수 있어요.
시작하기 전에 알아야 할 것
이 프로세스는 다음 조건에 해당하는 회사에서만 사용할 수 있습니다:
- Tapcart로 이미 모바일 앱을 구축했어요
- Tapcart Enterprise 요금제 사용
- 활성 Klaviyo 리뷰 요금제를 사용 중이어야 합니다.
아직 Klaviyo 리뷰를 설정하지 않았다면 Klaviyo 리뷰 시작하기 문서를 확인해 주세요.
Tapcart에서 사용자 지정 블록을 사용해 Klaviyo 리뷰 위젯 추가하기
Tapcart에서 어떤 리뷰 위젯이든 추가하려면 다음 단계를 따라 주세요. 3개의 모든 위젯에 대해 이 단계를 반복해야 해요(즉, 각각 별도의 맞춤 블록을 생성해야 해요).
- Tapcart 편집기를 여세요.
- App Studio에서 Design Blocks에서 Custom Blocks로 전환해 주세요.
- 새 사용자 지정 블록을 만들려면 블록 편집기 실행을 클릭하세요.
- 위젯 이름을 Klaviyo Star Rating custom block처럼 명확하게 지정해 주세요.
- 블록 편집기의 JS 탭에서 다음 코드 조각을 추가하세요. PUBLIC_API_KEY를 6자 Klaviyo 사이트 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);- 블록 편집기의 HTML 탭에서 추가하려는 위젯(예: 별점 위젯)용 스니펫을 붙여넣어 주세요. 아래에서 코드 조각을 확인하세요:
- 저장을 클릭합니다.
- 편집기를 종료하려면 닫기를 클릭하세요.
- App Studio 드롭다운에서 Product detail을 선택하세요.
이 단계는 별점 평가 및 제품 리뷰 위젯에 필요합니다. 추천 리뷰 위젯은 모든 앱 페이지에 배치할 수 있습니다.
- 방금 만든 저장된 맞춤 블록을 템플릿으로 드래그해 주세요.
- 에디터에서 위젯이 바로 로드되지 않을 수 있으며, 대신 블록 이름이 일반 텍스트로 표시돼요. 이는 정상이에요.
- 앱 미리보기를 클릭하고 앱을 추가한 페이지로 이동해 주세요. 위젯이 올바르게 표시되는지 확인해 주세요.
질문하기 및 리뷰 남기기 버튼은 미리보기 모드에서 작동하지 않아요. 앱에 변경 사항을 게시하면, 앱에서 이 버튼을 클릭할 때 새 브라우저 탭이 열려요.
코드 조각
별점 위젯
<div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}"></div>제품 리뷰 위젯
<div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>추천 후기 캐러셀
<div id="klaviyo-featured-reviews-carousel"></div>앱 위젯 미리보기
Klaviyo 리뷰 위젯은 Tapcart 미리보기에서 자동으로 표시되지는 않지만, 앱에서는 정상적으로 로드돼요. 이는 위젯이 어떤 리뷰를 표시할지 알기 위해 실제 제품 ID가 필요하기 때문이에요. 위젯을 미리 보려면 Tapcart 편집기에서 변수 미리보기 값 필드에 제품 ID 변수를 추가해 주세요.
- Tapcart 앱 스튜디오에서 사용자 지정을 선택하여 사용자 지정 위젯을 확인하세요.
- 리뷰 위젯 블록 중 하나 옆에 있는 점 3개 아이콘을 클릭한 다음 편집기 실행을 클릭해 주세요.
- 설정을 클릭합니다.
- JSON을 스크롤하거나 검색하여 product 객체 내의 id 변수를 찾으세요. 다른 객체 내에도 id 변수가 있으니 유의하세요. 여기 표시된 제품 ID만 편집하면 됩니다.
- 예시 제품 ID를 스토어에서 리뷰가 1개 이상 있는 제품의 ID로 바꾸세요. 제품 ID를 찾으려면 Klaviyo에서 콘텐츠 > 제품으로 이동한 다음, 항목 ID를 복사하세요.
- 저장을 클릭합니다.
- 다른 리뷰 위젯 블록에도 이 단계를 반복하세요.
- 미리 보기가 바로 제대로 표시되지 않으면 편집기를 새로고침하세요.
앱 위젯 스타일 지정
기본 위젯 편집기에서 변경한 내용은 웹사이트와 앱 모두에 적용돼요. 앱에만 변경 사항을 적용하려면 Tapcart의 사용자 지정 블록 편집기에서 CSS 탭에 사용자 지정 CSS를 추가하세요. 사용자 지정 CSS를 사용해 Klaviyo 리뷰 위젯의 스타일을 지정하는 방법을 알아보세요.