아임웹 고객상담 AI 서비스 연동 가이드
<script src="https://your-sdk-domain.com/bb2-sdk.js" defer></script>
defer 속성으로 페이지 로딩을 블락하지 않습니다.
<script>
BB2SDK.init({
theme: {
position: {
horizontal: 'right',
vertical: 'bottom'
}
},
autoInit: true,
autoLogin: true // 기본값: 자동 로그인 시작
});
</script>
autoLogin: true로 페이지 로드 시 아임웹 OAuth2 인증을 자동으로 시작합니다. 이미 로그인되어 있으면 건너뜁니다.
웹사이트에 채팅 위젯이 자동으로 나타납니다.
// SDK 인스턴스 가져오기 (이미 초기화된 경우)
const sdk = BB2SDK.getInstance();
// 채팅 위젯 열기
sdk.open();
// 채팅 위젯 닫기
sdk.close();
// 채팅 위젯 토글
sdk.toggle();
// 위젯 최소화/최대화
sdk.minimize();
sdk.maximize();
// 테마 업데이트
sdk.updateTheme({
primaryColor: '#ff5722',
size: 'large',
buttonImageUrl: 'https://example.com/new-icon.png'
});
// 현재 상태 확인
const state = sdk.getState();
console.log('위젯 열림 상태:', state.isOpen);
// 디버그 정보 출력
sdk.debug();
// 상태 관리 (새로고침 시에도 유지됨)
const savedState = sdk.getSavedState();
console.log('저장된 상태:', savedState);
// 마지막 방문 페이지 URL 확인
const lastPageUrl = sdk.getLastPageUrl();
console.log('마지막 페이지:', lastPageUrl);
// 저장된 상태 삭제
sdk.clearSavedState();
// 이벤트 리스너 등록
sdk.on('widget:open', () => {
console.log('위젯이 열렸습니다!');
});
widget:open
채팅 위젯이 열렸을 때
widget:close
채팅 위젯이 닫혔을 때
widget:minimize
위젯이 최소화되었을 때
widget:maximize
위젯이 최대화되었을 때
error
오류가 발생했을 때
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BB2 SDK 예제</title>
</head>
<body>
<h1>우리 웹사이트</h1>
<p>BB2 AI 상담 서비스가 포함된 웹사이트입니다.</p>
<!-- BB2 SDK 로드 -->
<script src="https://your-sdk-domain.com/bb2-sdk.js"></script>
<script>
// SDK 초기화
BB2SDK.init({
theme: {
primaryColor: '#4f46e5',
position: {
horizontal: 'right',
vertical: 'bottom'
},
size: 'medium',
offset: {
right: 20,
bottom: 20
},
// 커스텀 버튼 이미지 (선택사항)
buttonImageUrl: 'https://example.com/custom-chat-icon.png'
},
language: 'ko',
autoInit: true,
debug: true,
autoLogin: true // 아임웹 OAuth2 자동 시작
}).then(sdk => {
// 이벤트 리스너 등록
sdk.on('widget:open', () => {
console.log('채팅 위젯이 열렸습니다.');
});
sdk.on('widget:close', () => {
console.log('채팅 위젯이 닫혔습니다.');
});
sdk.on('error', (error) => {
console.error('오류 발생:', error);
});
// 전역 함수로 노출
window.openChat = () => sdk.open();
window.closeChat = () => sdk.close();
window.toggleChat = () => sdk.toggle();
});
</script>
<button onclick="openChat()">고객 상담 시작</button>
<button onclick="closeChat()">상담 종료</button>
<button onclick="toggleChat()">상담 토글</button>
</body>
</html>
BB2 SDK는 세션스토리지를 사용하여 페이지 새로고침 시에도 위젯 상태를 유지합니다.
// 현재 저장된 상태 확인
const savedState = sdk.getSavedState();
console.log(savedState);
// {
// isOpen: true,
// isMinimized: false,
// lastPageUrl: "/chat/thread/123",
// sourcePageUrl: "https://example.com/support"
// }
// 마지막 방문 페이지 URL만 확인
const lastPage = sdk.getLastPageUrl();
// 저장된 모든 상태 삭제 (초기화)
sdk.clearSavedState();
// 전체 SDK 상태 확인
bb2Debug();
// 저장된 상태 확인
bb2GetStorage();
// 저장된 상태 초기화
bb2ClearStorage();
// 수동 상태 복원 실행
bb2ForceRestore();
// 상태 수동 저장
bb2SaveState(true, false); // (isOpen, isMinimized)
// Storage 기능 테스트
bb2TestStorage();
💡 팁: 브라우저 개발자 도구 콘솔에서 위 명령어들을 직접 실행해보세요!
웹앱에서 쓰레드 이동만 별도로 관리하여 사용자 경험을 향상시킵니다.
실제로 동작하는 BB2 SDK를 바로 테스트해볼 수 있습니다!
💾 상태 지속성 테스트: 위젯을 열어둔 상태에서 페이지를 새로고침해보세요!
A: 다음을 확인해주세요:
A: Agent 서버 연결을 확인해주세요:
A: CSS 충돌을 확인해주세요: