Chatbot Widget은 웹사이트에 간단하게 통합할 수 있는 임베디드 챗봇 위젯입니다. iframe 기반의 격리된 구조로 호스트 페이지와 CSS/JS 충돌 없이 안정적으로 동작하며, 다양한 커스터마이징 옵션을 제공합니다.
- 🚀 원라이너 설치: 스크립트 태그 하나로 즉시 사용 가능
- 🎨 완전한 커스터마이징: 색상, 레이아웃, 위치 등 자유롭게 설정
- 🔒 격리된 구조: iframe 기반으로 호스트 페이지와 완전 분리
- 📱 반응형 디자인: 모바일과 데스크톱 모두 지원
- 🔌 이벤트 API: 위젯 상태와 메시지 이벤트를 실시간으로 감지
- ⚡ 가벼움: 최소한의 리소스로 빠른 로딩
웹사이트의 <body> 태그 하단에 아래 스크립트를 추가하세요:
<script
src="https://chatbot.gistory.me/loader.js"
data-widget-key="YOUR_WIDGET_KEY"
></script>설치 즉시 화면 우하단에 챗봇 런처 버튼이 표시됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>내 웹사이트</title>
</head>
<body>
<h1>환영합니다!</h1>
<!-- 챗봇 위젯 설치 -->
<script
src="https://chatbot.gistory.me/loader.js"
data-widget-key="wk_live_abc123"
></script>
</body>
</html><script
src="https://chatbot.gistory.me/loader.js"
data-widget-key="wk_live_abc123"
data-position="right"
data-primary-color="df3326"
data-button-color="df3326"
data-width="380"
data-height="560"
></script>더 자세한 사용법은 문서를 참고하세요.
- React + TypeScript - 위젯 UI 개발
- Vite - 빌드 도구
- Tailwind CSS - 스타일링
- React Query - 상태 관리
- OAuth2/OIDC - 인증 시스템
- Node.js 18 이상
- npm 또는 yarn
# 저장소 클론
git clone https://github.com/yourusername/chatbot-fe.git
cd chatbot-fe
# 의존성 설치
npm installcp .env.example .env.env.example 파일을 복사한 후 필요한 값을 설정하세요.
npm run dev개발 서버가 http://localhost:5173에서 실행됩니다.
npm run build빌드 결과물은 dist/ 디렉토리에 생성됩니다.
chatbot-fe/
├── src/
│ ├── components/ # 공통 컴포넌트
│ ├── pages/ # 페이지 컴포넌트
│ ├── widget/ # 위젯 UI
│ ├── api/ # API 클라이언트
│ └── ...
├── public/
│ └── loader.js # 위젯 로더 스크립트
└── ...
기여는 언제나 환영합니다!
- 이 저장소를 Fork 하세요
- 새로운 기능 브랜치를 생성하세요 (
git checkout -b feature/amazing-feature) - 변경사항을 커밋하세요 (
git commit -m 'Add some amazing feature') - 브랜치에 Push 하세요 (
git push origin feature/amazing-feature) - Pull Request를 열어주세요
이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참고하세요.
loader.js는 반드시 HTTPS 환경에서 사용하세요- 이 레포는 위젯 UI + 로더 스크립트만 포함합니다
- AI 서버 및 실제 응답 로직은 별도의 서버에서 처리됩니다