Capman Feed
"이거 왜 안 돼요?"
스크린샷으로 받으세요
고객이 뭘 보고 있는지, 뭘 했는지 정확하게 파악하세요.
더 이상 "어디요?", "뭐요?"라고 묻지 마세요.
고객 문의, 이렇게 받으세요
스크린샷부터 실시간 채팅까지, 정확한 소통을 위한 모든 것
📸
스크린샷 + 어노테이션
고객이 직접 문제 부분에 빨간 원을 표시해서 보내줍니다.
- • 원클릭 스크린샷
- • 화살표, 텍스트 표시
- • "여기"가 정확히 어디인지
🎥
세션 녹화
고객이 뭘 했는지 재현 가능. 버그 원인을 바로 파악하세요.
- • DOM 녹화 (rrweb)
- • 타임라인 재생
- • 에러 발생 전후 확인
🔧
환경 정보 자동 수집
"브라우저 뭐 쓰세요?" 더 이상 물어볼 필요 없습니다.
- • 브라우저, OS 자동 감지
- • 콘솔 에러 로그
- • 네트워크 에러
💬
실시간 채팅
피드백 받고 바로 대화하세요. 상담원 온라인 상태 표시.
- • Socket.io 실시간
- • 상담원 상태 표시
- • 채팅 이력 저장
🔗
도구 연동
피드백을 Notion, Jira로 자동 전송. 워크플로우에 통합하세요.
- • Notion 자동 연동
- • API로 Jira 연결
- • Webhook 지원
📚
매뉴얼로 정리
같은 문의가 반복되면? 캡맨 매뉴얼로 정리해서 링크로 답변.
- • 피드백 → 매뉴얼 변환
- • KB 발행
- • 반복 문의 감소
설치 방법
3단계로 간편하게
1
프로젝트 생성
Station 대시보드에서 피드백 프로젝트를 생성하고 API 키를 발급받습니다.
2
SDK 설치
웹사이트에 스크립트 태그를 추가하고 API 키를 설정합니다.
3
피드백 수집
사용자가 위젯을 통해 피드백을 전송하면 대시보드에서 확인합니다.
기본 설치
<!-- HTML에 추가 -->
<script src="https://capman.kr/sdk/capman-feed.js"></script>
<script>
CapmanFeed.init({
apiKey: 'YOUR_API_KEY'
});
</script>
전체 옵션
CapmanFeed.init({
apiKey: 'YOUR_API_KEY',
features: ['annotate', 'record', 'report', 'chat'],
position: 'bottom-right',
autoRecord: false,
collectConsoleLogs: true,
maskInputs: false,
user: { id: '...', name: '...', email: '...' }
});
동적 사용자 설정
// 로그인 후
CapmanFeed.setUser({
id: 'user123',
name: '홍길동',
email: 'user@example.com'
});
// 로그아웃
CapmanFeed.clearUser();
React / Next.js (Script 컴포넌트)
// next/script 사용
import Script from 'next/script';
<Script
src="https://capman.kr/sdk/capman-feed.js"
strategy="afterInteractive"
onLoad={() => {
CapmanFeed.init({
apiKey: 'YOUR_API_KEY',
projectId: 'YOUR_PROJECT_ID',
features: ['annotate', 'record', 'report'],
screenshot: 'html-to-image'
});
}}
/>
SDK 옵션
init() 함수에 전달할 수 있는 옵션들
| 옵션 | 타입 | 필수 | 설명 |
|---|---|---|---|
| apiKey | string | 필수 | 프로젝트 API 키 (필수) |
| features | array | 선택 | 활성화할 기능 ['annotate', 'record', 'report', 'chat'] |
| position | string | 선택 | 위젯 위치 (bottom-right, bottom-left, top-right, top-left) |
| primaryColor | string | 선택 | 테마 색상 (기본: #e94560) |
| autoRecord | boolean | 선택 | 페이지 로드시 자동 녹화 시작 |
| recordOnError | boolean | 선택 | 에러 발생시 자동 녹화 시작 |
| user | object | 선택 | 사용자 정보 { id, name, email, ...custom } |
| collectConsoleLogs | boolean | 선택 | 콘솔 로그 수집 여부 (기본: false) |
| screenshot | string | 선택 | 스크린샷 방식 'client' (html2canvas) 또는 'server' |
| maskInputs | boolean | 선택 | 녹화 시 입력 필드 마스킹 (기본: false) |
| showMouseTail | boolean | 선택 | 녹화 재생 시 마우스 경로 표시 (기본: true) |
| mouseTailColor | string | 선택 | 마우스 경로 색상 (기본: #e94560) |
API 메서드
JavaScript에서 호출 가능한 메서드
기본
CapmanFeed.init(options)SDK 초기화 및 위젯 표시
CapmanFeed.setUser(user)사용자 정보 설정 (로그인 후)
CapmanFeed.clearUser()사용자 정보 제거 (로그아웃)
CapmanFeed.destroy()SDK 정리 및 제거
녹화 (Recorder)
CapmanFeed.Recorder.start()세션 녹화 시작
CapmanFeed.Recorder.stop()세션 녹화 중지
CapmanFeed.Recorder.isRecording녹화 중 여부 (boolean)
CapmanFeed.Recorder.getRecording()녹화 데이터 반환
어노테이션 (Annotator)
CapmanFeed.Annotator.show()어노테이션 도구 표시
CapmanFeed.Annotator.hide()어노테이션 도구 숨김
실시간 채팅 (Chat)
CapmanFeed.Chat.open()채팅창 열기
CapmanFeed.Chat.close()채팅창 닫기
CapmanFeed.Chat.toggle()채팅창 토글