피드백 통합 가이드

웹사이트에 피드백 위젯을 추가하여 방문자로부터 의견을 수집하는 방법을 알아보세요.

작동 방식

PrivateStater 피드백 위젯은 다음 기능을 제공합니다:

플로팅 버튼 - 화면 하단에 피드백 버튼 표시
이모지 평가 - 4단계 이모지로 빠른 만족도 평가
텍스트 피드백 - 상세한 의견 작성 (선택)
스크린샷 - 현재 화면 캡처 첨부 (선택)
이메일 수집 - 응답을 위한 이메일 (선택)

스크립트 설치

이 문서에 나온 방법들을 이용해서 privatestater.js를 설치하세요.

이미 설치한 경우 건너뛰세요.

2단계: 대시보드에서 피드백 활성화

대시보드 > 웹사이트 > 피드백 > 설정으로 이동합니다
피드백 활성화를 켭니다
필요한 옵션을 설정합니다

설정 옵션

설정	설명	기본값
활성화	피드백 위젯 사용 여부	비활성화
로컬호스트 허용	localhost에서 테스트 허용	비활성화
텍스트 입력	텍스트 피드백 수집 여부	활성화
이모지 평가	이모지 평가 수집 여부	활성화
스크린샷 첨부	방문자의 스크린샷 첨부 허용 여부	활성화
이메일 수집	이메일 필드 표시 여부	비활성화
기기 정보 (애널리틱스)	피드백을 애널리틱스 세션과 연결할지 여부	활성화
콘솔 오류 첨부	방문자의 콘솔 로그 첨부 허용 여부	활성화
일일 요약 이메일	새 피드백이 있으면 하루 최대 1회 요약 메일 발송	활성화
위젯 위치	플로팅 버튼 위치	오른쪽 하단

위젯 위치 옵션

값	설명
`bottom-right`	화면 오른쪽 하단 (기본)
`bottom-left`	화면 왼쪽 하단

자동 위젯 표시

피드백을 활성화하면 웹사이트에 자동으로 플로팅 버튼이 나타납니다.
별도의 HTML 코드 추가가 필요 없습니다.

작동 흐름

방문자가 플로팅 버튼 클릭
피드백 팝업 표시
이모지 평가 선택 (설정 시)
텍스트 입력 (설정 시)
스크린샷 첨부 (설정 시)
다음 클릭 (2단계가 없으면 바로 제출)
2단계에서 이메일 입력(설정 시) 및 기술 첨부 옵션 선택
제출

프로그래밍 방식 호출

자체 버튼이나 특정 이벤트에서 피드백 위젯을 열고 싶다면:

window.PrivateStater.showFeedback();

사용 예시

<!-- 커스텀 피드백 버튼 -->
<button onclick="window.PrivateStater.showFeedback()">
    의견 남기기
</button>

// 특정 조건에서 피드백 요청
if (userCompletedPurchase) {
    window.PrivateStater.showFeedback();
}

옵션

window.PrivateStater.showFeedback({
    onClose: function() {
        console.log('피드백 위젯이 닫혔습니다');
    }
});

수집되는 데이터

기본 수집 데이터

필드	설명	조건
평가 (rating)	이모지 평가 (1~4)	이모지 평가 활성화 시
텍스트 (text)	피드백 내용 (최대 2000자)	텍스트 입력 활성화 시
이메일 (email)	응답용 이메일	이메일 수집 활성화 시
스크린샷 (screenshot)	화면 캡처 이미지	사용자가 첨부 시

이모지 평가

값	이모지	한국어	영어
1	😠	별로예요	Hate
2	😕	아쉬워요	Dislike
3	😊	좋아요	Like
4	😍	최고예요	Love

선택 기술 첨부

방문자가 위젯에서 기술 첨부를 켜면, PrivateStater는 다음 추가 정보를 저장할 수 있습니다:

필드	설명	조건
technicalAttachment	기술 정보 첨부 동의 플래그	제출 payload에 항상 포함
pageUrl	피드백이 제출된 페이지 URL	기술 첨부 활성화 시
language	브라우저 언어	기술 첨부 활성화 시
consoleLogs	캡처된 브라우저 콘솔 로그	기술 첨부 활성화 + 콘솔 로그 설정 활성화 시
analyticsSessionConsent	애널리틱스 세션 연결 동의	기술 첨부 활성화 + 기기 정보 설정 활성화 시
visitorHash / sessionIndex / sessionStartedAt	애널리틱스 v2 세션 연결 필드	세션 연결이 활성화된 경우

기존(레거시) 피드백에는 브라우저/기기 필드가 남아 있을 수 있습니다.

대시보드에서 피드백 관리

피드백 목록

대시보드에서 수집된 피드백을 확인할 수 있습니다:

필터: 기간, 상태(미읽음/진행 중/완료/차단됨)별 필터링
검색: 본문, 이메일, 페이지 URL 서버 검색
정렬: 최신순 정렬
페이지네이션: 대시보드 목록은 페이지당 20개

상태 관리

상태	설명
미읽음	새로 수집된 피드백
진행 중	검토/처리 중인 피드백
완료	처리 완료된 피드백
차단됨	자동 차단된 피드백

기능

상태 변경: 미읽음, 진행 중, 완료, 차단됨으로 변경
일괄 작업: 일괄 상태 변경 및 일괄 삭제
스크린샷 보기: 첨부된 스크린샷 확인
세션 보기: 연결된 피드백에서 애널리틱스 v2 세션으로 이동
삭제: 피드백 삭제 (복구 불가)

통계

통계	설명
총 피드백	선택 기간 내 전체 피드백 수
평균 평점	이모지 평가 평균 (1~4)
미읽음	아직 확인하지 않은 피드백 수

스타일

피드백 위젯은 Shadow DOM으로 격리되어 있어 외부 CSS의 영향을 받지 않습니다. 위젯은 자동으로 다크 모드와 라이트 모드에 맞게 표시됩니다 (prefers-color-scheme 감지).

다국어 지원

피드백 위젯은 브라우저 언어에 따라 자동으로 한국어 또는 영어로 표시됩니다.
추가로 필요한 언어가 있다면 문의해 주시면 빠르게 추가해 드리겠습니다.

폼 데이터 임시 저장

사용자가 피드백 작성 중 위젯을 닫아도 입력한 내용이 임시 저장됩니다. 다시 열면 이전에 작성하던 내용이 복원됩니다.

평가, 텍스트, 이메일, 기술 첨부 선택 상태가 저장됩니다
제출 성공 시에만 초기화됩니다
페이지를 새로고침하면 초기화됩니다

프라이버시

쿠키 없음: 피드백 수집에 쿠키를 사용하지 않습니다
IP 저장 없음: IP 주소를 저장하지 않습니다
선택 기술 정보: 페이지 URL, 언어, 콘솔 로그는 방문자 동의 시에만 수집됩니다
애널리틱스 세션 연결: 원본 IP 대신 일일 방문자 해시를 사용해 세션을 연결합니다

문제 해결

위젯이 표시되지 않아요

대시보드에서 피드백이 활성화되어 있는지 확인하세요
스크립트가 올바르게 설치되었는지 확인하세요
브라우저 콘솔에서 에러를 확인하세요

localhost에서 작동하지 않아요

대시보드에서 로컬호스트 허용 옵션을 활성화하세요.

스크린샷 첨부가 안 돼요

스크린샷은 최대 1MB까지 지원됩니다
일부 브라우저에서는 html2canvas 라이브러리 호환성 문제가 있을 수 있습니다