edutap.ai developers

Mooni 챗

사이트에 Mooni FAQ 챗 위젯을 임베드하는 방법

Mooni는 고객 지원용 FAQ 챗 위젯입니다. LLM 호출 없이 하이브리드 검색(BM25 + Vector + RRF)으로 50ms 이내에 FAQ 답변을 반환합니다. Web Component 한 줄로 어떤 사이트에든 임베드할 수 있습니다.

Mooni는 TapKit과 별도 제품입니다. TapKit (<tap-kit>)은 강의 영상 옆 AI 튜터, Mooni (<mooni-frame>)는 고객 지원 챗입니다. SDK도 CDN도 API도 다릅니다 — 같은 페이지에서 공존할 수 있지만 설정은 공유하지 않습니다.

아키텍처 개요

구성 요소역할업데이트
로더 스크립트versions.json + SRI로 최신 번들 자동 로드자동
Web Componentiframe 호스팅, postMessage로 설정 전달자동
iframe 앱챗 UI, /api/chat 호출서버 배포

사전 요구사항

위젯 임베드 전에 준비할 것:

  • API 키 — 테넌트당 발급. 모든 챗 요청에 mooni-api-key 헤더로 전송됩니다.
  • 허용 origin — 사이트 origin이 테넌트 화이트리스트에 등록되어 있어야 합니다 (CORS 검증). 등록 요청은 별도로 문의주세요.
  • Tenant ID — 짧은 식별자 (예: kg-eduwon-demo). 챗 헤더에 표시됩니다.
  • (선택) Brand ID — 한 테넌트가 여러 브랜드를 운영하면 brand-id로 FAQ 검색을 필터링할 수 있습니다.

빠른 시작

1. 로더 + Web Component 추가

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. SDK 로드 -->
    <script src="https://files.edutap.ai/mooni-sdk/loader.js"></script>

    <!-- 2. 챗 마운트 -->
    <mooni-frame
      api-key="mooni_your_api_key_here"
      tenant-id="your-tenant"
      lang="ko"
      theme="light"
    ></mooni-frame>
  </body>
</html>

끝. 위젯이 초기화되면서 https://ax-cs-demo.vercel.app로 iframe이 열리고 바로 질문을 받기 시작합니다.

2. 플로팅 런처 버튼 (선택)

<script src="https://files.edutap.ai/mooni-sdk/loader.js"></script>

<mooni-button position="bottom-right"></mooni-button>
<mooni-frame
  api-key="mooni_your_api_key_here"
  tenant-id="your-tenant"
  style="display:none"
></mooni-frame>

<mooni-button>은 형제 <mooni-frame>의 표시/숨김을 토글합니다. position 값: bottom-right(기본), bottom-left, top-right, top-left.

3. 사용자 식별 (선택)

<mooni-frame
  api-key="mooni_your_api_key_here"
  tenant-id="your-tenant"
  user-id="user@example.com"
  brand-id="academy-01"
></mooni-frame>

user-id는 어드민 패널로 전달되어 운영자가 사용자별로 세션을 묶어볼 수 있게 합니다. 없으면 익명 세션으로 기록됩니다.

환경별 URL

환경로더iframe 앱
프로덕션https://files.edutap.ai/mooni-sdk/loader.jshttps://ax-cs-demo.vercel.app
스테이징https://files.edutap.ai/mooni-sdk/loader-staging.jshttps://ax-cs-demo.vercel.app

다음 단계