Fitkee SDK for JavaScript

Fitkee SDK는 웹 애플리케이션에서 고객 피드백을 쉽게 수집할 수 있도록 도와주는 JavaScript 라이브러리입니다.

설치

npm install @yiyol/fitkee-sdk

기본 사용법

import { FitkeeClient } from '@yiyol/fitkee-sdk';

const client = new FitkeeClient({
  apiKey: 'your-api-key'
});

// 플로팅 버튼 생성
client.createFloatingButton();

// 또는 팝업 직접 표시
client.showTicketPopup();

설정 옵션

기본 설정

const client = new FitkeeClient({
  apiKey: 'your-api-key',
  baseURL: 'https://your-api-domain.com', // 선택사항
  timeout: 10000, // 선택사항, 기본값: 10000ms
  language: 'ko', // 선택사항, 지원 언어: 'ko', 'en'
  reporter: {
    email: '[email protected]',
    name: '사용자 이름',
    id: 'user-id'
  }
});

언어 설정

SDK는 다음과 같은 우선순위로 언어를 결정합니다:

1. 팝업 설정의 언어 (가장 높은 우선순위)
2. SDK 설정의 언어
3. 시스템 언어 감지 (브라우저 언어 기반)
4. 영어로 fallback (지원하지 않는 언어인 경우)

// 시스템 언어 자동 감지 (한국어 브라우저 → 한국어, 영어 브라우저 → 영어)
const client = new FitkeeClient({
  apiKey: 'your-api-key'
  // language 설정 없음 → 시스템 언어 감지
});

// SDK 레벨에서 언어 설정
const client = new FitkeeClient({
  apiKey: 'your-api-key',
  language: 'en' // SDK 전체 언어 설정
});

// 팝업 레벨에서 언어 설정 (SDK 설정보다 우선)
const client = new FitkeeClient({
  apiKey: 'your-api-key',
  language: 'ko', // SDK 기본 언어
  popupConfig: {
    language: 'en' // 팝업 언어 (SDK 언어보다 우선)
  }
});

팝업 설정

const client = new FitkeeClient({
  apiKey: 'your-api-key',
  popupConfig: {
    position: 'bottom-right', // 'bottom-right', 'bottom-left', 'top-right', 'top-left'
    theme: 'light', // 'light', 'dark'
    language: 'ko', // 'ko', 'en'
    showTicketList: true, // 티켓 리스트 탭 표시 여부
    maxTicketsInList: 10, // 리스트에 표시할 최대 티켓 수
    enableEmailInput: false // 이메일 입력 필드 활성화 여부
  }
});

API 메서드

티켓 관련

// 티켓 제출
const result = await client.submitTicket({
  title: '제목',
  description: '설명',
  type: 'bug', // 'bug', 'feature', 'question', 'other'
  priority: 'high', // 'low', 'medium', 'high', 'urgent'
  attachments: [file1, file2] // 선택사항
});

// 티켓 목록 조회
const tickets = await client.getTickets({
  status: 'open',
  type: 'bug',
  limit: 10,
  offset: 0
});

// 댓글 조회
const comments = await client.getComments(ticketId, {
  limit: 50,
  offset: 0
});

// 댓글 작성
const comment = await client.createComment(ticketId, {
  content: '댓글 내용',
  is_internal: false
});

UI 관련

// 플로팅 버튼 생성
client.createFloatingButton();

// 플로팅 버튼 제거
client.removeFloatingButton();

// 플로팅 버튼 토글
client.toggleFloatingButton(true); // 표시
client.toggleFloatingButton(false); // 숨김

// 팝업 표시
client.showTicketPopup();

// 팝업 숨김
client.hideTicketPopup();

설정 변경

// 런타임에 설정 변경
client.configure({
  apiKey: 'new-api-key',
  language: 'en',
  popupConfig: {
    theme: 'dark'
  }
});

// 보고자 정보 설정
client.setReporter({
  email: '[email protected]',
  name: '새 이름',
  id: 'new-id'
});

지원 언어

현재 지원하는 언어:

• 한국어 (ko): 한국어 브라우저에서 자동 감지
• 영어 (en): 영어 브라우저에서 자동 감지, 기본 fallback

지원하지 않는 언어의 경우 자동으로 영어로 fallback됩니다.

브라우저 지원

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

라이선스

MIT License