본문으로 건너뛰기

독립몰 위젯 설치

이 문서에서는 독립몰에서 브이리뷰 위젯을 사용하기 위한 방법을 안내합니다. 독립몰은 호스팅 플랫폼을 사용하지 않고 자체 구축한 쇼핑몰을 의미합니다.

만약 카페24 또는 고도몰 등의 호스팅 플랫폼을 사용하신다면 브이리뷰 위젯 플러스 - 셀프 설치 가이드 문서를 참고해 주세요.

위젯 스크립트 삽입하기​

아래 스크립트를 복사하여 쇼핑몰의 <head></head> 태그에 추가합니다.

<!-- 브이리뷰 스크립트 (dev@indentcorp.com) -->
<script src="https://script.vreview.tv/vreview.widget.js"></script>

위젯 초기화하기​

아래 스크립트를 <body></body> 태그의 가장 아래에 추가합니다.

<script>
  vreviewWidget.initialize({
    uuid: /* 브이리뷰에서 전달받은 쇼핑몰 UUID 값 */,
    originMemberId: /* 쇼핑몰 회원 ID */,
  })
</script>
주의

만약 쇼핑몰이 SPA로 구현되어 있거나 동적으로 DOM을 생성하는 경우, DOM이 생성된 후 위젯을 초기화해야 합니다.

예시​

<script>
  vreviewWidget.initialize({
    uuid: '75804e73-e4ab-4885-9f13-53e346aca259',
    originMemberId: myShop.currentMemberId,
  })
</script>

위젯 상품 ID 지정​

노트

브이리뷰 위젯의 상품 ID 추가 방법​

브이리뷰 위젯에서는 사용자의 편의를 위해 다양한 상황에 맞게 상품 ID를 추가할 수 있는 두 가지 방법을 제공합니다.

1. URL에서 상품 ID 파싱

  • 적용 상황: 웹사이트의 상품 페이지 URL이 일정한 패턴을 가지고 있으며, URL의 Path 부분에 상품 ID가 명시적으로 포함되어 있는 경우.
  • 특징: 상품 페이지의 구조나 URL 패턴에 변동이 없을 때 효과적입니다.
  • 문의: 이 방식을 적용하려면 특정 설정이 필요합니다, 자세한 문의사항은 dev@vreview.tv 통해 문의주세요.

2. 변수 선언을 통한 상품 ID 추가

  • 적용 상황: 웹사이트의 URL에 일정한 패턴이 없거나, 상품 ID 정보가 URL Path에 직접적으로 드러나지 않는 경우.
  • 특징: 상품 페이지마다 상품 ID를 수동으로 변수로 선언해주어야 합니다.
  • 참고: 아래의 가이드를 확인하여 상품 ID 변수 선언 방법을 참고해 주세요.

아래 스크립트를 <head></head> 태그의 가장 아래에 추가해 주세요.

<script>
  var VREVIEW = {
    PRODUCT_ID : /* 상품 ID 값 */,
  }
</script>

예시​

<script>
  var VREVIEW = {
    PRODUCT_ID = "product_id_1004"
  }
</script>

위젯 영역 지정하기​

위젯을 노출하고 싶은 위치에 각 위젯에 해당하는 클래스명을 추가합니다. 위젯별 상세 내용은 아래 페이지를 참고해 주세요.