위젯 연동 가이드
스크립트 한 줄로 어떤 웹사이트든 가상 피팅 위젯을 추가하세요.
Google Analytics처럼 간단합니다.
Quick Start
아래 코드를 웹사이트의 </body> 태그 바로 위에 붙여넣으세요.
<!-- IPDA 가상 피팅 위젯 -->
<script async src="https://widget.ipda.kr/v1/loader.js"></script>끝입니다! 페이지 우측 하단에 "가상 피팅 →" 버튼이 나타납니다.
설정 옵션
data-* 속성으로 위젯을 커스터마이즈할 수 있습니다.
<script async
src="https://widget.ipda.kr/v1/loader.js"
data-button-text="가상 피팅 해보기"
data-position="bottom-right"
data-color="#FFBE33"
data-product-url="https://myshop.com/product/123"
></script>| 속성 | 설명 | 기본값 |
|---|---|---|
| data-button-text | 버튼에 표시할 텍스트 | 가상 피팅 → |
| data-position | 버튼 위치 | bottom-right |
| data-color | 버튼 메인 색상 | #FFBE33 |
| data-product-url | 상품 URL (미설정시 현재 페이지) | window.location.href |
| data-locale | 언어 설정 | ko |
| data-z-index | 위젯 z-index 값 | 999998 |
JavaScript API
Google Tag Manager나 SPA에서 사용할 때, JS API로 위젯을 제어할 수 있습니다.
GTM / 스크립트 직접 삽입
<script>
(function(w,d,s,o,f,js,fjs){
w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
})(window,document,'script','ipda','https://widget.ipda.kr/v1/loader.js');
ipda('config', { buttonText: '피팅하기' });
</script> 프로그래밍 제어
ipda('open'); // 위젯 열기
ipda('close'); // 위젯 닫기
ipda('destroy'); // 위젯 완전 제거
ipda('config', { buttonText: '새 텍스트' }); // 설정 변경 플랫폼별 가이드
메이크샵 쇼핑몰
프리미엄 이상 요금제에서 사용 가능합니다. PC와 모바일 디자인이 분리되어 있어 각각 설치해야 합니다.
- 1 디자인 편집기 열기
관리자 상단 메뉴에서
개별디자인→디자인 스킨 관리→디자인 편집하기를 클릭합니다. - 2 스크립트 삽입
상단→기본 상단을 선택하고, HTML 소스 맨 아래에 위젯 코드를 붙여넣습니다.상품 상세 페이지만 원하는 경우:중앙 디자인→상품관련→상품 상세 페이지에 삽입하세요. - 3 저장 (2단계)
설정 저장버튼을 클릭한 후, 반드시디자인 저장버튼도 클릭합니다. 두 번 저장해야 반영됩니다.
- 1 모바일 디자인 편집기 열기
모바일샵→모바일샵 D4(개별디자인)→디자인 편집하기를 클릭합니다. - 2 스크립트 삽입
디자인 환경 설정→HEAD 입력란에 위젯 코드를 붙여넣습니다.대안:상단→기본 상단→사용자 추가영역에 삽입해도 됩니다. - 3 저장 (2단계)
설정 저장→디자인 저장순서로 두 번 저장합니다.
참고사항
- • 마이소호 요금제는 스크립트 삽입이 불가합니다. 프리미엄 이상이 필요합니다.
- • 캐시 때문에 바로 반영되지 않을 수 있습니다. 관리자에서 캐시 초기화를 실행하거나 잠시 후 확인하세요.
- • 위젯 로더는 1.3KB로 매우 가벼워 사이트 속도에 영향을 주지 않습니다.
Cafe24 쇼핑몰
- 1 앱 설치
Cafe24 앱스토어에서 "IPDA 가상 피팅"을 검색하여 설치합니다.
- 2 자동 설치
앱 설치가 완료되면 상품 상세 페이지에 위젯이 자동으로 추가됩니다. 별도의 코드 작업이 필요 없습니다.
- 3 확인
쇼핑몰의 상품 상세 페이지에서 "가상 피팅 →" 버튼이 나타나는지 확인하세요.
Shopify
- 1 테마 편집
Shopify 관리자 → 온라인 스토어 → 테마 → 코드 편집을 클릭합니다.
- 2 theme.liquid 수정
theme.liquid파일을 열고</body>태그 바로 위에 위젯 코드를 붙여넣습니다. - 3 저장
저장 후 상품 페이지에서 위젯이 정상적으로 표시되는지 확인합니다.
직접 설치 (HTML)
어떤 웹사이트든 HTML에 스크립트 태그 하나만 추가하면 됩니다.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<!-- 여기에 웹사이트 내용 -->
<!-- IPDA 가상 피팅 위젯 -->
<script async src="https://widget.ipda.kr/v1/loader.js"></script>
</body>
</html>자주 묻는 질문
아닙니다. 로더 스크립트는 1.3KB로 매우 가볍고, async 로드되어 페이지 렌더링을 차단하지 않습니다. 메인 위젯은 사용자가 버튼을 클릭할 때까지 로드되지 않습니다.
네. 데스크탑에서는 사이드 패널로, 모바일에서는 하단 시트(Bottom Sheet)로 자동 전환됩니다. 스와이프로 닫기도 지원합니다.
네. GTM에서 "맞춤 HTML" 태그를 생성하고 위 JS API 코드를 붙여넣으세요. 트리거는 "All Pages"로 설정하면 됩니다.
네. 스크립트를 공통 레이아웃(header/footer)에 한 번만 넣으면 모든 페이지에서 작동합니다. 중복 로드 방지 로직이 내장되어 있어 여러 번 포함되어도 문제없습니다.