Console

DOCS

Integration guide

Embed an AI avatar on your site in three ways — as little as two lines of code. Full parameters and error codes live in the console.

Three steps to integrate

1Create an avatar

Sign in to the console, create an avatar with your chosen look and voice, get an Agent ID.

2Generate an API key

A default key is generated automatically; create separate keys per site with allowed-origin whitelists.

3Copy & embed

Grab the full snippet from the console's Integration page, replace placeholders, and ship.

Which method to pick

Same avatar capabilities; choose the path that fits your stack.

MethodBest forControlStyle isolation
JS SDKSPAs needing event subscriptions and programmatic control★★★Medium
Web ComponentVue / React / vanilla HTML, minimal setup★★High (Shadow DOM)
iframeStatic sites, CMS, articles, zero deps★Highest (sandbox)

Pick your integration route

Decided by what your LLM returns — text only takes route A, audio comes with route B.

A · Text

Your LLM returns text — we handle TTS + lip-sync

Send us plain text. We synthesize the voice and drive the avatar's mouth. The fastest path — three lines of real code and you are live.

Recommended for first integration

B · Audio

Your LLM returns text + audio — we only lip-sync

Bring your own TTS so you fully own the voice — celebrity IP, brand voice, dialects. We just align the lip motion.

For brand-owned voice

Start with A. Switching to B later does not change the architecture — same widget instance, different API call.

Quickest start · SDK example

Copy the snippet, swap agent_xxx and YOUR_API_KEY for your own — done.

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' },

    // Route A: your LLM returns text, we do TTS + lip-sync
    onUserInput: async (msg) => {
      const reply = await myCustomerLLM(msg.content);
      widget.replyText(reply);
    },
  });
</script>

JS SDK / Web Component snippets, parameter reference, error codes, and origin whitelist setup all live in the console.

View the full integration docs

Sign in to the console → Integration: get your API key, every code sample, parameter reference, and error-handling tips.

Open console

Back to home