임베딩 가이드

히트 카운터를 웹사이트에 쉽게 임베딩하는 방법

빠른 시작

단 2줄로 시작하기

JavaScript 위젯을 사용하면 가장 쉽게 히트 카운터를 추가할 수 있습니다.

1. JavaScript 위젯 (추천)

HTML 파일의 <head> 또는 <body> 태그에 다음 코드를 추가하세요:

<!-- 위젯 스크립트 로드 -->
<script src="https://count.weniv.co.kr/static/js/hit-counter-widget.js"></script>

<!-- 위젯 표시할 위치에 삽입 -->
<div data-hit-counter data-url="https://yoursite.com" data-style="minimal"></div>

`data-url`을 실제 사이트 URL로 변경하세요!

위젯 스타일

Minimal

1,234 views

data-style="minimal"

Badge

1,234 views

data-style="badge"

Card

Page Views

1,234

total visits

data-style="card"

설정 옵션

속성	설명	기본값	예시
data-url	추적할 사이트 URL (필수)	-	https://mysite.com
data-style	위젯 스타일	minimal	badge, card
data-show-label	라벨 표시 여부	true	false
data-show-icon	아이콘 표시 여부	true	false
data-update-interval	업데이트 간격 (밀리초)	30000	60000
data-link-to-dashboard	대시보드 링크 연결	true	false

고급 사용법

1. 한 페이지에 여러 위젯 사용

<!-- 메인 페이지 카운터 -->
<div data-hit-counter data-url="https://mysite.com" data-style="badge"></div>

<!-- 특정 프로젝트 카운터 -->
<div data-hit-counter data-url="https://mysite.com/project1" data-style="minimal"></div>

<!-- 포트폴리오 카운터 -->
<div data-hit-counter data-url="https://mysite.com/portfolio" data-style="card"></div>

2. 동적으로 위젯 추가

<script>
// 동적으로 위젯 추가
function addHitCounter(containerId, url, style = 'minimal') {
    const container = document.getElementById(containerId);
    const widget = document.createElement('div');
    
    widget.setAttribute('data-hit-counter', '');
    widget.setAttribute('data-url', url);
    widget.setAttribute('data-style', style);
    
    container.appendChild(widget);
    
    // 위젯 초기화
    window.HitCounterWidget.init();
}

// 사용 예시
addHitCounter('my-container', 'https://mysite.com/new-page', 'badge');
</script>

3. 커스텀 CSS 스타일

<style>
/* 기본 minimal 스타일 커스터마이징 */
.hit-counter-minimal {
    background: #f0f9ff !important;
    border: 2px solid #0ea5e9 !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
}

.hit-counter-minimal:hover {
    background: #e0f2fe !important;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

/* 카운트 숫자 강조 */
.hit-counter-count {
    color: #0ea5e9 !important;
    font-size: 1.1em !important;
}
</style>

다른 임베딩 방법

SVG 뱃지 (정적)

실시간 업데이트는 없지만 가장 가벼운 방법입니다.

<img src="https://count.weniv.co.kr/api/v1/badge?url=https://yoursite.com" alt="Hits">

iframe 임베딩

샌드박스 환경에서 안전하게 로드됩니다.

<iframe src="https://count.weniv.co.kr/embed/widget?url=https://yoursite.com&style=minimal" 
        width="120" height="30" frameborder="0"></iframe>

자주 묻는 질문

카운트가 업데이트되지 않아요

다음 사항을 확인해보세요:

data-url이 정확한 사이트 URL인지 확인
사이트가 공개 설정되어 있는지 확인
브라우저의 개발자 도구에서 네트워크 오류 확인
페이지를 새로고침하여 다시 시도

HTTPS 사이트에서만 작동하나요?

아니요, HTTP와 HTTPS 모두 지원합니다. 다만 보안을 위해 HTTPS 사용을 권장합니다.

위젯이 사이트 성능에 영향을 주나요?

매우 가벼운 JavaScript 위젯으로 성능에 거의 영향을 주지 않습니다. 비동기 로딩과 캐싱을 통해 최적화되어 있습니다.

개인정보는 안전한가요?

네, IP 주소는 해싱되어 저장되며 개인을 식별할 수 없습니다. GDPR을 준수합니다.