탭카트를 사용하여 모바일 앱에 클라비요 리뷰 위젯을 추가하는 방법

학습 내용

탭카트로 구축한 모바일 앱에 클라비요 리뷰 위젯을 추가하는 방법을 알아보세요. 이러한 위젯은 사용자 지정 블록을 사용하여 탭카트 앱에 추가할 수 있습니다: 

• 별점 위젯
  제품 페이지만 해당, 제품의 전체 별점 표시
• 제품 리뷰 위젯
  제품 페이지에 한하여 제품에 대한 모든 리뷰의 요약 및 목록과 질문 또는 리뷰를 남길 수 있는 버튼을 표시합니다. 
• 추천 리뷰 캐러셀 위젯
  모든 페이지에서 여러 제품에 걸쳐 선별된 추천 리뷰를 표시합니다. 

탭카트는 Shopify로 구축된 스토어에서만 사용할 수 있습니다.

시작하기 전 안내 사항

이 프로세스는 다음과 같은 회사만 사용할 수 있습니다:

• 탭카트로 이미 모바일 앱을 구축한 경우
• 탭카트 엔터프라이즈 요금제 사용
• 활성 클라비요 리뷰 요금제 가입

아직 클라비요 리뷰를 설정하지 않았다면 클라비요 리뷰 시작하기 문서를 참조하세요.

탭카트에서 사용자 지정 블록을 사용하여 클라비요 리뷰 위젯 추가하기

탭카트에 리뷰 위젯을 추가하려면 다음 단계를 따르세요. 3개의 위젯 모두에 대해 이 단계를 반복(즉, 별도의 사용자 정의 블록을 생성)해야 합니다. 

1. 탭카트 에디터를 엽니다. 
2. 앱 스튜디오에서 디자인 블록에서 사용자 지정 블록으로 전환합니다.
   
3. 블록 편집기 시작을 클릭하여 새 사용자 지정 블록을 만듭니다. 
4. 위젯의 이름은 클라비요 별점 사용자 지정 블록과 같이 명확하게 지정합니다. 
5. 블록 편집기의 JS 탭에서 다음 코드 스니펫을 추가합니다. PUBLIC_API_KEY를 6자리의 클라비요 사이트 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(스크립트);

6. 블록 편집기의 HTML 탭에서 추가하려는 위젯의 코드조각을 붙여넣습니다(예: 별점 평가 위젯). 아래에서 코드 스니펫을 찾아보세요: 
1. 별점 위젯 코드
2. 제품 리뷰 위젯 코드
3. 추천 리뷰 캐러셀 위젯 코드
   
7. 저장을 클릭합니다. 
8. 닫기를 클릭하여 편집기를 종료합니다. 
9. 앱 스튜디오 드롭다운에서 제품 세부 정보를 선택합니다.
   
   
   이 단계는 별점 및 제품 리뷰 위젯에 필요합니다. 모든 앱 페이지에 추천 리뷰 위젯을 배치할 수 있습니다. 
10. 방금 만든 저장된 사용자 지정 블록을 템플릿으로 드래그합니다. 
11. 편집기에서 위젯이 직접 로드되지 않고 블록 이름이 일반 텍스트로 표시될 수 있습니다. 이는 예상되는 현상입니다. 
12. 앱 미리 보기를 클릭하고 앱을 추가한 페이지로 이동합니다. 위젯이 올바르게 표시되는지 확인하세요.

코드 스니펫

별점 위젯

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

앱 위젯 미리보기

클라비요 리뷰 위젯은 탭카트 미리 보기에 자동으로 표시되지 않지만 앱에 올바르게 로드됩니다. 위젯에 표시할 리뷰를 확인하려면 실제 제품 ID가 필요하기 때문입니다. 위젯을 미리 보려면 탭카트 에디터의 변수 미리 보기 값 필드에 제품 ID 변수를 추가합니다. 

1. 탭카트 앱 스튜디오에서 사용자 지정을 선택하여 사용자 지정 위젯을 확인합니다. 
2. 리뷰 위젯 블록 중 하나 옆에 있는 점 3개 아이콘을 클릭하고 편집기 시작을 클릭합니다. 
3. 설정을 클릭합니다. 
   
4. JSON을 스크롤하거나 검색하여 제품 개체 내에서 ID 변수를 찾습니다. 다른 개체 내에는 다른 ID 변수가 있으므로 여기에 표시된 제품 ID만 편집하면 됩니다. 
   
5. 샘플 제품 ID를 스토어에서 리뷰가 1개 이상 있는 제품의 ID로 바꿉니다. 제품 ID를 찾으려면 에서 콘텐츠 > 제품으로 이동한 Klaviyo 다음 품목 ID를 복사합니다. 
   
6. 저장을 클릭합니다. 
7. 다른 리뷰 위젯 블록에 대해서도 이 단계를 반복합니다. 
8. 미리보기가 바로 올바르게 표시되지 않으면 편집기를 새로 고치세요. 

앱 위젯 스타일 지정 

기본 위젯 편집기에서 변경한 사항은 웹사이트와 앱 모두에 적용됩니다. 앱에만 변경 사항을 적용하려면 탭카트에서 사용자 지정 블록 편집기의 CSS 탭에 사용자 지정 CSS를 추가하세요. 사용자 정의 CSS를 사용하여 클라비요 리뷰 위젯의 스타일을 지정하는 방법을 알아보세요. 

추가 리소스

• 클라비요 리뷰 플로우로 고객에게 리뷰를 요청하는 방법
• 클라비요 리뷰를 관리하는 방법
• 클라비요 리뷰 데이터 참조