@teamkai/chat-sdk

kai-chatbot을 embed 하기 위한 패키지.

설치

CDN (script 태그)

<script src="https://unpkg.com/@teamkai/chat-sdk/dist/kai-sdk.min.js"></script>

npm

npm install @teamkai/chat-sdk

import KaiSDK from '@teamkai/chat-sdk';

사용법

<div id="kai-button"></div>
<div id="kai-chat"></div>

<script src="https://unpkg.com/@teamkai/chat-sdk/dist/kai-sdk.min.js"></script>
<script>
  const kai = KaiSDK.init({
    buttonContainer: 'kai-button',
    chatContainer: 'kai-chat',
    baseUrl: 'https://your-chatbot.example.com',
    token: '고객사-JWT-토큰',

    // 선택 옵션
    buttonText: '상담하기',
    chatStyle: { height: '700px', width: '400px' },

    // 이벤트 콜백
    onAuthResult: (data) => console.log('인증 결과:', data),
    onAuthExpired: (data) => console.log('인증 만료:', data),
    onOpen: () => console.log('채팅 열림'),
    onClose: () => console.log('채팅 닫힘'),
  });
</script>

인증 흐름

1. SDK가 iframe을 열면서 token을 URL에 포함
   iframe.src = baseUrl + '/auth?token=' + token

2. 서버가 token 검증 → 암호화된 URL로 리다이렉트
   /auth?token=xxx → /api/auth → /chat/encrypted/[encryptedToken]

3. 채팅 페이지 로드 시 SDK에 인증 결과 알림
   onAuthResult({ status: 'authenticated' })

Cookie 기반 세션이 primary이며, third-party cookie가 차단된 환경(Safari ITP 등)에서는 URL token으로 인증이 유지됩니다.

API

KaiSDK.init(options)

SDK를 초기화하고 인스턴스를 반환합니다.

| 옵션 | 타입 | 필수 | 설명 | |------|------|------|------| | buttonContainer | string \| HTMLElement | O | 버튼을 넣을 컨테이너 | | chatContainer | string \| HTMLElement | O | iframe을 넣을 컨테이너 | | baseUrl | string | O | 챗봇 서버 URL | | token | string | - | 고객사 JWT 토큰 | | buttonText | string | - | 버튼 텍스트 (기본: 'Kai') | | buttonStyle | object | - | 버튼 CSS 스타일 | | chatStyle | object | - | iframe 래퍼 CSS 스타일 | | onButtonClick | function | - | 버튼 클릭 콜백 | | onOpen | function | - | iframe 열림 콜백 | | onClose | function | - | iframe 닫힘 콜백 | | onAuthResult | function | - | 인증 결과 콜백 | | onAuthExpired | function | - | 인증 만료 콜백 |

인스턴스 메서드

kai.open()                    // 채팅 iframe 열기
kai.close()                   // 채팅 iframe 닫기
kai.destroy()                 // SDK 정리
kai.setParams({ key: 'val' }) // URL 파라미터 변경
kai.call('method', data)      // iframe에 메서드 호출
kai.on('event', callback)     // iframe 이벤트 리스닝

License

MIT