edutap.ai developers

설정

Web Component 속성 및 테넌트 설정

<mooni-frame> 속성

속성타입필수기본값설명
api-keystring✅—테넌트 API 키. 모든 요청에 mooni-api-key 헤더로 전송.
tenant-idstringoptional—챗 헤더에 표시되는 테넌트 식별자.
theme"light" | "dark"optional"light"컬러 테마.
lang"ko" | "en"optional"ko"UI 언어.
user-idstringoptional—외부 사용자 ID. 어드민에서 사용자별 세션 그룹화에 사용. 없으면 익명 세션.
brand-idstringoptional—2차 테넌트 식별자. 설정하면 FAQ 검색이 metadata.brandId 일치 문서로만 필터링됩니다.

명령형으로도 설정 가능:

const el = document.querySelector('mooni-frame');
el.apiKey = 'mooni_xxx';
el.theme = 'dark';
el.userId = 'user@example.com';

<mooni-button> 속성

속성타입기본값설명
position"bottom-right" | "bottom-left" | "top-right" | "top-left""bottom-right"고정 위치.

버튼은 형제 <mooni-frame> 엘리먼트의 표시/숨김을 토글합니다. 같은 부모 안에 두 요소를 함께 두세요.

사용자 / 세션 식별

Mooni는 두 식별자를 구분합니다:

  • user-id — 호스트 사이트가 제공. 세션을 가로질러 사용자를 유지하고 어드민 그룹화에 사용.
  • sessionId — iframe 내부에서 localStorage 기반으로 자동 생성. 호스트가 전달하거나 관리할 필요 없음. 같은 브라우저면 스토리지가 비워지기 전까지 같은 세션.

user-id가 없어도 세션은 추적되지만 어드민에서는 익명으로 표시됩니다. sessionId가 없는 (localStorage 접근 불가한) 레거시 임베드는 챗은 동작하지만 어드민 기록이 남지 않습니다.

멀티 브랜드 설정

한 테넌트가 여러 브랜드를 운영하면 (예: 여러 학교를 운영하는 아카데미) 테넌트 설정에 브랜드를 등록하고 페이지마다 해당 brand-id를 전달하세요:

<!-- A학교 페이지 -->
<mooni-frame api-key="..." brand-id="school-a"></mooni-frame>

<!-- B학교 페이지 -->
<mooni-frame api-key="..." brand-id="school-b"></mooni-frame>

FAQ 검색은 서버에서 metadata.brandId로 필터링됩니다. brandId 메타가 없는 문서는 brand-id 필터가 활성화된 동안 노출되지 않습니다.

테마

light, dark 두 테마 제공. 동적 변경:

document.querySelector('mooni-frame').theme = 'dark';

변경은 mooni:config:update postMessage로 iframe에 전달되어 새로고침 없이 적용됩니다.

언어

지원: ko (기본), en.

<mooni-frame lang="en" ...></mooni-frame>

마운트 후 lang 변경도 mooni:config:update로 전파됩니다.

테넌트 프로비저닝 체크리스트

운영 전 확인:

  • API 키 발급 완료 (mooni_… 형식)
  • 프로덕션 origin이 화이트리스트에 등록
  • (멀티 브랜드인 경우) Brand ID 설정 완료
  • Out-of-scope 폴백 메시지 검수
  • 검색 임계값 튜닝 (기본 0.5)

프로덕션의 origin 검증은 엄격합니다. 화이트리스트 미등록 origin의 요청은 HTTP 403으로 거부됩니다. 스테이징/프리뷰 도메인도 함께 등록하세요.

목차

<mooni-frame> 속성<mooni-button> 속성사용자 / 세션 식별멀티 브랜드 설정테마언어테넌트 프로비저닝 체크리스트