DOCS
Guia de integração
Incorpore um avatar de IA no seu site de três maneiras — com apenas duas linhas de código. Parâmetros completos e códigos de erro estão no console.
Três passos para integrar
Faça login no console, crie um avatar com a aparência e voz desejadas, obtenha um Agent ID.
Uma chave padrão é gerada automaticamente; crie chaves separadas por site com allowlists de origens permitidas.
Pegue o snippet completo na página de Integração do console, substitua os marcadores e publique.
Qual método escolher
Mesmas capacidades do avatar; escolha o caminho que se adapta à sua stack.
| Método | Ideal para | Controle | Isolamento de estilos |
|---|---|---|---|
| JS SDK | SPAs que precisam de assinatura de eventos e controle programático | ★★★ | Médio |
| Web Component | Vue / React / HTML puro, configuração mínima | ★★ | Alto (Shadow DOM) |
| iframe | Sites estáticos, CMS, artigos, sem dependências | ★ | Máximo (sandbox) |
Que rota de integração escolher?
Decidido pelo que seu LLM retorna —— só texto vai pela rota A, áudio incluso vai pela rota B.
Seu LLM retorna texto —— nós cuidamos do TTS + sincronização labial
Mande-nos texto puro. Sintetizamos a voz e movemos a boca do avatar. Rota mais rápida: algumas linhas de código real e está no ar.
Recomendado para primeira integração
Seu LLM retorna texto + áudio —— nós só sincronizamos os lábios
Traga seu próprio TTS para controlar totalmente a voz — IP de celebridade, voz de marca, dialetos. Nós só alinhamos os lábios.
Para voz de marca própria
Comece com A. Mudar para B depois não altera a arquitetura —— mesma instância widget, chamada API diferente.
Início mais rápido · exemplo SDK
Copie o snippet, troque agent_xxx e YOUR_API_KEY pelos seus — pronto.
<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' },
// Rota A: seu LLM retorna texto, nós fazemos TTS + sincronização labial
onUserInput: async (msg) => {
const reply = await myCustomerLLM(msg.content);
widget.replyText(reply);
},
});
</script>Snippets de JS SDK / Web Component, referência de parâmetros, códigos de erro e configuração de allowlist de origem estão todos no console.
Ver a documentação de integração completa
Faça login no console → Integração: obtenha sua chave API, todos os exemplos de código, referência de parâmetros e dicas de tratamento de erros.
Abrir console