DOCS
통합 가이드
AI 아바타를 사이트에 임베드하는 3가지 방법 — 최소 2줄의 코드로 구현 가능합니다. 전체 파라미터와 에러 코드는 콘솔에서 확인하세요.
3단계로 통합
1아바타 생성
콘솔에 로그인하여 원하는 외형과 음성으로 아바타를 생성하고 Agent ID를 받으세요.
2API 키 생성
기본 키는 자동 생성됩니다; 사이트별로 허용 도메인 화이트리스트가 있는 별도의 키를 만들 수 있습니다.
3복사 및 임베드
콘솔의 통합 페이지에서 전체 스니펫을 가져와 플레이스홀더를 교체하고 배포하세요.
어떤 방식을 선택할까
아바타 기능은 모두 동일; 본인 기술 스택에 맞는 방식을 선택하세요.
| 방식 | 적합한 상황 | 제어성 | 스타일 격리 |
|---|---|---|---|
| JS SDK | 이벤트 구독 및 프로그래매틱 제어가 필요한 SPA | ★★★ | 중간 |
| Web Component | Vue / React / 순수 HTML, 최소 설정 | ★★ | 높음 (Shadow DOM) |
| iframe | 정적 사이트, CMS, 기사, 의존성 없음 | ★ | 최고 (sandbox) |
어떤 통합 경로를 선택할까요?
LLM이 무엇을 반환하느냐로 결정 —— 텍스트만은 경로 A, 오디오 포함은 경로 B.
A · 텍스트
LLM이 텍스트 반환 —— TTS와 립싱크는 우리가
텍스트만 보내세요. 음성 합성과 아바타 입 모양은 우리가 처리. 가장 빠른 경로: 실제 코드 몇 줄로 가동.
첫 통합에 추천
B · 오디오
LLM이 텍스트 + 오디오 반환 —— 우리는 립싱크만
자체 TTS로 오디오 생성, 우리는 입 모양만 맞춤. 셀럽 IP, 브랜드 음성, 방언 등 음색을 완전 제어하고 싶을 때.
브랜드 음성용
먼저 A로 시작. 나중에 B로 전환해도 아키텍처 변경 없음 —— 같은 widget 인스턴스에서 API만 변경.
가장 빠른 시작 · SDK 예제
스니펫을 복사하고 agent_xxx와 YOUR_API_KEY를 본인 것으로 교체하면 완료.
JS SDK · HTML
<script type="module" src="https://embed.avataraisdk.com/sdk.js"></script>
<script type="module">
const widget = AIAvatar.init({
agentId: 'agent_xxxxxxxxxxxx',
apiKey: 'YOUR_API_KEY',
behavior: { llmMode: 'external' },
// 경로 A: LLM이 텍스트 반환, TTS와 립싱크는 우리가
onUserInput: async (msg) => {
const reply = await myCustomerLLM(msg.content);
widget.replyText(reply);
},
});
</script>JS SDK / Web Component 스니펫, 파라미터 레퍼런스, 에러 코드, 도메인 화이트리스트 설정은 모두 콘솔에 있습니다.